やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > 静的サイトジェネレータ > Zolaのincludeを使ってみる

Zolaのincludeを使ってみる

静的サイトジェネレータ

　別ファイルにあるHTMLテキストをそのまま取り込む。

成果物

情報源

前回まで

　ブログサイトをつくれるようになった。

構成

  • templates/
    • include/
      • head-link-css.html
    • page.html
    • index.html

　index.htmlとpage.htmlが、includeする側。

　head-link-css.htmlがincludeされる側。上記2ファイルに共通している部分を書く。

head-link-css.html

<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="screen and (max-width: 899px)">
<link rel="stylesheet" href="/css/pc.css" type="text/css" media="screen and (min-width: 900px)">

　index.htmlとpage.htmlはどちらも同じCSSを使う。なので上記コードが共通している。

includeしてみる

{% include "include/head-link-css.html" %}

　上記のようにとりこみたいファイルのパスを指定すればよい。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ config.title }}</title>
    {% include "include/head-link-css.html" %}
</head>
<body>
<h1>{{ config.title }}</h1><p>{{ config.description | safe }}</p>
<a href="/about">about</a>
<footer>© 2021 {{ config.extra.author }}</footer>
</body>
</html>

page.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ page.title }} | {{ config.title }}</title>
    {% include "include/head-link-css.html" %}
</head>
<body>
<h1>{{ page.title }}</h1><p>{{ page.description | safe }}</p>
{{ page.content | safe }}
<footer>© 2021 {{ config.extra.author }}</footer>
</body>
</html>

所感

　includeは簡単。これに引数を渡せるのがmacroである。次回macroをやってみる。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux