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.css 与 style.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 还是需要把链接中的代码与主题的评论模块结合一下，才能生效

按着说明文档一步步来

第一步没啥好说的

部署引入 Gitment 代码

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

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

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

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 上的评论数据

折腾范儿の味精

博客重新装修： Anatole + Gitment

Terminal

Anatole

Gitment