ブログの雛形。
成果物
前提
あとは一覧される単一ページをつくるだけ。ついでによくある前後記事へのリンクもつくる。
流れ
/blog/page.htmlを追加する/blog/2021-08-01.mdを追加する
1. /blog/page.htmlを追加する
- 端末で
$SITE_ROOTへ移動する templates/blogに移動するtouch page.htmlする
templates/blog/page.html
<html> <body> <h1>{{ page.title }}</h1> <p>{{ page.description }}</p> {{ page.content | safe }} <nav class="pagination"> {% if page.earlier %}<a class="previous" href="{{ page.earlier.permalink }}">‹ {{ page.earlier.title }}</a>{% endif %} {% if page.earlier and page.later %} {% endif %} {% if page.later %}<a class="next" href="{{ page.later.permalink }}">{{ page.later.title }} ›</a>{% endif %} </nav></aside> </body> </html>
上部は前回とおなじ。ポイントは下部。前記事と次記事へのリンクをつくっている。
変数の意味は以下。
| tera | データ元 | 概要 |
|---|---|---|
{{ page.title }} |
*.mdのフロントマターtitle |
タイトル |
{{ page.description }} |
*.mdのフロントマターdescription |
説明 |
{{ page.content }} |
*.mdの内容 |
MarkdownをHTMLに変換したテキスト |
{{ page.permalink }} |
*.mdのファイル名 |
URL |
自分のページからみた前後にあるページを取得できる。
| tera | データ元 | 概要 |
|---|---|---|
{{ page.earlier }} |
*.md |
このページよりひとつ前のページ |
{{ page.later }} |
*.md |
このページよりひとつ後のページ |
{{ page.content | safe }}の| safeはフィルタという概念。Linuxコマンドのそれとおなじでデータ加工する。今回のそれはMarkdownで書かれた内容のHTMLを{{ page.content }}で取得し、それをsafeフィルタに渡してそのままHTMLとして出力する。もしsafeフィルタにかけなければエスケープ（サニタイズ）されてただのテキストとして出力されてしまう。
{% if %}, {% for %}の構文がある。これはプログラミング言語のそれとおなじ。
| tera | 概要 |
|---|---|
{% if 条件 %} |
条件を満たしたときだけ実行する |
{% for 変数 in 配列 %} |
ループする。（loop.indexで添字が取得できる） |
2. /blog/2021-08-01.mdを追加する
あとはMarkdownで記事を書くだけ。
+++ title = "タイトル0801" description = "説明0801" date = 2021-08-01T00:00:00 +++ # 見出しA 本文A。 # 見出しB 本文B。
同様に以下のページも作っておく。
/blog/2021-07-30.md/blog/2021-07-31.md
3. zola buildする
- 端末で
$SITE_ROOTへ移動する zola buildするpublic/にblog/index.htmlができるpublic/にblog/2021-08-01/index.htmlができる
public/blog/index.html
<html> <body> <h1>ブログ</h1> <ul> <li><a href="https://example.com/blog/2021-08-01">タイトル0801</a></li> <li><a href="https://example.com/blog/2021-07-31">タイトル0731</a></li> <li><a href="https://example.com/blog/2021-07-30">タイトル0730</a></li> </ul> </body> </html>
public/blog/2021-07-30/index.html
<html> <body> <h1>タイトル0730</h1> <p>説明0730</p> <h1>見出しA</h1> <p>本文A。</p> <h1>見出しB</h1> <p>本文B。</p> <a href="https://example.com/blog/2021-07-31">タイトル0731 ›</a> </body> </html>
public/blog/2021-08-01/index.html
<html> <body> <h1>タイトル0731</h1> <p>説明0731</p> <h1>見出しA</h1> <p>本文A。</p> <h1>見出しB</h1> <p>本文B。</p> <a href="https://example.com/blog/2021-07-30">‹ タイトル0730</a> <a href="https://example.com/blog/2021-08-01">タイトル0801 ›</a> </body> </html>
public/blog/2021-08-01/index.html
<html> <body> <h1>タイトル0801</h1> <p>説明0801</p> <h1>見出しA</h1> <p>本文A。</p> <h1>見出しB</h1> <p>本文B。</p> <a href="https://example.com/blog/2021-07-31">‹ タイトル0731</a> </body> </html>
所感
おつかれさま。ここまでできればブログをつくれるはず。
ただ、テンプレートがDRYに書けていないことに気づいただろう。teraにはそれを解決するinclude, macro(import), extendsなどがある。これらについて学習したい。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
- zola 0.14.0
$ uname -a Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux
