このサイト例にももれずタグとかカテゴリーとかアーカイブみたいなページを設けているわけですが、記事数が増えてくるにつれしんどいものがあり、これを何とかしたいという想いがかなり以前からあります。

特にカテゴリーとか階層が深くなっているやつが大変つらいです。これに対する解決策は以前から思い浮かんでいます。JSONで生成してAjaxで取得して、それをVueとかReactでごにょごにょするというものです。しかしながら、なにぶん重い腰が全く上がらず1mmも進まないという状態が長らく続いていました。今日ちょっとやってみようかなと思った[1]ので雑にやったことを書きます。

既存のプラグインをつかう


hexo-generator-json-contentというわりかしメジャーでちゃんとメンテされているプラグインがあります。はじめこれを試しました。試したのですが、私にとって不必要なデータも大量に生成されてしまうので自分でなんとかすることにしました。

自分で拡張する


Hexoではいろいろなタイミングで処理をフックできるようになっています。例えば記事生成時であればGeneratorを使えばいいです。そして、実はこれはプラグインを作らなくてもテーマのscriptsディレクトリにJavaScriptを配置すれば実現できます。

今回は試しにアーカイブ(記事一覧)だけJSONで出力することにしてみました。下記のようなコードを書いたファイルをテーマのscriptsファイルに配置します。

1
// themes/<yourtheme>/scripts ディレクトリに適当な名前を付けて配置する。
2
// register関数の第一引数の文字列は一意であればなんでもよい。
3
hexo.extend.generator.register('generate_archives_json', site => {
4
5
  const posts = site.posts;
6
7
  // このサンプルコードではソートしてないので並び順は保証されていません
8
  let data = [];
9
  posts.forEach((post) => {
10
    data.push({
11
      title: post.title,
12
      date: post.date,
13
      path: post.path
14
    });
15
  })
16
17
  return {
18
    path: "data/archives.json",
19
    data: JSON.stringify(data)
20
  };
21
});

後はこのままhexo generateすればdataディレクトリにarchives.jsonが生成されます。試しにこのサイトの/data/archives.jsonにアクセス[2]すると記事一覧のJSONが生成(デプロイ)されているのがわかると思います。

と、こんな感じでちょろっとでできるのがわかったので気が向いたらタグ・カテゴリー・アーカイブを修正したいと思います。頑張ります。眠いので寝ます。おわり。


  1. 他のことがやる気出なかった ↩︎

  2. 将来的にこのパスから消えてるかもしれません ↩︎