zolaは特定のディレクトリ名やファイル名に役割が与えられている。これを知ることで、どのようにサイトを作ればよいか理解しやすくなる。
前提
- Zola 0.14.0 をビルドする（静的サイトジェネレータ）
- zolaを使ってサイトを構築してみる（zola init）
- Zolaのconfig.tomlを設定する
- Zola template/index.html を書く
環境構築から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.htmlconfig.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 = "{パス}"する
以上。つぎは実際に作ってみよう。
対象環境
- 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
