基于yilia theme的Hexo博客功能优化(二)：豆瓣书影音、留言板、访问数量文章数量统计、归档

五一假期，进行第二次博客优化，新增博客分年月存放、博客按年份归档、统计站点文章数目、网站访问数量统计、留言板、接入豆瓣书影音功能

本文首发我的博客-博客更新日志20200501

---

一、博客分年月存放

在根目录_config.xml中修改new_post_name的值

:year/:month/:title.md

这样在使用hexo new xxx时候就会自动按照年月创建文件夹

如下所示

二、博客按年份归档

yilia模板中有自带的归档功能，我们只需要开启就行了

找到yilia的_config.xml文件，在menu下添加

归档: /archives/index.html

即可，如果你想看到实际效果，可以来我的博客归档进行查看

### 三、统计站点文章数目

在yilia\layout_partial\left-col.ejs中加入以下代码

<nav class="header-menu">
    <ul>
    <% for (var i in theme.menu){ %>
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
    <%}%>
    </ul>
</nav>
<nav>
    总文章数 <%=site.posts.length%>
</nav>

加入的位置可以参考

四、网站访问数量统计

在yilia/layout/_partial/footer/.ejs添加以下代码：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

至此，我们的访问数量统计就做好，在最下方就可以看到不蒜子的显示效果了

五、留言板

1. 网站根目录\scaffolds修改文章模板post.md文件，打开在灰色区域添加

   comments: false
   

   此表示文章默认关闭评论区，我们在此处讲留言板功能，所以就不需要每篇文章都拥有评论区

2. 新建留言板页

   hexo new page messages
   

   新建好后，打开source/messages/index.md文件，将comments: false修改为true

   将index.md文件地址添加到模板_config.xml文件的菜单(menu)中路径按照source目录下的相对路径来配置，比如说我的就是/messages/index

   文件目录如下
   
   配置文件如下
   
   
   

3. 注册gitalk Application
   
   此处需要注意的地方就是Homepage URL 和 Authorization callback URL，此处我两个都填的是留言板的地址，也就是域名加上我们在菜单中配置的相对地址

   前者使用是优先于后者的，只有当网页重定向地址和前者不符合的时候才会使用后者

   如果在配置中遇到了问题，可以参考以下博文：

   ​ 1.gitment初始化评论跳回博客首页

   ​ 2.解决配置gitalk插件后初始化登录时跳转回首页

   
   

4. 在yilia模板_configt.xml（配置）文件中（非根目录配置文件），新增gitalk相关的配置

   gitalk:
     enable: true #是否开启
     githubID: 	 #你的Github用户名
     repo: 	 #Github仓库名称 不需要填地址
     ClientID: 	 #创建的Application ClientID
     ClientSecret: 	 #创建的Application ClientSecret
     adminUser: 	 # 评论初始化账户(GitHub ID)
     distractionFreeMode: true # 是否开启分心自由模式 也就是免打扰
   

   
   

5. 在yilia/layou/_partial/post目录下新建gitalk.ejs文件，将以下代码放在里面

   <div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> 
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
   <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
   <script type="text/javascript">
   
   if(<%=theme.gitalk.enable%>){
   	var gitalk = new Gitalk({
     	clientID: '<%=theme.gitalk.ClientID%>',
     	clientSecret: '<%=theme.gitalk.ClientSecret%>',
     	repo: '<%=theme.gitalk.repo%>',
     	owner: '<%=theme.gitalk.githubID%>',
     	admin: ['<%=theme.gitalk.adminUser%>'],
     	id: '<%= page.date %>',
     	distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
   })
   gitalk.render('gitalk-container') 
   }
   </script>
   

6. 修改yilia/source-src/css/comment.scss文件，在#gitment-ctn,后加入 #gitalk-container
   

7. 在yilia/layout/_partial/article.ejs中新增gitalk触发代码

   <% if(theme.gitalk.enable){ %>
     <%- partial('post/gitalk', {
         key: post.slug,
         title: post.title,
         url: config.url+url_for(post.path)
       }) %>
     <% } %>
   

8. hexo g、hexo d之后就可以在网站上看到效果了！可以来我的留言板查看效果
   

六、接入豆瓣书影音功能

1. 在网页根目录下调出git bash执行npm install hexo-douban --save

2. 找到并打开yilia下的_config.xml文件，在menu上添加一个新的路径，可参考我的

   

tip：注意，不管自己增加什么菜单，路径都必须配置为/books

3. 打开根目录下的_config.yml配置文件，将以下配置写入：

douban:
  user: mythsman	
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000 

tip：

• user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：“https://www.douban.com/people/xxxxxx/” ，其中的"xxxxxx"就是你的个人ID了。
• builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true
• title: 该页面的标题.
• quote: 写在页面开头的一段话,支持html语法.
• timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

笔者是这样配置的（只打开了书籍功能）

4. 配置完毕后，我们就要开始使用了

我们先清理生成的public文件：hexo clean

执行hexo douban -b，爬取我们页面上的图书信息（如果你在配置文件中选择了所有信息，此处应该执行hexo douban -bgm（-b：书籍、-g：游戏、-m：电影））

编译、生成public文件：hexo g

发布、部署上云端：hexo deploy（注意：安装了hexo douban后就不要使用hexo d了，因为hexo douban的前缀也是hexo d）

5. 在浏览器中输入域名+/books就可以查看了，可以去我的书架子查看细节。
   

tip：如果出现了页面都是英文的情况，请修改根目录下配置文件_config.xml的语言，如下

---

关于hexo博客优化，你还可以看：
基于yilia theme的Hexo博客功能优化(一)：博客url自定义、目录、博客插入本地图片、首页折叠文章
在hexo博客系统中接入docsify文档管理系统


参考/摘录/阅读更多：
1.Hexo主题yilia增加gitalk评论插件

2.不蒜子计数配置

3.Hexo-yilia主题个性美化及功能添加

4.hexo-douban

文章中有错误的地方欢迎指出，大家共同进步~

字 数：3715/ 完成时间：2020年05月01日 下午