你的位置:首页 > 网页设计

[网页设计]Hexo主题实现多级分类显示


前言

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

问题

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

解决方案

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

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

  2. 利用css实现样式.

示例

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

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

    <% if (site.categories.length){ %><div >  <p ><%= __('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 > <h3 ><%= __('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