　zolaは特定のディレクトリ名やファイル名に役割が与えられている。これを知ることで、どのようにサイトを作ればよいか理解しやすくなる。

前提

　環境構築からHelloWorldまで終わった。

　今回からは自由にサイトを作るための学習になる。まずはzolaサイトの構成について。

構成

　zola init $SITE_ROOTすると以下のようなディレクトリ・ファイル一式が出力される。

`$SITE_ROOT/
- themes/
- sass/
- static/
- templates/
- content/
- config.toml

　さらにzola buildするとpublic/ディレクトリが作成される。

`$SITE_ROOT/
- public/

　それぞれの役割についてまとめた。

Dir/File	役割
`public/`	成果物。`zola build`により以下ディレクトリ・ファイル一式から作成された静的HTMLファイルを出力する。これをHTTPレンタルサーバにアップロードすればサイトが公開される。
`themes/`	第三者製テンプレ。以下ディレクトリ・ファイル一式を`theme`という単位でまとめたもの。githubにリポジトリとしてアップロードする。それをこのディレクトリに`git clone`する。最後に`config.toml`で`theme = "{リポジトリ・ディレクトリ名}"`すると反映される。
`sass/`	CSS拡張スタイルシート言語。`.sass`,`.scss`。CSSの`@import`だと遅くなるため事前にビルドして高速化する。
`static/`	共通ファイルを入れる。CCSや画像など。
`templates/`	HTMLとteraを組み合わせて書いたテンプレートを配置する。
`content/`	Markdownとフロントマターで書いた記事を配置する。
`config.toml`	設定ファイル。

　多すぎる。少しずつみていこう。

最小

　最低限必要なのは以下。

content/
templates/index.html
config.toml

　トップページindex.htmlが表示される。ここまでは前提ですでに完了した。

　ここからページを追加していこう。各ディレクトリに以下ファイルを含める。そうしてコンテンツを増やしていく。

ディレクトリ	拡張子
`templates/`	`html`
`content/`	`md`

ページとセクション

　zolaにはページ(page)とセクション(section)という概念がある。

概念	テンプレ変数名	役割
ページ	`page`	末端ページ用テンプレート
セクション	`section`	末端ページ一覧用テンプレート

　たとえばブログをつくるとき、1つの記事だけを表示するページが基本になるだろう。それがpageだ。

　記事を一覧するページもほしいだろう。それがsectionだ。

　サイトは大抵そういった構造である。よってzolaではそれらを便宜上、pageとsectionとして区別している。

　つぎのようなファイル構成になる。

content/{section}/{page}.md

　つぎのようなURLで参照する。

URL	役割
`{base_url}/{section}`	セクション（一覧）
`{base_url}/{section}/{page}.html`	ページ（末端）

テンプレートを書かねばならない

　ページとセクションは、それぞれtemplates/でHTMLとteraをつかって書かねばならない。

　たとえば一覧ページを作りたいなら{{ section.pages }}というzola専用のtera変数を使う。それを{% for page in section.pages %}のようにループするよう指示する。

<ul>
{% for page in section.pages %}
<li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
{% endfor %}
</ul>

　{{}}で囲われた変数は、自動で作られるものもあれば、自分で設定するものもある。たとえば{{ page.title }}はcontent/{section}/{page}.mdのフロントマターtitle = "タイトルA"で設定した値タイトルAが出力される。

　テンプレート構文の詳細については、まだ掘り下げない。とてつもなく大変だと予感していることだろう。そのとおり。ひとまず今は、こんなふうに「HTMLとteraを組み合わせてテンプレートを書かねばならない」ということだけを理解すればよい。

`content/`と`templates/`

　トップ、セクション、ページの3つは、それぞれどのファイルからつくられるのか。

ページ種別	`templates/`	`content/`
トップページ	`index.html`	-
section	`section.html`	`[_]index.md`
page	`page.html`	`*.md`

トップページはindex.htmlという名前にせねばならない
トップページはHTMLとteraで書かねばならない

　トップページはMarkdownで書けない。それは当然だ。ふつうトップページは唯一無二である。テンプレートで類似ページを量産するわけではない。よってトップページはHTMLとteraで書く。

　すべての組み合わせは以下のとおり。

`content/`	`templates/`	URL
-	`index.html`	`{base_url}`
`{page}.md`	`page.html`	`{base_url}/{page}`
`{section}/_index.md`	`section.html`	`{base_url}/{section}`
`{section}/index.md`	`page.html`	`{base_url}/{section}`
`{section}/{page}.md`	`page.html`	`{base_url}/{section}/{page}`

　{section}/ディレクトリがあっても単一ページindex.mdなら、page.htmlテンプレートを参照する。むしろ特殊なのは_index.mdだ。

　_index.mdのときだけsection.htmlを参照する。これは一覧ページを作るためのテンプレートである。zola固有tera変数である{{ section }}が使える。先述したとおり{{ section.pages }}とすることで記事の一覧データを取得できる。

　セクションやページはHTMLとteraでテンプレートを書き、Markdownで内容を書く。

{section}/ディレクトリがあり単一ページならindex.mdという名前にせねばならない
{section}/ディレクトリがあり複数ページあれば_index.mdという名前にせねばならない
{section}/_index.mdのテンプレートはsection.htmlである
{section}/index.mdのテンプレートはpage.htmlである
{section}/{page}.mdのテンプレートはpage.htmlである

　別のテンプレートを使うにはフロントマターで指定する。

セクションごとに別のテンプレートを指定したいときは[_]?index.mdのフロントマターでtemplate = "{パス}"する
セクション配下のページにデフォルトのテンプレートを指定したいときは[_]?index.mdのフロントマターでpage_template = "{パス}"する
ページごとに別のテンプレートを指定したいときは{page}.mdのフロントマターでtemplate = "{パス}"する

　以上。つぎは実際に作ってみよう。

対象環境

2021-08-01
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

前提

構成

最小

ページとセクション

テンプレートを書かねばならない

content/とtemplates/

対象環境

`content/`と`templates/`