テンプレート

テンプレートは、ウェブサイトの外観の構造を定義します。つまり、各ページがどのように表示されるべきか記述します。下記の表は、利用可能な各ページに対応するテンプレートを示しています。最低限、テーマにはindexテンプレートが必要です。

テンプレート	ページ	フォールバック
`index`	ホームページ
`post`	記事	`index`
`page`	ページ	`index`
`archive`	アーカイブ	`index`
`category`	カテゴリーアーカイブ	`archive`
`tag`	タグアーカイブ	`archive`

レイアウト

ページが似通った構造を持つ場合（例えば、二つのテンプレートがヘッダーとフッターを持つ場合）、これらの構造上の類似性を宣言するためにlayoutを使用できます。すべてのレイアウトファイルには、該当するテンプレートの内容を表示するためのbody変数が必要です。例えば:

index.ejs

index

layout.ejs

<!DOCTYPE html>
<html>
  <body><%- body %></body>
</html>

は次のようになります:

<!DOCTYPE html>
<html>
  <body>index</body>
</html>

デフォルトでは、layoutテンプレートが他のすべてのテンプレートより使用されます。Front Matterで他のレイアウトを設定したり、falseに設定無効することができます。トップレイアウトにさらに多くのレイアウトテンプレートを含めることで、複雑なネスト構造を構築することも可能です。

パーシャル

パーシャルを利用し、テンプレート間でコンポーネントを共有できます。典型的な例には、ヘッダー、フッター、サイドバーなどがあります。メンテナンスを便利にするために、パーシャルを別のファイルに置くことができます。例えば:

partial/header.ejs

<h1 id="logo"><%= config.title %></h1>

index.ejs

<%- partial('partial/header') %>
<div id="content">Home page</div>

は次のようになります:

<h1 id="logo">My Site</h1>
<div id="content">Home page</div>

ローカル変数

テンプレート内でローカル変数を定義し、他のテンプレートから利用できます。

partial/header.ejs

<h1 id="logo"><%= title %></h1>

index.ejs

<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home page</div>

は次のようになります:

<h1 id="logo">Hello World</h1>
<div id="content">Home page</div>

最適化

テーマが極端に複雑であるか、生成するファイルの数が非常に多い場合、Hexoのファイル生成の速度が大幅に低下することがあります。テーマを単純化する以外に、Fragment Cachingを試すことができます。これはHexo 2.7で導入されました。

この機能はRuby on Railsを参考にしています。コンテンツをフラグメントとして保存し、後で使われる時のためにキャッシュします。これにより、データベースクエリの回数を減らし、ファイル生成をスピードアップします。

Fragment cachingは、テンプレート間で変わらないと予想される、ヘッダー、フッター、サイドバー、その他の静的コンテンツに最適です。例えば:

<%- fragment_cache('header', function(){
  return '<header></header>';
});

パーシャルを使用する方が簡単かもしれません:

<%- partial('header', {}, {cache: true});

fragment_cache()はレンダリング結果をキャッシュし、他のページにキャッシュされた結果を出力します。これは、異なるページ間で変更されることがないと予想されるパーシャルにのみ使用されるべきです。そうでなければ、有効にすべきではありません。
例えば、config内でrelative_linkが有効になっている場合は無効にすべきです。これは、相対リンクがページ間で異なるように見える可能性があるためです。