前言
最近在搞一個博客，是托管在github和gitcafe上的，利用Hexo生成的。
之后，發(fā)現(xiàn)一個問題，顯示的分類都是一級的。而我想要的是：能顯示多級分類,層次分明`的那樣。
問題
基本主題自帶的分類顯示都是一級的，如何顯示多級?
解決方案
所以，研究了一下，找到了理想的方法，方法如下:
利用系統(tǒng)的list_categories([categories], [options])輔助函數(shù)生成分類列表;
利用css實現(xiàn)樣式.
示例
說明：我使用的是jacman主題，以這個主題為例說明。
- 在主題文件夾下找到
layout/_widget/category.ejs文件,內(nèi)容如下:
<% if (site.categories.length){ %>
<div class="categorieslist">
<p class="asidetitle"><%= __('categories') %></p>
<ul>
<% site.categories.sort('name').each(function(item){ %>
<% if(item.posts.length){ %>
<li><a href="<%- config.root %><%- item.path %>" title="<%= item.name %>"><%= item.name %><sup><%= item.posts.length %></sup></a></li>
<% } %>
<% }); %>
</ul>
</div>
<% } %>
- 修改內(nèi)容,利用上面提到的
list_categories([categories], [options])輔助函數(shù):
<% if (site.categories.length){ %>
<div class="category-block">
<h3 class="asidetitle"><%= __('categories') %></h3>
<%- list_categories(site.categories) %>
</div>
<% } %>
- 修改樣式文件
在主題文件夾下找到
source/css/_partial/aside.styl文件,其他的也可能是source/css/_partial/sidebar.styl。反正，能在頁面顯示即可。添加新的樣式，我的如下：
//categories
.category-block>ul>li
border-bottom 1px solid #ccc
.category-block li
margin-bottom 8px
.category-list
@media mini
width 45%
float left
margin 0 5% 0 0
@media tablet
width 100%
float none
margin .5em 0 0
.categoriy-list-item
padding .5em 5%
.category-list-count
top -.5em
padding-left .3em
font-size 75%
line-height 0
position relative
vertical-align baseline
ul, ol, dl
list-style none
ul, ol, dl
background-color #f9f9fa
margin-left 20px
li
border-bottom 1px dashed #ccc
.category-list-child
border-top 1px dashed #ccc
margin-bottom 8px
想實現(xiàn)不同的樣式，自己可以修改。
效果圖
效果圖
markdown寫法如下
---
title: Hexo主題實現(xiàn)多級分類顯示
categories:
- 前端
- Hexo
tags:
- 前端
- Hexo
date: 2016-01-24 21:46:07
---
原文來自:seay.me
本文采用知識共享署名-相同方式共享 4.0 國際許可協(xié)議進行許可。
基于簡書上的作品創(chuàng)作。 可轉(zhuǎn)載、引用，但需經(jīng)本人同意后署名作者且注明文章出處，并以相同方式共享。
知識共享許可協(xié)議
