テンプレート

テンプレートは、各ページの表示方法を記述することで、ウェブサイトのプレゼンテーションを定義します。以下の表は、使用可能な各ページに対応するテンプレートを示しています。少なくとも、テーマにはindexテンプレートが含まれている必要があります。

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

レイアウト

ページが似た構造を共有する場合（たとえば、2つのテンプレートにヘッダーとフッターの両方がある場合）、layoutを使用してこれらの構造的な類似点を宣言することを検討できます。すべてのレイアウトファイルには、対象のテンプレートの内容を表示するためのbody変数が含まれている必要があります。例：

index.ejs

index

layout.ejs

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

yield

<!doctype html>
<html>
  <body>
    index
  </body>
</html>

デフォルトでは、layoutテンプレートは他のすべてのテンプレートで使用されます。フロントマターで追加のレイアウトを指定したり、falseに設定して無効にすることもできます。さらに上位のレイアウトに複数のレイアウトテンプレートを含めることで、複雑なネスト構造を構築することも可能です。

パーシャル

パーシャルは、テンプレート間でコンポーネントを共有するのに役立ちます。一般的な例としては、ヘッダー、フッター、サイドバーなどがあります。ウェブサイトのメンテナンスを大幅に容易にするために、パーシャルを別々のファイルに配置することをお勧めします。例：

partial/header.ejs

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

index.ejs

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

yield

<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>

yield

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

最適化

テーマが非常に複雑である場合、または生成するファイル数が多すぎる場合、Hexoのファイル生成パフォーマンスが大幅に低下することがあります。テーマを簡素化する以外にも、Hexo 2.7で導入されたフラグメントキャッシングを試すことができます。

この機能はRuby on Railsから借用したものです。これにより、コンテンツがフラグメントとして保存され、追加の要求が行われたときにキャッシュされます。これにより、データベースクエリの数を減らし、ファイル生成を高速化できます。

フラグメントキャッシングは、ヘッダー、フッター、サイドバー、またはテンプレート間で変更される可能性が低いその他の静的コンテンツに最適です。例：

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

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

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

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