Hexo yilia 主题一系列配置和使用的记录

切换到 yilia 主题后，可以对博客进行很多个性化配置，网上有很多针对的教程，这里对我做的配置做一些记录。

内容主要有：

基本信息的修改
头像图标的修改
添加所有文章处的缺失模块
完善代码行号显示错乱
添加访问量统计
添加上方进度条
文章显示目录
文章内插入图片
文章显示摘要和插入标签

开头先说明一下，所有做出的修改保存后，还需要执行 hexo clean -> hexo g -> hexo d 这三条基本命令将修改部署到网上，而有时候执行这三条命令的地方有所不同，最保险的方法是 cd themes 执行一次，然后 cd.. 回到根目录再执行一次。

如图

基本信息的修改

网页基本信息的修改：打开 BLOG\_config.yml 配置文件，修改 site 栏目下的 title 和 author ，这两个分别是网站名字和博客页面作者名字。
博客左边信息栏的修改：打开 BLOG\themes\yilia\_config.yml 配置文件，修改 smart _menu 栏目下的 friends 和 about me ，这两个是博客左边信息栏中点击会出现的信息。
博客左边下方图标外接链接的修改：也是 BLOG\themes\yilia\_config.yml 配置文件，修改 subnav 栏目下的信息，我把自己需要让人能看到的外链填进去，不需要的就加 # 隐藏了。

如图

PS：这里有个小插曲，我想把自己扫一扫添加我微信的截图放进去，结果只能放链接，所以找了个通过 GitHub 把图片上传生成链接的方法。参考：这里。

头像图标的修改

博客头像的修改：头像存放在 BLOG\themes\yilia\source\ 的任意位置，我参考网上新建了个 assert 文件夹，把头像存放在里面，地址为 \themes\yilia\source\assert\1.jpg 。然后打开 BLOG\themes\yilia\_config.yml 配置文件，修改 favicon 一栏为 /themes/yilia/source/，修改 avatar 头像一栏为 /assert/1.jpg。
网页图标 icon 的修改：先去比特虫网站生成 icon 图标；图片放到hexo/source/img文件夹下，地址为 \BLOG\source\img\bitbug_favicon.ico；找到BLOG\themes\modernist\layout_partial\head.ejs，设置为

<% if (theme.favicon){ %>
    <link rel="icon" href="/img/bitbug_favicon.ico">
  <% } %>

添加所有文章处的缺失模块

用 cmd 控制台打开博客根目录 \BLOG ，输入命令 npm i hexo-generator-json-content --save ，再用编辑器打开 BLOG\_config.yml 配置文件，在最后添加以下代码：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

完善代码行号显示错乱

用编辑器打开 \BLOG\themes\yilia\source\main.0cf68a.css 文件，删除 white-space:pre-wrap; 这行代码。

添加访问量统计

用编辑器打开 \BLOG\themes\yilia\layout\_partial 文件，用以下代码替换：

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
      </div>
      <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      </div>
    </div>
    <div calss="count-span">
      <span id="busuanzi_container_site_pv">
          总访问量: <span id="busuanzi_value_site_pv"></span>
    </div>
  </div>
</footer>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

其中最后一句 <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> 是用来添加不蒜子统计。中间 <div calss="count-span"> <span id="busuanzi_container_site_pv"> 总访问量: <span id="busuanzi_value_site_pv"></span> </div> 是用来添加站点访问量。
还有一些添加总访客数、文章阅读量的操作，觉得自己不需要就没添加了，可以参考这个。

添加顶部加载条

用编辑器打开 BLOG\themes\yilia\layout\_partial\head.ejs 配置文件。
在这段代码：

<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="<%= config.url %>">
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

下方添加：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
  <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
    <style>
    .pace .pace-progress {
        background: #6d6d6d; /*进度条颜色*/
        height: 2px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #6d6d6d; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #6d6d6d;    /*上边框颜色*/
        border-left-color: #6d6d6d;    /*左边框颜色*/
    }
  </style>

文章显示目录

有两种方式显示目录。

一种方式是每篇文章右下方都显示目录。
用编辑器打开 BLOG\themes\yilia\_config.yml 配置文件，修改 toc: 2 。

如图
另一种方式是单独一篇文章右下方显示目录。
修改 toc: 1 ，而在每篇新建文章开头填入 toc = ture 。
例如：

---
title: new
date: 2019-07-24 13:44:30
tags:
toc: ture
---

文章内插入图片

用 cmd 控制台打开博客根目录 \BLOG ，输入 npm install hexo-asset-image –save 命令，安装一个可以上传本地图片的插件。
用编辑器打开 BLOG\_config.yml 配置文件，修改 post_asset_folder: true 。
这时每次用 hexo new filename 新建文章时，就会出现一个同名文件夹 filename ，把需要插入的图片 1.jpg 放进去。
最后在用 markdown 写文章时，就用 ![](filename/1.jpg) 插入图片就好了。

文章显示摘要和插入标签

在文章需要截断部分写入
```

```
就会自动渲染出文章摘要。

在新建的文章开头部分写入

---
title: 学习使用 GIT
date: 2019-07-23 12:44:13
tags:
- git 
- xxx （这就是标签）
---

就能插入多标签。

后记
还有更多个性化配置可以参考网上或者自己探索，基本上以上这些配置就能满足我的需求了，或许以后还需要学 更改代码样式 、插入音乐 和 插入数学公式，但目前还不用。
更改代码样式其实是花了很多时间去弄，但是还没弄懂。其实如果了解得更深，了解 Hexo 的构建，了解 yilia 的构建，和前端等等的相关知识，搭建的博客可以更好，各种样式都能自己设置，尝试修改代码样式时就试用了下 F12控制台和 css 的相关内容，但是还是没搞懂。目前还是了解一下，点到为止了。

参考和鸣谢
头像摘要顶部加载条目录插入图片插入图片网页图标访问量代码行号显示错乱
待看
数学公式其他渲染引擎主题自定义 Hexo构建