Hexo主题实现多级分类显示

前言

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

问题

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

解决方案

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

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

  2. 利用css实现样式.

示例

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

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

    <% if (site.categories.length){ %>
    

    <%= __('categories') %>

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

    <% if (site.categories.length){ %>
    

    <%= __('categories') %>

    <%- list_categories(site.categories) %>
    <% } %>
  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

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

效果图

Hexo主题实现多级分类显示_第1张图片

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

转载于:https://www.cnblogs.com/seayxu/p/5156669.html

你可能感兴趣的:(Hexo主题实现多级分类显示)