Hexo-Theme-Butterfly 多级分类展示问题分析与解决方案

在Hexo博客框架的Butterfly主题中，当文章被分配到多个分类时，分类展示存在一个常见问题：分类之间缺少分隔符，导致用户体验不佳。本文将深入分析该问题的成因，并提供完整的解决方案。

问题现象

当文章Front-matter中设置多级分类时，例如：

categories:
    - [投资, 理念]
    - [企业, 洋河]

主题在首页和文章详情页展示分类时，会出现分类层级之间缺少分隔符的情况，导致分类显示不清晰。例如"投资理念"和"企业洋河"这样的显示效果，用户难以区分这是两个独立的分类路径还是一个长分类名。

问题根源

这个问题的根本原因在于Butterfly主题的分类展示逻辑中，对多级分类的处理不够完善。主题在渲染分类链接时，没有在分类层级之间添加适当的分隔符号（如斜杠"/"），导致多个层级的分类名直接拼接在一起。

解决方案

要解决这个问题，我们需要修改主题的分类展示逻辑。具体步骤如下：

1. 定位到主题的post-meta组件文件（通常位于layout/includes/post目录下）

2. 找到分类渲染部分的代码，修改为以下逻辑：

<% if (post.categories && post.categories.length) { %>
    <span class="post-meta-item">
        <span class="post-meta-item-icon">
            <i class="far fa-folder-open"></i>
        </span>
        <span class="post-meta-item-text"><%= __('post.in') %></span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
            <% post.categories.each((category, i) => { %>
                <% const path = category.path.split('/').join(' / ') %>
                <a href="<%= url_for(category.path) %>" itemprop="url" rel="index">
                    <span itemprop="name"><%= path %></span>
                </a>
                <% if (i < post.categories.length - 1) { %>·<% } %>
            <% }) %>
        </span>
    </span>
<% } %>

3. 对于文章详情页的分类展示，也需要进行类似的修改，确保分类层级之间有明确的分隔符。

实现效果

修改后，分类将显示为"投资 / 理念 · 企业 / 洋河"这样的格式，其中：

• 斜杠"/"表示分类层级关系
• 点号"·"表示不同分类路径之间的分隔

这种显示方式更加清晰直观，用户可以轻松区分不同的分类路径。

注意事项

1. 修改主题文件前，建议先备份原文件
2. 如果主题升级，可能需要重新应用这些修改
3. 可以根据个人喜好调整分隔符的样式和间距，通过CSS进一步美化显示效果

通过以上解决方案，可以有效改善Butterfly主题在多级分类展示方面的用户体验，使博客的分类结构更加清晰明了。