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

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

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

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

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

currentクラスをつける

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

<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で装飾

.current {
    background: #eaeaea;
    font-weight: 700;
}

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

参考記事

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

• how to write the categories? (no use list_categories)