やってみる

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

📌 ？
トップ > 静的サイトジェネレータ > zolaでtemplatesのsectionとpageを書く

zolaでtemplatesのsectionとpageを書く

静的サイトジェネレータ

　これが激ムズ。

成果物

構成

構成

  • templates/
    • about/
      • section.html
      • page.html
    • archive/
      • section.html
      • page.html
    • author/
      • section.html
      • page.html
    • blog/
      • section.html
      • page.html
    • index.html
    • section.html
    • page.html
  • content/
    • about/
      • index.md
    • archive/
      • index.md
    • author/
      • index.md
    • blog/
      • _index.md
      • 20210729100000.md
      • 20210730100000.md
      • 20210731100000.md

学習したこと

ディレクトリ構成

　zola init $SITE_ROOTで新規作成すると以下のようなディレクトリ構成になっている。

ディレクトリ 役割
templates/ HTMLテンプレートを配置する
content/ Markdownを配置する
static/ CSSなど共有ファイルを配置する
themes/ テーマを配置する

　テーマについては今はやらない。

templates/

　HTMLとtera構文を組み合わせてテンプレートを書く。

　予約されているファイル名が3つある。以下のとおり。

ファイル名 URL 役割
index.html {base_url} サイトのトップページ
section.html {base_url}/{section} セクションのトップページ
page.html {base_url}/{section}/{page}/ 末端の記事ページ

　セクションやページについては後述する。

content/

　Markdownファイルを配置する。

　予約されているファイル名はindex.mdと_index.mdの2つ。

　templates/とcontent/の各ファイルにおける対応は以下のとおり。

templates/ content/
index.html (なし), index.md, _index.md
section.html {section}/index.md, {section}/_index.md
page.html {section}/{page}.md

　{section}や{page}は予約名以外の任意名前をつけることができる。

セクション

　content/配下に任意のディレクトリを作るとそれがzolaのセクションになる。このセクションはURLでいうと{base_url}/{セクション}/のようになる。ディレクトリ階層と連動しているため、深く作るほどURLも深くなってゆく。

　{base_url}/{セクション}/にアクセスするとそのセクション・ディレクトリにあるindex.htmlまたは_index.htmlが表示される。両者のちがいについては後述する。

　このセクションはHTMLの<section>タグとは無関係だ。さらにいえばtomlの[セクション]とも別である。同じ名前なだけにややこしい。一般的な名前であるせいでググラビリティも低い。

ページ

　セクション・ディレクトリにindex.md, _index.md以外のファイル名でつくったMarkdownファイルのこと。たとえばhello.mdや2021-07-01.mdなど。contetnt/{section}/hello.mdのようなパスになる。{base_url}/{section}/hello.mdのようなURLでアクセスする。

　ページという語も一般用語なので紛らわしい。現にこの記事でも、zolaの概念におけるページと、HTML文書を意味するページ、どちらの意味でも使われている。なんてややこしんだ。

templates/直下のsection.htmlとpage.htmlは必須だった

　content/_index.mdのフロントマターでtemplate,page_templateを別パスで指定すれば不要だと思っていたが、そうではないらしい。なぜか使っていないのにtemplates/直下のsection.htmlとpage.htmlは必須だった。さもなくばエラーが出る。なんでや！

index.mdと_index.md

　いやいや_index.mdってなんだよ。index.mdじゃダメなの？

　じつはzolaのヤツめが使い分けている。なんてキモチワルイんだ。

ファイル名 場面 例
index.md これはこのセクションのトップページである。このセクションには他のmdファイルがない。 author/index.md, archive/index.md, about/index.md
_index.md これはこのセクションのトップページである。このセクションには他の.mdファイルがある。 blog/_index.md

　つまり、両者はともに{base_url}/{section}/というURLでアクセスするページのことだ。

　ちがいは、そのセクションにおけるページがその1ページのみならindex.mdを使う。他にもページがあるときは_index.mdを使う。それだけ。

　なぜ名前を使い分けねばならないのか。ややこしい。

content/author/index.md

　+++の行で囲まれた範囲はフロントマターである。これで記事ごとにメタデータを指定する。

+++
title = "著者"
#template = "author/section.html"
page_template = "author/page.html"
+++

　ytyaru

# スキル

* C/C++
* C#
* Rust
* Python
* Bash
* HTML/CSS/JavaScript
* XML/JSON/YAML/TOML
* SQL
  • index.mdのときはpage_templateを指定する（templateでなく）
    • section変数が作られておらず{{ section.title }}変数などで参照エラーになる

content/blog/_index.md

　blogセクションの

+++
title = "ブログ"
sort_by = "date"
template = "blog/section.html"
page_template = "blog/page.html"
+++
  • index.mdのときはtemplateとpage_templateを指定する
    • たぶん記事ごとにほかのテンプレートを適用したいときは{section}/{page}.mdのフロントマターにpage_templateで設定すればいいはず（未確認）

content/blog/20210731100000.md

　ページ。末端の記事。

+++
title = "第三の記事タイトル"
description = "第三の記事の説明です。"
date = 2021-07-31T10:00:00
+++

　第三の記事の本文です。

# タイトル

　なんちゃら。

templates/{section}/index.html系

　1セクション1ページのみ。

templates/about/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }} | {{ config.title }}</title>
<meta name="description" content="{{ page.description }}">
<meta name="author" content="{{ config.extra.author }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/mobile.css" type="text/css" media="screen and (max-width: 899px)">
<link rel="stylesheet" href="static/css/pc.css" type="text/css" media="screen and (min-width: 900px)">
<link rel="shortcut icon" href="">
</head>
<body>
</section></article></main>#}
<main><article><h1>{{ page.title }}</h1><p>{{ page.description }}</p>{{ page.content | safe }}</article></main>
<aside><!-- ad --></aside>
<footer>© 2021 {{ config.extra.author }}</footer>
</body>
テンプレ変数 データ取得元
{{ page.title }} content/about/index.mdのフロントマター
{{ config.title }} config.toml

　テンプレ変数page, configはそれぞれの取得元からデータを得る。

　{{ config.extra.author }}はconfig.tomlの[extra]セクションにおけるauthorキーの値を参照するという意味。

　{{ page.content | safe }}はフィルタでデータ加工している。page.contentはcontent/{section}/{page}.mdで書かれたMarkdownをHTMLに変換したテキストである。そしてそのHTMLテキストをsafeフィルタで加工している。フィルタはLinuxコマンドのようなもので、パイプによってデータを加工する。safeフィルタは、テキストをHTMLとして出力する。エスケープ（サニタイズ）されない。

templates/archive/index.html

templates/author/index.html

templates/{section}/_index.html系

　1セクション複数ページ。セクションのトップページはしばしば複数ページへのリンク一覧である。

templates/blog/_index.html

参考