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/
推荐阅读
-
Hexo中Next主题的简单个性化
-
Hexo NexT主题简单配置以及文章发布详解
-
2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈
-
给hexo主题添加背景及更改字体颜色(next的Mist主题)
-
Hexo博客主题NexT使用自定义的CSS样式_html/css_WEB-ITnose
-
Hexo博客主题NexT使用自定义的CSS样式_html/css_WEB-ITnose
-
Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(三)
-
GitHub中Hexo next主题下搭建的博客中增加PDF插件
-
2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈