Hexo多级类别的层级显示

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

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

1 问题描述

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

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

2 问题解决

查看类别部分的源代码:

<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 周六]

Validate

版权声明

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

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

知识共享许可协议