Hexo中Next主题的简单个性化

差不多有一年多没有折腾博客了，最近想着还是要重拾写博客的这一习惯，所以就动手将hexo重新折腾了一番。

1.评论系统

本来Next主题中是默认支持多说和Disqus的，但是多说已经关闭了，而且Disqus也被墙了，其他的一些评论系统用户量又不是很大，碰巧在github上看到了两个基于issue的评论系统gitment和comment,就想着在Next中也给配置一下，开始还在两个系统中纠结了一番，最后还是选择了gitment。配置过程其实还算挺简单的，直接按照官方文档的步骤来就可以了。中文文档

1. 在github中注册 OAuth App

这里调用了github中的API，所以需要注册一个 OAuth application
将相关信息填写完整，Authorization callback URL 填要应用的站点地址。 （如：https://whjkm.github.io/）
完成注册后，会得到两个值：client id和client_secret,这两个值后面在页面中需要用到。

2.获取 Gitment代码

开始对Next的结构不熟悉，不知道应该将这段代码插到哪个文件中去，将范围缩小到themes/next/layout/这个文件夹，最先尝试是将代码插入到了themes/next/layout/page.swig文件，发现在每个页面中都有评论框了。我这里只想实现在post页面能够显示评论框，所以最终是将代码插入themes/next/layout/post.swig图示代码之后。本来还想about页面也实现这个功能，但是Next没有默认的about页面，这个功能就留到以后自己折腾吧。

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo',
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

3. 初始化

将页面发布之后，第一次使用需要使用Github账号登陆，确保和第二步所填 repo 的 owner保持一致，然后点击初始化就可以尽情使用啦。

2.添加 README.md

之前提交到github上就发现了这个问题，提交之后就发现没有README.md文件了，一时也没有想到解决办法，恰巧看到一篇博客介绍了这个问题；使用hexo配置文件config.yml中的skip_render参数，skip_render参数是用来跳过那些不用hexo渲染的文件。将参数设置为README.md，更新重新发布就可以了。

skip_render: README.md

3.添加小图标

Next主题支持自定义social link,默认的选项有Github，weibo，twitter，这里在侧边栏自定义添加了douban和csdn，也可以自定义添加其他链接。Next中使用的是fontawesome图标库，在其中选择喜欢的图标，将图标的名字复制到Next的配置文件config.yml中的social_icons部分。

4.添加访问量

Next中默认使用了不蒜子统计访问量，只需要在配置文件中修改就行了，有总访问量、总访问人数还有每篇文章的访问量。

直接修改Next的配置文件config.yml，将enable参数修改为true,后面的site_uv_header表示的是CSS图标，这个也可以进行自定义。

参考的文章

https://blog.csdn.net/qq_33699981/article/details/72716951
http://www.hahack.com/codes/comment-js/
https://imsun.net/posts/gitment-introduction/