Hexoでカテゴリーに関連したタグの一覧を取得する方法

ブログをHexoに変えてからカスタマイズが楽しくて、コードばかり書いてしまいます(笑)

今回はカテゴリー一覧のページを触っている時に関連したタグを表示したいと思って実装してみました。

Hexoでカテゴリーに関連したタグは標準では取得できない

調べてみるとカテゴリーに関連したタグはHexoでは標準取得する方法はありませんでした。

site.tags

で定義されているタグのすべてが取得できるので、ここからフィルタリングできると嬉しかったんですけどね。

Hexoは結構ドキュメント見ると、あれ標準でできるじゃん!ってことが多いけど、今回は自分でフィルタリングしてみます。

特定のカテゴリーがついた記事のタグだけを取得する

カテゴリーに関連したタグの定義として、特定のカテゴリーがついた記事に指定されているタグを、取得するようにします。

そのコードが下記です。

var allPosts = site.categories.findOne({ name: page.category }).posts;
var postTags = allPosts.map(function(post) {
  return post.tags.toArray();
});
var tags = _.uniqBy(_.flattenDeep(postTags), 'name');

アンダースコアの関数を呼んでいますが、Hexoは標準でグローバルにlodash.jsがインクルードされています。

Variables | Hexo

のGlobal Variablesのセクションに記載されています。

関連タグの一覧を表示する

上記で取得したtagsはHexoで定義されているタグのオブジェクトです。

使い方は下記のように、基本的な使い方と変わりありません。

<% if (tags.length) { %>
<ul>
  <%- tags.each(function(() {%!li!/%}」をご覧ください。

記事内ではカテゴリーを対応しましたが、同じ方法でタグにも使うことができます。

## タグを複数の場所で表示する場合はヘルパーにしよう

今回紹介したコードはカテゴリー名さえ取得できれば、どこでも使用することができます。

使う場所的にはカテゴリー一覧で使うと相性が良くて一番良いかなと思っています。

ただ複数の箇所で使いたい場合はヘルパーにしてしまった方が良いですね。

カテゴリーに関連したタグを表示したい人は、今回紹介した方法をお試しください!

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js