テーマの概要

🎢

ここでは、NKSSG におけるテーマの役割や構成などを見ていきます。

テーマとは

NKSSG には、サイトの見た目や構造などを変えることができる、テーマという機能があります。

テーマの中には、次のようなものが入っています。

• サイトの見た目に関するもの（CSS）
• サイトの構成に関するもの（HTML のテンプレート）
• サイトで使う画像などの静的ファイル
• 新規記事ファイルのひな型

デフォルトでは、defaultテーマが有効になっています。そのため、特に何も設定しなくても、サイトを作成することができます。

テーマの設定

どのテーマを使うかは、nkssg.yml 内で設定します。デフォルトでは次のようになっているはずです。

theme:
  name: default
  child: child

これは、defaultテーマが有効になっていて、childという子テーマが有効になっている、という設定です。themes フォルダある2つのフォルダが、それぞれ対応しています。

自分で一からテーマを作って適用したい場合は、nameのところに好きな名前を入れましょう。そして、themes フォルダ直下にその名前のフォルダを作り、テーマに必要なファイルを置きましょう。

テーマの編集方法

defaultテーマには、すでにいろいろな設定を行ったファイルがたくさんあります。これを直接編集してカスタマイズすることもできます。しかし、childに修正したいファイルをコピーし、編集することをおススメします。

childとdefaultに同じパスのテンプレートファイルがあれば、子テーマのほうが優先されます。そのため、childにコピーしてから編集すれば、元のファイルをそのままにした状態で、好きに修正することができます。

何かうまくいかなくなったときにはchildのファイルを捨てればすみますし、もとの設定がどうだったか知りたくなったときにはdefaultフォルダ内を見に行けばいいので、このような運用方法にしたほうがいいでしょう。

テーマ内のファイルの役割

テーマには、いろいろな役割のファイルがあります。default テーマを参考にしながら、各ファイルの役割を見ていきます。

各ページ作成用のテンプレート

まず、テーマには、public フォルダにファイルを出力するときに使用するテンプレートファイルが必要です。default テーマには次のようなテンプレートファイルが含まれています。

• base.html
  • すべてのページの基本となるテンプレート
• main.html
  • base.html を拡張するためのテンプレート
  • テーマには必ず必要
• single.html
  • 個別ページで使うテンプレート
• archive.html
  • アーカイブページで使うテンプレート
• archive-section.html
  • セクションアーカイブページで使うテンプレート

これらは、最終的な記事の構成を決める、重要なファイルです。

テンプレート作成を助けるためのファイル

先ほど挙げたものは、おおまかな構成のみが入っており、次のような部品化したものを取り込んでいます。

• import フォルダ下のファイル
  • macroをまとめたもの
• partials フォルダ下のファイル
  • テンプレートで繰り返し使うパーツ

macroとは、処理をまとめたもので、Jinja2 の機能の1つです。今後、テンプレートを作る際に、詳しく見ていきます。

テーマによっては、これらのファイルはなくてもかまいません。

その他ページ用のテンプレート

nkssg build を行ったときには、個別記事やアーカイブ記事以外にも、いくつかのファイルが作成されます。これらの特別なページ用のテンプレートもあります。

• home.html
• 404.html
• sitemap.html
• sitemap.xml

これらはなくてもエラーにはなりません。

静的ファイル

ここまでは HTMLファイルがほとんどでしたが、CSS や画像ファイルもテーマに含まれています。

• style.css
• imgフォルダの下にあるファイル

コマンド実行時のファイル

public フォルダ下に作られるファイルではなく、コマンドを実行するときに使われるファイルもあります。

• new下のファイル
  • 新規記事の作成時（new コマンド）に使うひな型
• draft.html
  • draft コマンドで使うひな形

new コマンドや draft コマンドを使わないなら、これらのファイルはなくてもかまいません。

テーマの設定ファイル

NKSSG の設定には nkssg.yml ファイルを使いますが、テーマ自体にも何か設定をしたい場合があります。そのために、テーマの設定ファイルがあります。

テーマの設定ファイルは、「テーマ名.yml」です。default テーマなら、default.yml がテーマの設定ファイルです。

次は何をする？

ここまでで、テーマの設定方法や、テーマで使うファイルの役割を見てきました。

次は、まず、default テーマの中身を見てみるのがいいでしょう。具体的に、どのようにテンプレートファイルを作っているのかを見ると、カスタマイズするときに役立つはずです。

もう少し詳しく知りたい場合は、テーマで使えるものを見るようにしましょう。TODO