テーマフォルダの場所とフォルダ構造
テーマフォルダは次の場所に設置されています。
/site/themes/[your-theme]
基本的なテーマは、次のようなフォルダ構造になります。
| フォルダ | 説明 |
|---|---|
| css/ | テーマ用のCSSを設置。theme CSS tag を使って操作ができます |
| js/ | テーマ用のJSを設置。theme JS tag を使って操作ができます |
| layouts/ | サイト全体に共通するレイアウトを制御するファイルを設置。1つ以上は必ず必要です |
| partials/ | サイト内で再利用するパーツファイルを設置。partial tag を使って操作ができます |
| templates/ | ページを制御するファイルを設置。1つ以上は必ず必要です |
sass/(scss/)やfont/など、これら以外のフォルダも任意に設置できます。
テーマファイルのインストールと切り替え
テーマファイルのインストールはいたってシンプル。テンプレートフォルダをアップして、管理画面（/cp/）で切り替えるだけです。
site/themes/ディレクトリにテーマフォルダを設置- 管理画面のテーマ設定（Theming settings）で有効なテーマを切り替える。
もしくは、setting/theming.yamlファイルのthemeの値を直接変更してもOK。 - ブラウザをリフレッシュ
取り決め
テーマの作成にはいくつかの取り決め（ルール）があります。
CSSとJavaScript
- CSSとJSファイルはそれぞれ
css/,js/フォルダに入れます css/,js/フォルダはルート直下に設置されることが望ましい- これらのフォルダはコンパイルされたり生成されたファイルを設置しても問題ありません
Primary CSS
- メインとなるCSSのファイル名は、テーマの名前と同じものを指定する。
（テーマ名が「quidam」でquidam/フォルダにある場合、メインとなるCSSファイルは/site/themes/quidam/css/quidam.cssとなります）
Primary JavaScript
- メインとなるJSのファイル名も、CSS同様テーマと同じ名前を指定する。
（テーマ名が「quidam」でquidam/フォルダにある場合、メインとなるJSファイルは/site/themes/quidam/js/quidam.jsとなります）
※Primary CSSもPrimary JavaScriptも必須ではありません。ただこのように設定しておくと、theme CSS tagやtheme JS tagを使って、テンプレートでの操作がしやすくなります。
# Template
<link rel="stylesheet" href="{{ theme:css }}">
<script src="{{ theme:js }}"></script>
次のように出力されます。
# html
<link rel="stylesheet" href="/site/themes/quidam/css/quidam.css">
<script src="/site/themes/quidam/js/quidam.js"></script>
インクルードファイル
- 「サイト内で再利用する小さなコードスニペット」（呼ばれ方は
includes,embeds,partials,snipplrsと様々）は、statamicにおいてはすべてpartialsと呼びます
Layouts
- 全てのページで共通して使うHTMLコード（
doctype,<head>,<body>, styles & scripts...）を記述したファイルがLayoutsファイルです - デフォルトでは、
layouts/default.htmlと命名されたファイルが参照されるので、まずはこのファイル名で設置します - Layoutsファイルが複数必要な場合は、任意のファイル名を付けて設置します
- 一般的なサイトではメインのLayoutsと、RSSフィード用のLayoutsの2種類で構成されることが多い
Layoutsファイル内でTemplatesファイルを読み込む
Templateファイル（を通して表示されるコンテンツ）を表示させたい場所に{{ template_content }}タグを挿入することで、コンテンツが表示されます。
# Template (Layouts)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
{{ template_content }} // ここにコンテンツが表示される
</body>
</html>
※Layoutsファイルには、{{ template_content }}以外の表示セクションを追加することもできます。Yielding Additional Sections in Layouts
ページに対してLayoutsを指定する
ページファイル（.mdファイル）内の'front-matter'で、ページが使うLayoutsファイルを指定します。
※'front-matter'とは、markdownのヘッダにYAML書式で記述するメタ情報のこと。
# 例）`default`レイアウト以外の`landing-page.html`を使って表示したい場合
# front-matter in .md
---
title: お得情報満載！
layout: landing-page
---
ページコンテンツ...
フォルダに対してLayoutsを指定する
特定のフォルダに対して個別のLayoutsを指定する場合は、そのフォルダにfolder.yamlを作り、その中で指定する。
# YAML in folder.yaml
layout: landing-page
※フォルダに対する指定は、上述のページに対する指定で上書きすることができます。
Templates
- Templatesファイルは、ページタイプ別の枠を編成し、その中でどのようにコンテンツを表示させるかを制御するファイル。
- 位置づけとしては、Layouts と Page/Content の間に位置する。Layoutsはサイトの外枠でページごとに変わったりはしない。一方 Templatesは内枠で、ページに対しどのようにコンテンツを表示するかを指定する。
- Layoutsファイルにおいて
{{ template_content }}タグが指定された場所に、Templatesファイルで指定されたようにコンテンツが表示されます。 - デフォルトでは、
templates/default.htmlと命名されたファイルが参照されるので、まずはこのファイル名で設置します
一般的なブログのTemplatesファイルのパターン例
ページの表示パターンの数分、Templateファイルを作成するので、一般的なブログの場合は次のような4つ程度のTemplatesファイルで構成されます。
- グランドトップ（home）用
- ブログの詳細（記事）ページ用
- カテゴリートップ（記事一覧）用
- 静的ページ用
ページやフォルダに対してTemplatesを指定する
- ページやフォルダに対してTemplatesを指定する方法はLayoutsの指定方法と同様です。
- サブフォルダを作ってファイルを整理することもできます。
# 例）templates/blog/ にテンプレートindex.htmlを置いた場合
# front-matter in .md
---
title: ブログのトップページ
template: blog/index
---
ページコンテンツ...
Layoutsに{{ template_content }}以外のセクションを追加する
【ページ固有のJavaScriptを設置する】場合や【<head>内のmetaをページ単位で設置する】場合のように、標準の{{ template_content }}以外の場所に表示セクションを追加する方法です。
# ページ固有のJSを表示させる枠を用意する
# Template (Layouts)
コンテンツ...
{{ yield:javascript }}
</body>
# このテンプレートでのみ使うJSを記述する
# Template (Templates)
コンテンツ...
{{ section:javascript }}
<script>
...
</script>
{{ /section:javascript }}
