Hexo多级类别的层级显示

发表于 书写 1,540 字   |   分类于 >   |   访问 次   |  

本文旨在让多级类别以层级的形式在网页正确呈现。

前文介绍了如何为文章设置多级类别。设置完成后，Next 主题会在每个文章标题的下方显示其所属类别，如果类别为多级则显示如下：

1. 问题描述

然而，其类别页面的显示并不正确。

“Hexo”、“支教”、“日语”三个类别应是同级，“org-mode”为“hexo“的子类别。显然上图的显示有问题。

2. 问题解决

查看类别部分的源代码：

<!– more –> 

1
2
3
4
5
6
7
8
9
10
11
<div class="category-all">
  <ul class="category-list">
    <li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">6</span>
      <ul class="category-list-child">
        <li class="category-list-item"><a class="category-list-link" href="/categories/hexo/org-mode/">org-mode</a><span class="category-list-count">1</span></li>
      </ul>
    </li>
    <li class="category-list-item"><a class="category-list-link" href="/categories/支教/">支教</a><span class="category-list-count">1</span></li>
    <li class="category-list-item"><a class="category-list-link" href="/categories/日语/">日语</a><span class="category-list-count">2</span></li>
  </ul>
</div>

从HTML结构来说，是非常标准的列表样式，而且嵌套格式也正确。那么最终显示不正确，就很可能是CSS设置的问题了。明确目标之后，很轻松就找出 Next 默认将类别的列表项设置为： 

display: inline-block;

只要将其改为下面代码即可。 

display: list-item;

3. 优化显示效果

你还可以进一步优化显示效果，如果想将列表项前的 ■ 替换为 > 1，则在相应的样式文件（ Next 主题下为 source\css\_custom\custom.styl ）中添加以下代码： 

.category-list ul
    list-style none
    li:before
      content '> '

显示效果如下：

4. 更新历史

  • [2016-01-24 日] 增加优化显示效果部分
  • [2016-01-23 六] 拟定初稿

Date: 2016-01-23 六 00:00

Validate

版权声明

本文由宇晨创作，采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

首发于跬步，转载或引用请注明出处，本文永久链接：Hexo多级类别的层级显示

知识共享许可协议