Hexo-NexT 分类多层级描述

2021-08-28 10:31:54 阅读：248 来源： 互联网

标签：Life 层级 Hexo 标签分类 NexT Diary categories

分类一般用法
Hexo 中分类和标签有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。
```
categories:
- Diary
tags:
- PS3
- Games
```
父子分类
如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：
```
categories:
- Diary
- Life
```
会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。
并列+子分类
如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。
```
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
```
此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。
分类页面优化
我想要的是这种层次分明的效果：

但我设置完成后，实际的效果, 层次感不强。:

问题解决
首先尝试了CodeHeap 的文章Hexo+NexT博客归档/标签/分类页美化,对分类栏进行了优化。发现只是增加了效果，分类的层次结构还是不清晰。

然后修改 /themes/next/source/css/_common/components/pages/categories.styl 代码,将 .category-list-child 的 padding-left 属性改为 60px。
```
.category-list-child {
  padding-left: 60px;
}
```
最终效果图：

——————————
参考

标签：Life,层级,Hexo,标签,分类,NexT,Diary,categories
来源： https://www.cnblogs.com/cscshi/p/15196122.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Hexo-NexT 分类多层级描述