記事の前提
前回の入門①では、最初のセットアップからGitHubとの連携までを扱いました。 ここからは、実装を行なっていくために必要な知識として、テンプレートについて学びます。
GitベースでMovableType.netのテンプレート編集を行う際には、管理ページ上のテンプレートがGitとどのように連動するか理解する必要があります。
（以下の情報はMT.net公式のテーマをベースに書かれているため、サードパーティテーマではこの限りではありません）
Gitベースで管理する上で必須の情報と言えますが、MovableType.netの公式マニュアルには記載のない範囲もあり、まとめを作成しました。
本題
1. テンプレートの種類
MT.netのテンプレートには以下の4種類が存在します。
| 名称 | 概要 |
|---|---|
| インデックス・テンプレート |
index.htmlやstyles.cssなどのように、1テンプレート＝1ファイルとなる |
| アーカイブ・テンプレート | ブログ記事や下層ページ、記事一覧ページ（カテゴリ別・投稿者別・月別など）のように1テンプレートから複数ファイルが出力される |
| テンプレート・モジュール | ヘッダーやフッター、メタ情報、configのように、パーツとして出力される |
| システムテンプレート | エディタCSSや404ページなど、システムが使用するファイルが出力される |
2. ファイル名の法則
また、MTタグが使用されるファイルの形式はすべて.mtml拡張子となります。
例：メインページ（index.html）の場合
| 概要 | ファイル名 |
|---|---|
| 最終的にデプロイされるページ | index.html |
| テンプレートのファイル名 | index.html.mtml |
| テンプレートに紐づくかんたんデザイン編集設定パネル | index_settings.mtml |
3. 格納場所
テンプレートファイルの格納場所は基本./_theme/templatesとなり、./_theme/templatesの中でどのようにフォルダ分けするかで、実際のWebサイトでのpathが決まります。
MTが用意しているテーマで使用されている主要なフォルダ名は以下の通りです：
- 記事一覧：
archive-
./_theme/templates/archive/index.htmlはhttps://ドメイン名/archive/となる
-
- アセット：
assets- cssは
assets/cssに配置される
- cssは
なお、アーカイブ・テンプレートもテンプレート・モジュールも、システムテンプレートに至るまで全て同じ./_theme/templatesに格納されているため、フォルダ内を一瞥するだけではどれがどのタイプか判別することは難しいです。
そのため、page.mtmlとpage_item.mtmlという似たファイル名でも、片方はアーカイブ・テンプレート、片方はテンプレート・モジュール、といったことがあり得ます。
※インデックス・テンプレートは拡張子が二重に付いている（例：index.html.mtml）ため唯一ファイル名で見分けがつきます。
4. 新たなテンプレートを作成する場合のワークフロー
GitHub連携をする上で、落とし穴になりそうな点として./_theme/theme.yamlの存在があります。
テンプレートのファイルは、単に.mtmlファイルを作成するだけではMT.netのサイト上に正しく反映されません。なぜなら、ファイル名称やそのテンプレートの種類などは、./_theme/theme.yamlにて管理されているためです。
例えば、管理画面上で「パンくずリスト」となっているモジュール・テンプレートの場合、
-
./_theme/templates/breadcrumbs.mtmlが「パンくずリスト」に対応 - しかし
breadcrumbs.mtml内にはそれが「パンくずリスト」であるという情報はない - これが「パンくずリスト」でありモジュール・テンプレートであることを保証しているのは、
./_theme/theme.yamlのみ
以上のようになります。
そのため、以下の点に留意しつつテンプレートを作成する必要があります。
① 編集画面からtheme.yamlをエクスポートする場合
- 「デザイン＞テンプレート」でテンプレートを作成する
- 「名前」はアルファベットで入力する ※日本語を含む名前をつけると、日本語を省いたファイル名となってしまう（テスト1 →
1.mtml）
- 「名前」はアルファベットで入力する ※日本語を含む名前をつけると、日本語を省いたファイル名となってしまう（テスト1 →
- かんたんデザイン編集の「設定パネル」も使用したい場合は、なんでも良いので「設定パネル」欄に適当に文字を入力しておく
- 入力しておかないと
名前_settings.mtmlが生成されない
- 入力しておかないと
- 「デザイン＞テーマ」に移動し、右上の「書き出す」を選択してエクスポート画面に移動する
- 出力ファイル名・バージョンを入力して書き出す
- 出力ファイル名・バージョンは、theme.yaml内のid・label・descriptionに適用されてしまうため注意
- 書き出されたファイルをローカルのフォルダに上書きしてcommit・pushすることでGitとMT.netの状態が揃う
② ローカル環境で直接theme.yamlなどを操作する場合
-
_theme/templates内に***.mtmlファイルを作成する- かんたんデザイン編集の設定パネルも使用する場合
***_settings.mtmlも作成する
- かんたんデザイン編集の設定パネルも使用する場合
-
theme.yamlのelements:template_set:data:templates:の中の以下の場所に、テンプレートの種類に応じて必要事項を記述する
| テンプレートの種類 | 記述する場所 |
|---|---|
| インデックス・テンプレート | index: |
| アーカイブ・テンプレートかつアーカイブタイプ：カテゴリ | archive: |
| アーカイブ・テンプレートかつアーカイブタイプ：記事 | individual: |
| アーカイブ・テンプレートかつアーカイブタイプ：ウェブページ | page: |
| テンプレート・モジュール | module: |
| システム・テンプレート | system: |
index:
main_index: # サイトトップページならmain_index、下層なら`フォルダ名_index
filename: index.html.mtml #.htmlを忘れずに
label: "メインページ" # MT.net上の「名前」を日本語/英語表記にしたい場合はここを書き換える
outfile: index.html #デプロイされるファイル
rebuild_me: 1 # インデックス・テンプレートを再構築するとき、このテンプレートも再構築するオプション、基本1（オン）を指定
settings: index_settings.mtml # 設定ファイルはここで指定
individual:
entry:
filename: entry.mtml
label: "記事"
mappings:
individual:
archive_type: Individual # アーカイブタイプによって変わり、カテゴリ→Category、記事→Individual、ウェブページ→Page
file_template: "%y/%m/%-b/%i" # ファイルの出力先パスの指定
preferred: 1 # 同じアーカイブタイプのテンプレートが複数存在する場合、優先するテンプレートに1（優先する）を指定
file_templateの書き方はアーカイブマッピングで利用するアーカイブファイル名の定義 を参照ください。
module:
header:
filename: header.mtml
label: "名前"
settings: `header_settings.mtml
system:
editor_css:
filename: editor_css.mtml
label: "エディタCSS"
- 完了したらcommit・pushすることでMT.netにファイルを反映する
※yamlフォーマットのより詳細な情報は、MovableType.netではありませんが、Movable Type 4 マニュアルに載っています。
theme.yamlはテンプレート以外にもカスタムブロックやカスタムフィールドなど、様々な機能に関わるものが記載されているため、可読性が高くはなく、かつ編集を誤った時の影響範囲が大きいです。
そのため手間ではありますが、正しい形式でtheme.yamlなどを作成できているか自信を持てない場合は、①の手法で作成する方が良いと思います。
最後に
今回はMT.netのテンプレートファイル名と関連性について扱いました。
また次の記事として『かんたんデザイン編集を理解する』①〜④を書きました。
まだまだ学習しながらのまとめのため、誤読などもあるかもしれません。
ぜひコメント頂けると嬉しいです！
Discussion