Hexoテーマのカスタマイズ

Hexoで希望するテーマを選択しても、修正したい部分が出てくることがあります。テーマがYAMLベースの設定を提供しているとはいえ、さらに詳細な部分まで自分の思い通りに変更したい場合は、テーマコードを直接修正する必要があります。私がHexoインストール型ブログを始めた際に選んだIcarusテーマは、大きく2つのタイプのコードに分かれていました。

• .styl: BulmaをベースとしたCSS設定が含まれています。
• .jsx: .mdで作成された記事をページにどのようにレンダリングするかを定義しています。

.stylファイルのカスタマイズ

幅、高さ、フォントサイズ、色などの設定は.stylコードで調整します。ブラウザでページの各要素のCSS設定を分析し、該当する設定があれば値を修正し、なければBulmaの設定がそのまま適用されるため、オーバーライドのために希望の設定を追加します。

.jsxファイルのカスタマイズ

記事やウィジェットをページにレンダリングする部分は.jsxコードで設定します。画面にどのようにレンダリングされるか、修正したコードが正しく動作するかを知るためにはデバッグが必要です。Hexoブログの運営はVSCodeで行っているため、VSCodeでHexoをデバッグしています。

デバッグ設定

VSCodeのデバッグ設定は、デバッグウィンドウのRUN右側にあるデバッグリストの「Add Configuration…」を通じて行うことができます。

「Add Configuration…」を選択すると、現在のプロジェクトディレクトリに.vscodeディレクトリと、その中にlaunch.jsonファイルが作成され、そのファイルに移動して、以下のように追加する設定のリストが表示されます。

リストから「Node.js: Launch Program」を選択すると、設定が1つ追加されます。

以下のように修正して入力します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Hexo Debugging",
            "program": "${workspaceFolder}/node_modules/hexo-cli/bin/hexo",
            "args": [
                "server"
            ]
        }
    ]
}

これはローカルで実行されるhexo serverのデバッグであるため、ターゲットプログラムはhexo-cliのbin/hexoであり、argsにserverが含まれていることがわかります。これでデバッグをしながら、自分だけのカスタムテーマを楽しく作成できます。さらに、そうして作成した自分だけのテーマを他の人と共有したり、既存のテーマにGitコントリビューターとして拡張機能を追加することも可能になるでしょう。

• https://gary5496.github.io/2018/03/nodejs-debugging/
• https://stackoverflow.com/questions/57125171/how-to-debug-inspect-hexo-blog