Hexoで記事の属するカテゴリー名を表示する

Hexoでは記事の属するカテゴリー情報がpage.categoriesに格納されています。この変数からカテゴリー名とURLを取り出しリンクを表示させる方法のメモ。テンプレートエンジンはEJSです。

階層順に出す

属するカテゴリーを階層順に取り出し、リストタグに出すパターンです。

1
2
3
4
5
6
7
8
9
<ul>
<% page.categories.forEach(function(item){ %>
<li>
<a href="<%= url_for(item.path) %>">
<%= item.name %>
</a>
</li>
<% }) %>
</ul>

配列に格納されているので、.forEachでループさせてそれぞれを取り出せばOKです。

Hexo全般に言えることですが、pathの文字が含まれる変数は、先頭に/のない相対リンクです。字の文でスラッシュを補っても良いですが、url_for()関数を使って、ルート相対パス(省略絶対パス?)の形に変換してしまうのが使いやすくてオススメです。

HexoのURL関連のテンプレート変数まとめ

最後のカテゴリー名のみ

階層化されているカテゴリーの中で、最後のものを表示する方法。この項目のために記事を書き始めたと言っても過言ではないのですが。

例えば、記事のカテゴリーがレビュー > 電化製品 > スマートフォンとなっていたら、スマートフォンのカテゴリーのリンクだけが表示されます。

1
2
3
<a href="<%= url_for(page.categories.data[page.categories.length - 1].path) %>">
<%= page.categories.data[page.categories.length - 1].name %>
</a>

少し頭を使いますね。配列の長さから1を引いたものをインデックス番号に指定すれば解決です。(インデックス番号は0から始まるので)

サイドバーにあるカテゴリー一覧の、現在地ハイライト表示の判定に用いたり、このブログの記事下に設置している「同じカテゴリーの記事一覧」 など、工夫しだいでさまざまな使い方ができます。

関連記事

Hexoでプラグインを使わずパンくずリストを表示する