やってみる

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

📌 ？
トップ > 静的サイトジェネレータ > zolaで一覧される単一ページを作る（{section}/{page}.md）

zolaで一覧される単一ページを作る（{section}/{page}.md）

静的サイトジェネレータ

　ブログの雛形。

成果物

前提

　あとは一覧される単一ページをつくるだけ。ついでによくある前後記事へのリンクもつくる。

流れ

  1. /blog/page.htmlを追加する
  2. /blog/2021-08-01.mdを追加する

1. /blog/page.htmlを追加する

  1. 端末で$SITE_ROOTへ移動する
  2. templates/blogに移動する
  3. 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する

  1. 端末で$SITE_ROOTへ移動する
  2. zola buildする
  3. public/にblog/index.htmlができる
  4. 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などがある。これらについて学習したい。

対象環境

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