Hexo+yilia主题网站进阶教程

话不多说，下面的配置将会让你的网站提高n个档次！

【所有文章】按钮安装

你初始化的文章，所有文章按钮点开是有问题的，主要是你配置文件里面少了下面的内容

在博客根目录找到_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

然后hexo d上传项目，更新后再次点击所有文章目录，会神奇的发现，哇哦奥，所有文章都列出来了。

添加头像，赞赏二维码

打开你的项目根目录中Blogthemeshexo-theme-yiliasource，在其中可添加一个 assets文件夹，里面存放图片资源即可，比如我的是创建了assets文件夹，然后在其中又创建img文件夹，意味把图片放到Blogthemeshexo-theme-yiliasourceassetsimg目录下。

然后打开Blogthemeshexo-theme-yilia下的_config.yml文件，在其中配置：

#你的头像url
avatar: "/assets/img/mnn.jpg"

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay:
# 微信二维码图片地址
weixin: "/assets/img/wx.png"

字数统计和阅读时长

安装 hexo-wordcount

在博客根目录下打开Git Bash Here 输入命令下面命令：

npm i --save hexo-wordcount

配置文件

在themeshexo-theme-yilialayout_partialpost目录下下创建word.ejs文件（具体为什么是ejs文件而不是js文件有待大家一起研究）：

    
      
        
          字数统计: 
        <%= wordcount(post.content) %>字
      
    

    
        |  
      
        
          阅读时长: 
        <%= min2read(post.content) %>分
      
    

然后在themeshexo-theme-yilialayout_partial/article.ejs中添加

    <% if (post.link || post.title){ %>
      

        <%- 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') %>
          <% } %>
          
        <% } %>
      

开启功能

在项目根目录的_config.yml中添加下面代码：

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

一切配置完成就能看到项目中出现的文章字数以及建议阅读时长。

网站访问数量

引入不蒜子

在themeshexo-theme-yilia/_config.yml中添加属性

本身yilia主题没有在_config.yml保留busuanzi的属性，所以在文件末端添加：

#开启不算子访问统计
busuanzi:
  enable: true

将下面代码添加在 themeshexo-theme-yilialayout_partial/footer.ejs的末尾

添加不算子网站访问量统计脚本

在themeshexo-theme-yilialayout_partial/footer.ejs末尾与其上面的

之间放入代码：

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        
        
                本站总访问量次
        
        |
        
                本站访客数人
        
        
  <% } %>

根据不同的需求，你看你需要在不同的位置显示你的文章阅读量，此处以在右上角的日期区域添加文章阅读量为例：
在themeshexo-theme-yilialayout_partial/post/date.ejs 原有代码的开头(不需要把新代码放入原代码块中，而是和原代码独立的两块）加入：

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        
        
               阅读数：次
        
<% } %>

然后通过hex g生成新的文件，在进行hexo d提交到github平台，刷新页面就能看到你添加的效果了。

添加版权声明

在themeshexo-theme-yilia/_partial/article.ejs文件标注处加入下面内容：

<%
        var sUrl = url.replace(/index\.html$/, '');
        sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
      %>
      
      <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
        

          本文作者：
          <% if(config.author != undefined){ %>
            <%= config.author%>
          <% }else{%>
            
          <%}%>
          

          本文链接：
          <%= sUrl%>
          

          版权声明：
          本作品采用
          <%= theme.licensee_name%>
          进行许可。转载请注明出处！
          <% if(theme.licensee_img != undefined){ %>
            

            
          <% } %>
        
      <% } else {%>
        
      <% } %>

然后修改themeshexo-theme-yilia/_config.yml配置文件，在配置文件中添加：

## 版权声明
declare_type: 1  #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/          # 当前应用的版权协议地址。
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'  # 版权协议的名称
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png      # 版权协议的Logo

在找到你项目根目录下的_config.yml配置文件，填写url地址：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mengniannian.cn

提交就ok了，效果图如下：

增加gitalk评论插件

yilia主题中提供五种评论功能：

1、多说(关闭了) 2、网易云跟帖（停更了） 3、畅言(需要网站的备案信息) 4、Disqus 5、Gitment。

前三种基本不能使用了，后两种不太熟悉，所以就选择了适合大众的gitalk，方便，快捷，用着舒服。

OAuth application注册

首先使用之前要先注册 一个账号，登录自己的github账户，点击头像-->Settings-->Developer settings-->OAuth App-->New OAuth App，或点击注册

Application name：可以随意填写
Homepage URL：个人博客地址（域名）
Application description：可填可不填，不是关键，若填，可填个人博客的相关描述
Authorization callback URL：个人博客地址（域名）
一切设置完成之后点击Register application，注册完成后，会出现两个关键信息（个人博客配置评论功能之关键，就不放图了）

点击Register application注册完成后会出现两个关键信息，Client ID和Client Secret，至关重要。

然后在yilia主题下的_config.yml文件中配置代码：

#6、配置gitalk
gitalk:
  enable: true
  client_id: OAuth application #注册成功获得
  client_secret: OAuth application #注册成功获得
  repo: mengnn.github.io #存储博客评论的仓库地址，可以是存储博客的仓库
  owner: mengnn #github账户名
  admin: mengnn #github账户名
  distractionFreeMode: true

配置文件

首先在yilia主题下的layout-->_partial-->post目录下新增gitalk.ejs文件：

然后修改yilia主题下source-src-->css目录下comment.scss文件：

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
    padding: 0 30px !important;
    min-height: 20px;
}

#SOHUCS {
    #SOHU_MAIN .module-cmt-list .block-cont-gw {
        border-bottom: 1px dashed #c8c8c8 !important;
    }
}

最后在layout-->_partial目录下的article.ejs`文件内新增gitalk相关的配置代码：

<% if (theme.gitalk.enable){ %>
       

       <%- include post/gitalk.ejs %>
  <% } %>

到这里，gitalk就已经全部配置完成，然后hexo g -->hexo d提交代码，打开你的网站，在下面看到如下图所示，就说明你已经配置成功，第一次评论需要登录github账号，登录 一次就OK了。

增加RSS

RSS（简易信息聚合（也叫聚合内容）是一种RSS基于XML标准，在互联网上被广泛采用的内容包装和投递协议。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式，是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台，使得每个人都成为潜在的信息提供者。发布一个RSS文件后，这个RSS Feed中包含的信息就能直接被其他站点调用，而且由于这些数据都是标准的XML格式，所以也能在其他的终端和服务中使用，是一种描述和同步网站内容的格式。

在 Hexo 根目录打开命令行工具，执行以下命令：

npm install hexo-generator-feed --sava
hexo clean
hexo g

命令运行完成后，会在你根目录下面的public文件夹里面看到一个atom.xml文件。

依次打开项目根目录下的themeshexo-theme-yiliaconfig.yml，在subnav项目下添加 RSS 配置信息：

#SubNav
subnav:
  rss: /atom.xml

重新生成并构建页面，就可以看到 RSS 的信息了。

搜索引擎

添加sitemap

在 Hexo 根目录打开命令行工具，执行以下命令：

npm install hexo-generator-sitemap --save
hexo clean
hexo g

查看根目录下的public文件夹，可以看到 sitmap.xml文件。
sitemap 的初衷是给搜索引擎看的，为了提高搜索引擎对自己站点的收录效果，我们最好手动到 google 和百度等搜索引擎提交 sitemap.xml。

百度搜索引擎提交

注册百度站长号，注册完成后进入站点管理，添加自己的网站，然后按照步骤完成网站认证即可。

网站认证完成后，进入网站管理界面，点击链接提交-->自动提交-->sitemap,然后在填写框内填写自己的文件地址，比如我的是https://www.mengniannian.cn/s...，如下图：

按照提示信息，填写完成提交就ok了！！！