これが激ムズ。
成果物
構成
構成
- 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
- about/
- content/
- about/
- index.md
- archive/
- index.md
- author/
- index.md
- blog/
- _index.md
- 20210729100000.md
- 20210730100000.md
- 20210731100000.md
- about/
学習したこと
ディレクトリ構成
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セクション複数ページ。セクションのトップページはしばしば複数ページへのリンク一覧である。
