Hexoのテーマを作るのは簡単です。新しいフォルダを作成するだけです。テーマを使用するには、サイトの_config.yml
のtheme
設定を変更してください。テーマには以下の構造が必要です:
. |
_config.yml
テーマ設定ファイル。サイトの全体の設定ファイルと異なり、変更してもサーバーの再起動は必要ありません。
languages
言語フォルダ。詳細については、国際化 (i18n)を参照してください。
layout
レイアウトフォルダ。このフォルダには、ウェブサイトの外観を定義するテーマのテンプレートファイルが含まれます。HexoはデフォルトでNunjucksテンプレートエンジンを提供しますが、EJSやPugなどの他のエンジンをサポートするプラグインも簡単にインストールできます。Hexoは(記事と同様に)テンプレートのファイル拡張子に基づいてテンプレートエンジンを選択します。例:
layout.ejs - EJSを使用 |
詳細は、テンプレートを参照してください。
scripts
スクリプトフォルダ。Hexoは初期化中にこのフォルダ内のすべてのJavaScriptファイルを自動的に読み込みます。詳細は、プラグインを参照してください。
source
ソースフォルダ。アセット(例: CSSやJavaScriptファイル)を配置します。Hexoは隠しファイルや_
(アンダースコア)で始まるファイルやフォルダを無視します。
Hexoは、すべてのレンダリング可能なファイルを処理しpublic
フォルダに保存します。レンダリング不可能なファイルは直接public
フォルダにコピーされます。
公開
テーマを構築したらテーマリストに公開できます。その前に、テーマユニットテストを実行して、すべてが正常に機能することを確認する必要があります。テーマを公開する手順は、ドキュメントの更新と非常に似ています。
hexojs/siteをフォークします。
リポジトリをコンピュータにクローンし、依存関係をインストールします。
git clone https://github.com/<username>/site.git
cd site
npm installテーマ名と同じファイル名で
source/_data/themes/
に新しいyamlファイルを作成します。source/_data/themes/<your-theme-name>.yml
を編集し、テーマを追加します。例:description: A brand new default theme for Hexo.
link: https://github.com/hexojs/hexo-theme-landscape
preview: http://hexo.io/hexo-theme-landscape
tags:
- official
- responsive
- widget
- two_column
- one_columnスクリーンショット(テーマと同じ名前)を
source/themes/screenshots
に追加します。800*500pxのPNGでなければなりません。ブランチをプッシュします。
プルリクエストを作成し、変更を説明します。