添加 categories 页面

生成index.md文件

hexo new page categories

在theme/yilia/souce下生成一个categories文件夹，文件夹下有一个index.md文件

修改index.md文件

---
title: 文章分类
date: 2019-10-30 16:36:49
type: "categories"
layout: "categories"
comments: false #关闭评论
---

添加 categories 到menu菜单

在yilia主题下的主配置文件_config.xml中找到menu,并把categories添加进去

menu:主页: /分类: /categories

yilia 主题的配置文件

main.826e88.css

路径：themes/yilia-plus/source/main.826e88.css（每个yilia主题下的main.后面都有所不同）
添加如下代码：

category-all-page {margin: 30px 40px 30px 40px;position: relative;min-height: 70vh;}.category-all-page h2 {margin: 20px 0;}.category-all-page .category-all-title {text-align: center;}.category-all-page .category-all {margin-top: 20px;}.category-all-page .category-list {margin: 0;padding: 0;list-style: none;}.category-all-page .category-list-item-list-item {margin: 10px 15px;}.category-all-page .category-list-item-list-count {color: $grey;}.category-all-page .category-list-item-list-count:before {display: inline;content: " (";}.category-all-page .category-list-item-list-count:after {display: inline;content: ") ";}.category-all-page .category-list-item {margin: 10px 10px;}.category-all-page .category-list-count {color: $grey;}.category-all-page .category-list-count:before {display: inline;content: " (";}.category-all-page .category-list-count:after {display: inline;content: ") ";}.category-all-page .category-list-child {padding-left: 10px;}

categories.ejs

路径:theme/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:3,    #这里代表着几层分类（新增的时候把#后面的去掉要不然会报错）separator: ''}) %></div><% } %>
</article>

添加分类到文章中

每次在新增文章或者修改文章时，在【------】与【------】之间加上categories:
- Linux
-  nginx

效果图

hexo博客的yilia主题之添加分类相关推荐

hexo博客搭建及主题优化(一)
个人博客个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客介 ...
Hexo博客搭建之主题构建(melody)
前言上一章主要记录和说明Hexo的基础搭建和使用技巧. 本章, 我们主要记录下Hexo博客中关于主题的使用. 主题的选用后, 其实就是大量的配置. 以及第三方的集成, 是一件苦工, 但不难. 但是实 ...
Hexo博客（Snail主题）搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览笔者搭建博客地址:saltyfishyjk's Blog 文章目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言写作背景定位您在这里 ...
给自己的hexo博客个性化Volantis主题
文章目录准备工作一.搭建一个大致框架二.在_config.yml的一些基础配置三.在_config.volantis.yml的进阶配置 1.首先我们要创建页面 2.自定义导航栏 3.自定义友链 ...
mysql find next_GitHub - flymysql/hexo-theme-next-flyme: 自己的hexo博客在next主题上做的修改...
这两天花了点时间修改了下自己的next主题的博客变化还是可以的样式表放在了GitHub上喜欢的话可以直接使用直接下载样式表,然后复制到自己主题的themes\next\source\css_cu ...
关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
前言: 有段时间没折腾过博客页面样式了,偶然间看到了一个春节红灯笼的小demo,感觉很棒,所以拿过来了,并且自己新增了一些小挂件,加上了关键帧动画,圣诞树等元素.主题切换按钮原理和以前教程里面提到的暗 ...
Hexo博客之butterfly主题优雅魔改系列（持续更新）
为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页前置说明魔改亮点
Hexo博客搭建之配置文件详解(Melody)
前言之前有2篇关于Hexo博客搭建的文章. 有人给我留言要我使用的配置文件. 我们今天就简单聊聊这个配置文件. 其实, 在前篇Hexo博客搭建之主题构建(melody), 以及作者官方文档内以及有着 ...
Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...

hexo博客的yilia主题之添加分类

文章目录