ここでは、テーマディレクトリをquidam/とし、テーマ用の初期ディレクトリを作成していきます。
初期ディレクトリを作る
site/themes/配下にオリジナルのテーマディレクトリquidam/を作成。- その下に規定のフォルダ群を作成。
- 任意に欲しいフォルダ、
_scss/,fonts/,img/を追加。
まずはこのような構成です。
テーマのマークアップに備えて、SASSのコンパイル設定（CSSの出力先ディレクトリの指定）やフォントファイルへのパス指定など、Statamicのテーマディレクトリ構造に合わせて設定をしておきます。
CSSやJSファイルへのパス
CSSやJSファイルへのパスを指定する方法として、theme CSS tag/theme JS tagを使う方法のほか、通常通りハードコーディングしてもパスは通ります。ここでは、theme CSS tag と theme JS tag を使う方法を記載します。
theme CSS tag / theme JS tag を使う場合、次のルールが適用されます。
{{ theme:css }}/{{ theme:js }}でテーマ名を付けたPrimary CSS/JS fileへのパスが出力される- Primary CSS/JS file 以外へのパスは、
src属性でCSS/JSディレクトリからの相対パスでファイル名（拡張子不要）を指定することで参照が可能
テンプレートと出力は次のようになります。
# Template
# Primary CSS/JS へのパス
<link rel="stylesheet" href="{{ theme:css }}">
<script src="{{ theme:js }}"></script>
↓ 出力
<link rel="stylesheet" href="/site/themes/quidam/css/quidam.css">
<script src="/site/themes/quidam/js/quidam.js"></script>
Primary以外のファイルの場合
# Template
# Primary以外の CSS/JS へのパス
<link rel="stylesheet" href="{{ theme:css src='site' }}">
<script src="{{ theme:js src='site' }}"></script>
↓ 出力
<link rel="stylesheet" href="/site/themes/quidam/css/site.css">
<script src="/site/themes/quidam/js/site.js"></script>
- Primary fileとは？
- Primary CSS/JS file については Statamicのテーマ構造で説明していますので、そちらを参照してください。
画像への参照パス
CSSやJSと同様に、テーマで使用する画像にパスを通す際はtheme Assets tagを使います。theme Asset tag には「ショートハンド記法」が用意されているので、多くの場合はこのショートハンド記法を使用することになると思います。
通常の記法（画像の格納フォルダがimg/ではない場合）
画像の格納フォルダがimg/ではない場合、ショートハンド記法が使えないので通常の記法{{ theme:asset }}で書きます。{{ theme:asset }}でファイルを指定する場合は、src=""属性にテーマディレクトリを基点とする完全なパス（画像格納フォルダ名を含むパス）を記述する必要があります。
# Template
<img src="{{ theme:asset src='images/logo.png' }}">
↓出力
<img src="/site/themes/quidam/images/logo.png">
ショートハンド記法（画像の格納フォルダがimg/の場合）
画像の格納フォルダをimg/としておくとショートハンド記法{{ theme:img }}を使うことができます。ショートハンド記法{{ theme:img }}でファイルを指定する場合は、画像の格納フォルダimg/を省略することができるので、より少ない記述で済みます。
# Template
<img src="{{ theme:img src='logo.png' }}">
↓出力
<img src="/site/themes/quidam/img/logo.png">
上記の決まり事を踏まえて、テーマの作成に最低限必要なデフォルトのLayoutsファイルとTemplatesファイルを作成していきます。
メインのLayoutsファイルを作成
テーマの大枠となるメインのLayoutsファイル（quidam/layouts/default.html）を作成し、必要なコード（DOCTYPE,<head>,<body>など）を挿入します。次は初期状態のコード例です。
#Template (layouts/default.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
<meta name="description" content="">
<meta name="keyword" content="">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="{{ theme:css }}">
</head>
...
<body>要素内のメインコンテンツエリアには、とりあえずテンプレートを呼び出すコード{{ template_content }}を入れておきます。
<body>
<div class="l-wrapper">
<div class="l-main">
{{ template_content }}
</div>
<div class="l-side">
...
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="{{ theme:js }}"></script>
</body>
</html>
これで、初期状態のlayouts/default.htmlは完成です。
デフォルトのTemplatesファイルを作成
次に、特に指定をしない場合に標準的に使用されるデフォルトのTemplatesファイル（quidam/templates/default.html）を作成します。ページやコレクション（ブログの記事）でTemplatesファイルを特定しない場合に、このデフォルトのTemplatesファイルが使用されます。
このTemplatesファイルは、上記Layoutsファイルで{{ template_content }}と指定された部位に挿入されます。その仕様を前提に、サイトのデザインに合わせたHTMLをマークアップします。
Templatesファイルは多くの場合、管理画面で登録したコンテンツを表示させるために使われるので、管理画面で登録したコンテンツを表示させるためのタグ{{ content }}を挿入しておきます。
※この{{ content }}は、管理画面の入力欄に設定した「Handle」名と紐づいています。Markdown形式で登録する記事本文の入力欄に「content」というHandle名を指定した場合、テンプレートのタグ{{ content }}に登録内容が反映される仕組みです。（なのでここは、必ずしも{{ content }}ではないので注意してください。）
# Template (templates/default.html)
...
{{ content }}
...
Statamicの初期コンテンツを使っている場合
Statamicのパッケージをダウンロードしてきた状態のままテーマを切り替える場合は、既存のコンテンツデータによって使用するTemplatesファイルが指定されているため注意が必要です。
まずはサイトのトップページが表示されるようにする
既存のコンテンツファイルのうち、トップページに該当するファイルがsite/content/pages/index.mdです。このファイルのfront-matterにおいて、使用するTemplatesファイルとして「home」が指定されているため、site/themes/quidam/templates/home.htmlを作成しないといけません。
# contentファイル（既存のトップページ）のfront-matter
# site/content/pages/index.md
---
title: Home
template: home
---
...
このように、コンテンツファイルによってtemplateが指定されている場合は、指定されたTemplatesファイルが必要になります。この場合は、トップページの表示用としてtemplates/home.htmlを作成することで、トップページが表示されるようになります。
管理画面からテーマを切り替える
最低限必要なLayoutsファイルとTemplatesファイルの用意ができたら、管理画面からテーマを切り替えます。
【ログイン＞Settings＞Theming】
ブラウザでサイトにアクセスすると、テーマが切り替わっていることが確認できます。
ここまでで、LayoutsとTemplatesとコンテンツファイルの関係性が概ね把握できたのではないでしょうか。あとは、既存のコンテンツを使いながら、Tempalatesを作り上げて行きます。
