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

分享一些博客基础的配置((^▽))
参考了一些博客，Ծ‸Ծ一点一点填坑~

一、添加统计(不蒜子&字数统计)

1、总体统计

找到themes\yilia\layout\_partial\after-footer.ejs,添加：

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

找到themes\yilia\layout\_partial\footer.ejs，在<div class="footer-right">标签内添加：

<!-- # 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>

2、文章统计

找到themes\yilia\layout\_partial\post\nav.ejs，注释掉以下两行：大概在27行左右(无此代码请忽略)

<span class="post-meta-item-text">本文阅读量 </span>
<span class="leancloud-visitors-count">8848</span>

注释掉之后直接在这两行下面加上：

<span id="busuanzi_container_page_pv">
        本文阅读量: <span id="busuanzi_value_page_pv"></span>次
 </span>

3、字数、阅读时长统计

打开博客根目录、安装插件

npm i -save hexo-wordcount

博客根目录_config.yml添加配置:

word_count: true

找到themes\yilia\layout\_partial\article.ejs,在大概第七行

下面添加代码:

<% if(theme.word_count && !post.no_word_count){
   %>
          <%- partial('post/word') %>
          <% } %>

最后在themes\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" style="font-size: 16px;color: grey">  字数统计: </span>
        <!--这里样式可以自己定制-->
        <span class="post-count" style="font-size: 16px;color: grey"><%= 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" style="font-size: 16px;color: grey">  阅读时长: </span>
        <span class="post-count" style="font-size: 16px;color: grey"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

二、添加文章目录(两种)

1、主题默认方式

注意！！！文章Markdown文件一定要从一级标题开始写，直接从二级标题是无法生成目录的！！！

直接在yilia目录下的_config.yml配置toc属性即可

# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 标号隐藏：true:隐藏生成目录自带的标号 fasle:不隐藏，默认使用系统带的标号
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

2、自制滑动白色目录

1、修改css文件：

themes\yilia\source\assets路径下找到main.xxxxx.css，在最后添加代码：

这里的xxxxx是不确定的意思，有些人重新build后会和原版的不一样

#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