Hexo主题实现多级分类显示

前言

最近在搞一个博客，是托管在github和gitcafe上的，利用Hexo生成的。
之后，发现一个问题，显示的分类都是一级的。而我想要的是：能显示多级分类,层次分明`的那样。

问题

基本主题自带的分类显示都是一级的，如何显示多级?

解决方案

所以，研究了一下，找到了理想的方法，方法如下:

1. 利用系统的list_categories([categories], [options])辅助函数生成分类列表;

2. 利用css实现样式.

示例

说明：我使用的是jacman主题，以这个主题为例说明。

1. 在主题文件夹下找到layout/_widget/category.ejs文件,内容如下:

   <% 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>
   <% } %>

2. 修改内容,利用上面提到的list_categories([categories], [options])辅助函数:

   <% if (site.categories.length){ %>
   <div class="category-block">
     <h3 class="asidetitle"><%= __('categories') %></h3>
        <%- list_categories(site.categories) %>
   </div>
   <% } %>

3. 修改样式文件

• 在主题文件夹下找到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

想实现不同的样式，自己可以修改。

效果图

原文来自:http://git.seay.me