Hexoのカテゴリーリストにcurrentクラスを付けて現在地をハイライト表示する

HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。

1
2
3
<%- list_categories( {
show_count: true
}) %>

そこで、カテゴリー別ページや記事ページにおいて、そのページが属するカテゴリーにcurrentクラスをつけ、ハイライト表示できるようにしたいのですが、どうやらヘルパーにその機能は備わっていない模様…

それならば、ヘルパーを使わずに自力でカテゴリー一覧を出力し、現在地表示にも対応してみよう、というのがこの記事での試みです。

この記事で紹介する内容は並列複数カテゴリーには対応していません。(階層カテゴリーは可)ご了承ください。

currentクラスをつける

カテゴリー一覧を表示したい箇所に以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<ul class="category-list">
<%
let current_category = "";
if(is_category()) {
current_category = page.category;
} else if(is_post() && page.categories.length > 0) {
current_category = page.categories.data[page.categories.length - 1].name;
}
function displayCategories(parent = undefined) {
site.categories
.find({ parent })
.sort("name")
.each(function(category) {
const childCount = site.categories.find({ parent: category._id }).count();
%>
<li class="category-list-item">
<a class="category-list-link <% if(current_category === category.name) { %>current<% } %>" href="<%=url_for(category.path)%>"><%=category.name%></a>
<span class="category-list-count"><%= category.length%></span>
<% if (childCount > 0) { %>
<ul class="category-list-child">
<% displayCategories(category._id); %>
</ul>
<% } %>
</li>
<%
});
}
displayCategories();
%>
</ul>

class名やHTML構造は、ヘルパーで出力されるものと揃えてありますので、すでにCSSで装飾している場合でもそのまま置き換え可能です。

CSSで装飾

1
2
3
4
.current {
background: #eaeaea;
font-weight: 700;
}

ページが属するカテゴリーにはcurrentクラスがつくので、CSSで好きなように装飾してください。

参考記事

GitHubのIssueに挙がっているものを参考に改造させていただきました。ありがとうございました。