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でなければなりません。ブランチをプッシュします。
プルリクエストを作成し、変更を説明します。