yilia主题配置方案（持续更新）

博客的基本信息，如站点名称、博主信息等基本上都可以在根目录下的_config.yml以及themes/yilia/_config.yml中完成，这里就不赘述了，下面介绍一些不太容易实现的配置（至少让我折腾了一会）。

1. 头像&&网页图标等图像设置

在 themes/yilia/source/ 路径下，添加一个 assets 文件夹，里面存放各种资源。我把图像资源放在img文件夹中。

在 themes/yilia/_config.yml文件中，做如下修改：

1
2
3
4
5
6
7
8
9
# wx、zfb二维码图片
weixin:  /assets/img/[image name].png
alipay:  /assets/img/[image name].png

# 头像图片
avatar:  /assets/img/[image name].png

# 网页图标
favicon: /assets/img/[image name].png

2. 博文中插入图片

比较奇怪的是插入图片的markdown语法在这里不起作用，图片加载不出来。几番搜索之后终于找到了解决方案：

首先找到项目根目录的_config.yml文件,修改post_asset_folder为true：

1
post_asset_folder: true

接着在命令行cd到博客项目所在文件夹下，输入：

1
hexo n 博客名 #或hexo new

该命令会生成一个markdown文件和同名的文件夹，我们只需要将图片放进文件夹里，然后在md文件里使用下面的语句来插入图片即可：

1
{% asset_img 图片名.图片后缀 [title] %}

然后hexo g生成文件hexo s启动服务，就可以看到图片了。
需要注意的是如果之前安装过hexo-asset-image，需要将其卸载：

1
npm uninstall hexo-asset-image --save

3. 创建分类页面

在命令行cd到博客项目所在文件夹下，输入：

1
hexo new page categories

该命令将在source目录下生成一个categories文件夹，里面有一个index.md文件。修改该文件为：

1
2
3
4
5
6
---
title: 文章分类
date: 2018-06-11 10:13:21
type: "categories"
comments: false
---

然后进行修改categories页面样式的操作。打开yilia\source\main.0cf68a.css，将下面的内容添加进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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;
  }

设置ejs。新建yilia/layout/categories.ejs，输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

至此分类功能设置完成，我们可以在每篇博文中设置categories属性，详情见第4部分。

4. 设置博文信息

在对应的md文件中设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
---

title: postName           #文章名称，可以任意修改，不会出现在URL中
copyright: true

toc: true                 #是否生成目录
date: 2020-11-11 15:30:16 #文章生成时间
categories: example       #文章分类
tags: [tag1,tag2,tag3]    #文章标签，可空，多标签请用格式，注意:后面有个空格
---
 文章摘要
 <!-- more -->
 文章正文，主页面中不显示

显示文章摘要还需要注释掉下面的语句，在 themes/yilia/_config.yml文件中。

1
excerpt_link: more

5. 增加归档菜单，显示所有文章

修改 themes/yilia/_config.yml

1
2
3
menu:
    主页:  /
    归档:  /archives/index.html

6. 更改代码块样式

打开theme\yilia\source\main.0cf68a.css，搜索 .article-entry .highlight, 定位到红框，调整代码块背景颜色

调整字体颜色：
### 7. 显示文章目录

在 themes/yilia/_config.ym中，将toc的值改为2。这样就可以根据你的md文件里的标题自动生成目录了：

1
2
3
# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2

8. 添加Gitalk评论区

参考博客

9. 文章URL加密

用命令行安装插件：

1
npm install hexo-abbrlink --save

修改根目录下的配置文件_config.yml。找到permalink: :year/:month/:day/:title/这一行，将其改为：

1
permalink: archives/:abbrlink.html

然后在下面添加：

1
2
3
abbrlink:
  alg: crc32  # 算法
  rep: hex    # 进制

参考：

记录hexo无法加载图片及修改yilia主题组件

Hexo yilia 主题一揽子使用方案

Hexo-Yilia进阶笔记

Yilia主题优化(统计、评论、目录、一言、爱心效果、、、)