Hey!俺换新的主题了~ 大家感觉新主题如何 ?

之前一直用的是 NexT 主题下的 Mist 风格,从2015年底博客创建开始

最早是在 微信读书团队博客 上看到了这个主题,真是好看的不行,一用就舍不得换,一用就是两年多

这两年多的时间里,NexT 陪着我写了20W+字,50+篇文章

再好看也架不住审美疲劳啦,于是捉摸换一个主题了

选主题其实是一个很纠结的事情,打开 Themes|Hexo 各种选择困难症开始犯病,卧槽挑花眼啊,201种精选主题,我比较喜欢简约,清新的风格,挑来挑去我看上2款

Terminal

其实我是有一点更喜欢 Terminal 的,本身很简洁,很清新,并且创意超级赞啊,多么符合程序员的身份。只是这主题的功能相对来说少,只支持了 Tags/About 页面,没有 Archive/Categories 页面,也没有搜索与评论功能。

这还不是最主要的,可能是因为我的配置姿势不对,又或遇到了啥不知道的 Bug ?我的博客的文章把 Terminal 部署起来后,模板引擎似乎除了点问题,首页 HTML 的下半部分无法渲染,渲染出来10篇文章后首页的 HTML 就被截断,丢失了一堆 Dom,以及 HTML 尾部的 JS/CSS 资源加载。

如果还年轻的时候可能会想抽空把问题解了,还顺带想撸起袖子帮作者把 Archive/Categories 搞定,顺带也搞搞评论什么的。但现在没那个说干就干的激情了,Anatole 我也很喜欢,等看腻了再说吧 ╮(╯_╰)╭

想要预览 Terminal 全貌的同学可以戳这 ->

想要查看 Terminal 代码与配置的同学可以戳这 ->

有同学如果有 Terminal 部署的经验,踩过坑的话求告知~

Anatole

这个也很好看有木有!简约清新又大方!

想要预览 Anatole 全貌的同学看我主页就好啦 ->

想要查看 Anatole 代码与配置的同学可以戳这 ->

进入代码仓库,找到文档按着文档配置安装即可使用,文档还是相当全面到位的,并且还是中英双语文档。Anatole 和 Terminal 都是用的是 Pug(原Jade)模板引擎,不同于 Next Swig,记得按着文档说明安装对应 Node 插件就好了

  • Anatole 把每篇文章标题都强制英文字母大写
  • Anatole 为每篇文章提供了标签与分类的能力,但并没有提供 Tags/Categories 的页面

第一个问题好解决,大写变化是通过 CSS 控制的,在主题代码中 style.cssstyle.scss 2个文件,搜索其中的 text-transform css 属性,把值为 uppercase 的通通注释掉,就完事了

第二个问题嘛,因为 Pug 模板引擎我没那么熟,忍忍先这样啦,啥时候有兴致了在捣鼓捣鼓,或者啥时候有兴致了,直接去捣鼓 Terminal 了,哈哈哈哈

Gitment

评论一直是我博客的一块心病

  • 最早用多说,结果多说停服了
  • 尝试切网易云跟帖,结果不支持github.io,后来听说网易云跟帖也停服了
  • 切友言,结果友言停服了
  • 切Disqus,需要翻墙
  • 切来必力,棒子的服务器,天天TMD挺卡,凑合用

去年年底就听说有人拿 Github Issue 搞评论,趁着这次折腾博客,干脆玩一发,于是开始捣鼓起来

Gitment:使用 GitHub Issues 搭建评论系统

Anatole 与 NexT 都有很多家评论的现成功能,只需要配置对应的 id 与 key 到 theme 的 _config.yml 文件中即可。但 Gitment 还是需要把链接中的代码与主题的评论模块结合一下,才能生效

按着说明文档一步步来

  • 注册 GitHub OAuth Application

第一步没啥好说的

  • 部署引入 Gitment 代码

第二步想要把 Gitment 引入 Anatole,需要先在 theme 的 _config.yml 文件中加入 Gitment 的配置信息

1
2
3
4
5
gitment:
owner: /*你的Git ID*/
repo: /*保存评论的GitHub Repo*/
client_id: xxxxxx
client_secret: xxxxxxxxx

然后找到 layout/partial/comments.pug 模板文件,在里面添加 Gitment 的相关代码即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if theme.gitment
div(id='container')
link(rel="stylesheet", href='https://imsun.github.io/gitment/style/default.css')
script(src='https://imsun.github.io/gitment/dist/gitment.browser.js')
script.
var gitment = new Gitment({
id: '#{page.title}',
owner: '#{theme.gitment.owner}',
repo: '#{theme.gitment.repo}',
oauth: {
client_id: '#{theme.gitment.client_id}',
client_secret: '#{theme.gitment.client_secret}',
},
})
gitment.render('container')

第一次用pug模板,感觉跟swig模板差距好大,╮(╯_╰)╭

注意这里有一点:id: '#{page.title}', 这一行在 Gitment 官方文档上写着缺省,可以不填写,这个值就是用来识别评论所归属文章的 id ,如果直接不填写就会默认用当前文章所在 Url 进行存储。

但这里有个坑,GitHub 的 Issue 的 Title 名字限制在50个字符以内,如果使用 Url 很容易超出 GitHub 的限制,导致评论初始化失败,因此被我改成了 id:'#{page.title}',

  • 初始化评论

第三部,在进行之前要求你把页面部署到远端,在本地 localhost 模式下是无法进行的。

部署到远端后,每个文章下面就会出现一个 Gitment 的评论区UI,但当时是不可用状态,先登陆 Github 账号,再点击 init 按钮,当前文章的评论就开启了

Tips:

每次初始化只初始化当前文章的评论,每一篇文章都要初始化一次

如果没有写 id:'#{page.title}', 直接缺省,当 url 超过50字符会导致 init 评论失败

每篇文章都要点一次 init 有点蛋疼,其实可以自己写脚本完成

  • 评论功能生效

  • GitHub 上的评论数据