给Hexo的Yilia主题增加分类

2019-09-02

起因

Hexo博客搭建好之后，选择了Yilia主题，不得不说这个主题很耐看，符合我的胃口，但没有分类会很不方便文章的管理，显得比较错乱，极有必要解决下，所以在网上搜寻解决办法。

Hexo添加categories页面

找到上面这篇文章，但发现这个博主用的是Yilia主题老版本，还是使用Stylus进行css预处理，而最新的版本使用的是Sass对css进行预处理。对前端比较小白的我，没办法只能查阅Sass的相关资料，不过好在最后折腾成功，特此记录下，方便后来的小伙伴参考。

步骤

左侧增加一个分类页面的链接，找到themes/yilia/_config.yml

1
2
3

menu:
  主页: /
  分类: /categories

使用hexo命令，新增一个页面

1	hexo new page categories

修改categories/index.md里的内容，指定layout为categories，渲染时就会使用categories.ejs进行渲染

---
title: 文章分类
date: 2019-09-02 22:21:39
type: "categories"
layout: "categories"
comments: false
---

新增一个分类模板，路径为themes/yilia/layout/categories.ejs

<article class="article article-type-post show">
  <header class="article-header" style="border-bottom: 1px solid #ccc">
  <h1 class="article-title" itemprop="name">
    <%= page.title %>
  </h1>
  </header>

  <% if (site.categories.length){ %>
  <div class="category-all-page">
    <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
    <%- list_categories(site.categories, {
      show_count: true,
      class: 'category-list-item',
      style: 'list',
      depth: 2,
      separator: ''
    }) %>
  </div>
  <% } %>
</article>

新建一个css预处理文件，路径为themes\yilia\source-src\css\categories.scss

.category-all-page  {
  margin: 30px 40px 30px 40px;
  position: relative;
  min-height: 70vh;

  h2 {
    margin: 20px 0;
  }.category-all-title  {
        text-align: center;
  }.category-all  {
        margin-top: 20px;
  }.category-list  {
    margin: 0;
    padding: 0;
    list-style: none;
  }.category-list-item-list-item {
    margin: 10px 15px;
  }.category-list-item-list-count {
    &:before  {
      display: inline;
      content: " (";
    }&:after  {
      display: inline;
      content: ") ";
    }
  }.category-list-item  {
        margin: 10px 10px;
  }.category-list-count  {
    &:before  {
      display: inline;
      content: " (";
    }&:after  {
      display: inline;
      content: ") ";
    }
  }.category-list-child  {
        padding-left: 10px;
  }
}

在themes\yilia\source-src\css\main.scss里引入categories.scss

@import "./footer";
@import "./categories";
@media screen and (max-width: 800px) {
  @import "./mobile";
  @import "./mobile-slider";
}

参考Yilia源码目录结构及构建须知里的开发步骤，重新编译Yilia

1 2	npm install npm run dist

本地预览，效果可参见本博客左侧的分类

1	hexo clean && hexo g && hexo s