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