Hexo 内部探訪 (1) はじめに

Hexoを選択した理由は、Node.jsだから、Javascriptだから、つまりいろいろと、自身で内部構造を含めて手を加えるため。
それは使い始めるとすぐに現実になり、早速プラグインを作成したりもした。(参照 hexo-tag-google-photos-album 公開しました

だんだんとHexoの内部構造やAPIについて理解をしはじめたところです。しかしながら開発においてはまだまだ、暗中模索です。

特に、記事やブログのメタデータや状態などを処理の過程で参照しようと思った時と、jsやcssの挿入(インジェクション)が、掴みにくいポイントだと思う。

インジェクションの方法

はじめにhexo-injectを見つけた時、これでかなり楽ができそうだなと思いました。
しかし実際に使おうと思い、試してみるのですが、思い通りに動かすことができませんでした。

This package has been deprecated
Author message:

The author does not use Hexo any more. This plugin is no longer maintained.

とのことで、現段階ではコレに頼るのは諦めました。
なお、元作者以外のメンテナの動きがあるようなので、少し期待しつつ成り行きを見守っています。

で、他のプラグインを(少しだけ)調査したのですが、インジェクションにはまだ定説というかベスト・プラクティスが確立しているようには見えませんでした。
いくつかアプローチがあるものの、私の望む動作とは少し違っているようです。
それというのも、Hexoのプラグイン機構の動作と、うまくマッチしていないように思いました。

postもしくはpageの中で、1回だけ呼び出す限りにおいては、いくつかの手法で(私の実装でも)問題なく動いています。

同じくpostもしくはpageの中で、複数回同じプラグイン(この場合はTagプラグインを想定)が呼び出されたときにどうなるかというと、私の手法ではマズイ部分があります。

探してみると、ランダムな文字列をうまく使って、重複したインジェクションの問題を回避しているプラグインがあることがわかりました。
それはそれで良いのですが、私の目的では、単に同一html文書内ではインジェクションが1回だけ、というような動きにしたく思い、引き続き調査中です。

もう一つの問題は、アーカイブもしくはインデックスでの挙動。特にインデックス。

私が使っているテーマ(Stage)だとアーカイブ系(カテゴリー別、タグ別一覧も同様)ではタイトルのみで本文が入らないのでまだ問題になっていないのですが、インデックスではそうもいきません。

ここでも、複数回の呼び出しが発生することを想定した作り込みが必要になりますが、私の実装では対応できていません。(不完全だが、1画面内で最初のTagプラグイン記述のみ、動いている)

あと、挿入位置も。
コンテンツの中(body要素の途中)ではなく、head要素の最後とか、body要素の最後に挿入したい。

状態の参照

ドキュメントの、APIを見ればおおよそは分かります。
でも、もっと細かい部分を確かめようと思うと、上記のドキュメントでは物足りなさを感じました。

私もhexo-tag-google-photos-albumを開発している過程で、その場しのぎ的に調査したのですが、効率的にやれていなかったのと、今後のことを思うと、まとまった形でどこかに書き出しておいたほうがいいなと思いました。

このあと、Hexoプラグイン開発に役立つよう、hexo-tag-google-photos-albumの開発を題材にとって、それらをまとめていきたいです。

他にも、開発の役に立ちそうなこと

まだまだ理解できていないこと。

Hexoの一連のライフサイクル。
それぞれの段階で、どんな処理が走るのか。
とか。

それとテーマ。

あとは、プラグインのロードあたりも、おいおい調べる必要が出てくるかも。

それと、npm linkを効果的に使う方法をちゃんと理解しておかないと、開発の効率が悪すぎる……。

そういったことを、連載形式でまとめていけたらと思います。