Writing by Tor小黑 —-心中藏之，无日忘之

Hexo更换yilia主题，个性化设计，详细教程

在用 Hexo 搭建完毕后，接着就定制个性化主题啦，对比了几个主题 ，发现 yilia 主题比较干净、简洁，于是就选了这个主题，在细节上根据自己的需求进行个性化设计。
最终效果展示：https://huanyaya.github.io/

一、下载、更换yilia主题

1、下载

在任意文件夹下通过git Bash工具执行如下命令

git clone https://github.com/litten/hexo-theme-yilia.git

会在当前文件夹下生成一个hexo-theme-yilia文件夹，重命名为yilia并将其移动到blog项目下的themes文件夹下

2、替换yilia主题

打开blog项目目录下的_config.yml文件

二、个性化设置

1、更换语言

打开blog项目目录下的_config.yml文件

2、查看所有文章，提示缺失模块

yilia 在首次使用时，点击所有文章时，会出现模块找不到的错误，可按照提示操作即可
注意一下，_config.yml 路径是指根目录下的，而非 yilia 主题下的_config.yml文件

3、配置图片资源（修改头像、微信、二维码、打赏功能）

1、添加图片资源文件夹，路径为项目文件夹下themes/yilia/source/下，可添加一个 assets 文件夹，里面存放图片资源即可
2、在配置文件中直接引用即可。路径为 themes/yilia/_config.yml修改以下内容：

//微信二维码图片
weixin:  /assets/wechat.jpg
//头像图片
avatar:  /assets/head.jpg
//网页图标
favicon:  /assets/head.jpg

4、文章显示摘要，即博客首页文章列表只显示摘要，点击才能查看全文

问题：打开博客主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数

解决办法：在 .md 为后缀格式文章正文插入 <!-- more --> 即可，只会显示它之前的博文内容，此后的就不显示。点击文章标题，全文阅读才可看到完整文章，同时注释掉配置文件themes/yilia/_config.yml中以下内容（此行重复）

# excerpt_link: more

5、文章添加目录

1、添加CSS样式
打开themes\yilia\source下的main.****.css文件（此处每个人生成文件可能不一样），添加如下代码：

/* 文章目录css样式 */
#container .show-toc-btn,#container .toc-article{display:block}
.toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}

.toc-article li ol, .toc-article li ul {
    margin-left: 30px;
}
.toc-article ol, .toc-article ul {
    margin: 10px 0;
}

2、修改article.ejs文件
打开themes\yilia\layout\_partial文件夹下的article.ejs文件
加入如下内容：

<!-- 目录内容 -->
        <% if (!index && post.toc){ %>
            <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
            <span class="btn-bg"></span>
            <span class="btn-text">文章导航</span>
            </p>
            <div id="toc-article" class="toc-article">
                <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
                <strong class="toc-title">文章目录</strong>
                <%- toc(post.content) %>
           </div>
           <script type="text/javascript">
            function showToc(){
                var toc_article = document.getElementById("toc-article");
                var show_toc_btn = document.getElementById("show-toc-btn");
                toc_article.setAttribute("style","display:block");
                show_toc_btn.setAttribute("style","display:none");
                };
            function showBtn(){
                var toc_article = document.getElementById("toc-article");
                var show_toc_btn = document.getElementById("show-toc-btn");
                toc_article.setAttribute("style","display:none");
                show_toc_btn.setAttribute("style","display:block");
                };
           </script>
        <% } %>
<!-- 目录内容结束 -->

3、使用生效
然后若想要文章显示目录，在每篇文章开头加入：toc: true即可

6、修改网站标题，博客作者，增加个人描述

打开项目根路径下的配置文件_config.yml：
修改图示内容：

7、增加不蒜子统计

利用这个统计，可以知道你博客的访问量

a.安装不蒜子脚本

在 themes\yilia\layout\_partial\after-footer.ejs最后添加

<script  async  src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

b.添加统计网站访问量

修改 themes\yilia\layout\_partial\footer.ejs，包括访客数和站点访问总量

# PV方式，单个用户连续点击 n 篇，记录 n 次记录值
<span id="busuanzi_container_site_pv">    本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

# UV方式，单个用户连续点击 n 篇，记录 1 次记录值
<span id="busuanzi_container_site_uv">  本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>

c.添加文章访问量

在/themes/yilia/layout/_partial/article.ejs的header的日期后面：

<% if ( !index ){ %>
        <span class="archive-article-date">
            阅读量 <span id="busuanzi_value_page_pv"></span>
        </span>
<% } %>

8、文章添加字数统计和阅读时长功能

安装 hexo-wordcount，在博客目录下打开Git Bash Here 输入命令

npm i --save hexo-wordcount

在theme\yilia\layout_partial\post下创建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然后在 themes/yilia/layout/_partial/article.ejs中添加

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <!-- 需要添加的位置 -->
        <!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        <!-- 添加完成 -->

        <% } %>
      </header>

开启功能，在站点的_config.yml中添加下面代码

# 是否开启字数统计
#不需要使用，直接设置值为false，或注释掉
word_count: True

9、给文章添加分类

1、添加 categories 页面，生成index.md文件

hexo new page categories

会在theme/yilia/souce下生成一个categories文件夹，文件夹下有一个index.md文件，修改该文件，内容如下：

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

2、添加 categories 到menu菜单
修改在yilia主题下的主配置文件_config.xml中找到menu,并把categories添加进去，如下：

menu:
  主页: /
  分类: /categories

3、添加分类页面css样式
路径：themes/yilia-plus/source/main.826e88.css（每个yilia主题下的main.后面都有所不同）
添加如下代码（可根据个人需要修改）：

    /**文章分类css样式**/
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;
  }

4、新增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>

5、使用
每次在新增文章或者修改文章时，在文章头部添加categories:：后写归入哪一类
示例：

---
title: hello world
tags: ''
categories: [hexo,基础配置]  #此处可写多个，即为多级分类
date: 2020-05-03 09:29:48
toc: true
---

10、修改背景图片

1、本地将背景图放到项目路径..\themes\yilia\source\assets下
2、修改左侧背景图
在路径： themes/yilia/layout/_partial/left-col.ejs下，将下面这行内容替换成 < div class=“overlay” >< /div>

<div class="overlay" style="background: 。。。。。>

2.2 路径：themes\yilia\source\main.0cf68a.css修改（替换背景图即可）

.left-col{ /* background:#fff; */  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url('填入自己的图片路径') no-repeat 0% 20%/ cover;width:300px;position:fixed;opacity:1;transition:all .2s ease-in;height:100%;z-index:999;overflow:hidden;overflow-y:auto;margin-bottom:15px}

3、修改右侧背景图
路径：themes\yilia\source\main.0cf68a.css修改以下内容：

#文章背景透明
.article{margin:30px;border:1px solid #ddd;border-top:1px solid #fff;border-b
ottom:1px solid #fff;/* background:#fff; */background: rgba(255,255,255,.5);transition:all .2s ease-in}
#将背景颜色更换为图片
body{margin:0;font-size:14px;font-family:Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif;line-height:1.5;color:#333;/* background-color:#fff; */min-height:100%;background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url('http://csj.qinrunfa.top/5b625b9f580b0d3618add35c067e9f06.jpeg') no-repeat 0% 0%/ cover;}
#去掉浮动在底层背景上的颜色
body{overflow-y:hidden;/* background:#eaeaea */}
#去掉浮动在底层背景上的颜色
.mid-col{position:absolute;right:0;min-height:100%;/**background:#eaeaea**/;left:300px;width:auto}

赏

谢谢你请我吃糖果

微信