调教Hexo[4]——记一次费劲的改版...

其实大概是因为我太笨Orz… 又双叒叕是一篇没有营养的文章.

很早就发现之前用的 yelee 主题中的 git 图标不能用了，前几日又发现无序列表的符号也挂掉了？？这可不能忍… 然而我又不想花时间折腾主题本身，加上搜索功能一直没有配好的积怨，决定干脆换一个主题.

这个 NexT 主题好像看起来不错！就是它了！

随后就是很多问题…佛了.

所以在这里把一些（能想起来的）问题简单记一下。

Tags和Categories页面无法正常显示的问题

在最初更换主题后，tags 和 categories 页面只有一个光秃秃的标题，下面的链接全部消失了… 我以为是页面没有生成好的问题，于是先运行 hexo clean 再运行 hexo g，然后重新 hexo s.

然而并没有什么效果！吓尿的我赶紧 ~~重试了n发~~ Google了一下，大概是搜索姿势问题，这个问题不太容易准确描述… 费了一通劲，终于查明白了：只需要在这两个页面中分别加入一句话就可以了.

完整的构建过程如下（只以 tags 为例，categories 同理）：

先在终端中键入
1
hexo new page tags
然后在 /source 目录下会生成一个 /tags 子目录，内含一个 index.md 文件，其初始内容为：
1
2
3
4
---
title: tags
date: yyyy-mm-dd hh:mm:ss
---

只需添加一行 type: tags 即可. 即改为：

---
title: 标签
type: tags
date: yyyy-mm-dd hh:mm:ss
---

如此操作后，tags 页面即可正常显示. categories 页面也是同理.

Mathjax显示问题

这个问题我认为是 NexT 主题的锅.

像我这样的一个网站，mathjax 的重要性不言而喻… 没有 mathjax 我这个网站简直可以直接关掉了. 于是这是我刚换了主题就立刻着手配置的东西.

在 NexT 主题的配置文件 _config.yml 中关于 mathjax 的内容如下：

# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:
  enable: false
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

按照其文档所描述，只需将 enable: false 改为 enable: true 即可. 然而我照做后，发现文档中的 mathjax 公式只能短暂地正常显示几秒，就会变成一堆不知道是什么的小方块…

看到这个情况以后我很慌张… 冷静了一会儿之后开始思考这个问题的成因… 最初没有想到是 NexT 主题的问题，感觉可能性比较大的也就是这么几个：

是 Google Chrome 浏览器的问题，辣鸡 Chrome 无法正常显示 mathjax 公式.
- 检查方案：换个浏览器打开 localhost:4000 试试；
- 检查结果：其他浏览器显示的也是一堆小方块…GG！
既然不是 Chrome 的锅，那就是我配错了！
- 检查方案：找找其他用了 NexT 主题的网站，看看是否有同样问题；
- 检查结果：找这个有 LaTeX 公式的 NexT 网站就费了老鼻子劲… 然后发现也是一堆小方块… GG again！
和卜凡大神讨论了一下，可能是 mathjax 被墙了？
- 检查方案：墙个屁啊…可能么？链接都能打开怎么可能是墙了… one more GG！

三个我认为比较可能的问题都不存在… 这让我陷入了短暂的蒙蔽… 回过神来以后，我感到我对于我最初做的假设“主题本身没有错”产生了一丝怀疑，联想到 yelee 主题仍然能正常显示 LaTeX 公式，我查了一发 mathjax 的配置方法，然后发现 cdn 和这里的不一样…

于是我在某篇文章中加了另一个 cdn，这篇文章便能正确加载 mathjax 了… 我简直佛了，于是进行了如下修改，mathjax 即能正确加载.

# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

动画特效canvas-nest配置

文档中提供的方法为：在配置文件中将 canvas_nest 一项改为 true ，我照做了，然而并没有什么效果.

单页的配置方法很简单：在文章中加入以下字段即可：

1	<script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>

若想在所有页面均启用该特效，则须修改 _layout.swig 文件：

在_layout.swig 的 body 中添加如下字段：

1
2
3

{% if theme.canvas_nest %}
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
{% endif %}

然后依次运行 hexo clean, hexo g 和 hexo s / hexo d 即可看到特效.

搜索功能的配置

按照文档中的方法进行操作即可成功配置，治好了我多时没有在 yelee 中配好搜索功能的心病…

注意：不需要在 _config.yml 中添加 search 项，否则侧栏中将会出现两个“搜索”.

评论功能的配置

Gitment

之前的版本配置了多说评论，然而不久多说就GG了，加上 disqus 疑似被墙… 之后一直没有再弄评论. 既然改版了，顺手配了一个 gitment 评论，如有错误欢迎批评.

配置很简单：

在 https://github.com/settings/developers 申请一个 application, 按照如下内容填写申请即可：

Application name：Gitment
Homepage URL：https://网站地址/
Application description：Blog comment system
Authorization callback URL：https://网站地址/

然后在 github 新建一个仓库用来存评论，比如叫做 gitment-comments.

在主题配置文件 _config.yml 中填写 gitment 相关内容即可完成配置.

gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: zh-Hans # Force language, or auto switch by theme
  github_user: lzcwr # MUST HAVE, Your Github ID
  github_repo: gitment-comments # MUST HAVE, The repo you use to store Gitment comments
  client_id: 在申请好application的页面中有 # MUST HAVE, Github client id for the Gitment
  client_secret: 在申请好application的页面中有 # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

又双叒叕失败了！

正当我满心欢喜意为自己配好了 Gitment 的时候，突然感到事情太顺利了（？）于是决定测试一下评论. hexo d 部署完毕以后，我在本文的后面尝试了一下用 github 账号登录.

然而！报错了！报错信息为 [object ProgressEvent].

我赶紧去 gitment 的 issue （参见https://github.com/imsun/gitment/issues/170）里翻了一下，果然很多人有这样的问题…

大致阅读了一下，原因应该是 gitment 作者自己的网站的证书到期了，而 gitment 需要以此为接口，故会报错… 按照里面的一些方法进行了修改，但是似乎没有什么效果…

怎么办！换吧…

Gitalk

换什么呢… 开始自闭… 对哦！然想起来望望同学的博客里面用的好像是 github issues 评论！

赶紧去翻翻是不是 gitment… 噢，原来是 gitalk… OK！就是它了！

配置方法

附一个 gitalk 的官方demo：https://gitalk.github.io/
官方 github 仓库：https://github.com/gitalk/gitalk

NexT 主题中并没有集成 gitalk 功能，需要自己手动添加.

首先肯定还是要在 github 上申请一个 application，具体步骤见上.
其次肯定还是要在 github 上建立一个 repository，具体步骤不多啰嗦.

在 /layout/_third-party/comments/ 目录下新建 gitalk.swig 文件，内容如下：

{% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.owner }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
    </script>
{% endif %}

修改 /layout/_partials/comments.swig，在最后一个 elseif 后添加如下字段：

1 2	{% elseif theme.gitalk.enable %} <div id="gitalk-container"></div>

添加后的 comments.swig 应如下所示：

  {% elseif theme.gitment.enable %}
    <div class="comments" id="comments">
      {% if theme.gitment.lazy %}
        <div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
        <div id="gitment-container" style="display:none"></div>
      {% else %}
        <div id="gitment-container"></div>
      {% endif %}
    </div>

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
  
  {% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>

  {% endif %}

{% endif %}

修改 /layout/_third-party/comments/index.swig，在其末尾添加如下字段：
1
{% include 'gitalk.swig' %}

设置 gitalk 的样式，参考¹：在 /source/css/_common/components/third-party/ 目录下新建 gitalk.styl 文件，内容如下：

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改 /source/css/_common/components/third-party/third-party.styl 文件，在末尾添加如下字段：
1
@import "gitalk";

最后在主题配置文件 _config.yml 中添加如下项：

gitalk:
  enable: true
  owner: 你的github帐号  # lzcwr  
  repo: 存放评论的仓库名称   # Gitalk-comments
  ClientID: 在申请好application的页面中有
  ClientSecret: 在申请好application的页面中有
  adminUser: 你的github帐号 # 可初始化评论的账户
  distractionFreeMode: true

完整无误地完成上述步骤后，在本地即可看到 gitalk 的按钮. 但本地不能用，必须要 hexo d 部署完毕后才能使用.

你以为这样就完了吗？那可未必…

Error: Validation Failed 解决方案

参考了：处理Gitalk中由于文章URL过长导致的Validation-Failed(422)

部署完毕后我试了一下，又gg了！又双叒叕翻了一下 issues，发现是文章 URL 过长导致的（坏习惯，用中文做标题Orz… 中文会被编码成很长的串…）. gitalk 支持的长度只有50，难道我要一个一个改标题么？不能忍… 于是 google 了一大通，最终受到上述文章启发，决定用其 md5 码代替文章标题.

注意到前文所添加的 gitalk.swig 文件中的段落：

<script type="text/javascript">
    var gitalk = new Gitalk({
        clientID: '{{ theme.gitalk.ClientID }}',
        clientSecret: '{{ theme.gitalk.ClientSecret }}',
        repo: '{{ theme.gitalk.repo }}',
        owner: '{{ theme.gitalk.owner }}',
        admin: ['{{ theme.gitalk.adminUser }}'],
        id: location.pathname,
        distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')           
</script>

var gitalk 中有一项为：

1	id: location.pathname,

这里正是索引的地方，我们只需要添加一个 md5 的函数，然后将其改为 md5(...) 即可.

我用的是 https://github.com/blueimp/JavaScript-MD5/blob/master/js/md5.min.js，更改完毕之后的 gitalk.swig 文件如下：

{% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="/js/md5.min.js"></script>
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.owner }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: md5(location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
    </script>
{% endif %}

这样好像就彻底搞好了？~~我这乌鸦嘴可还行==~~

关闭评论的页面

在需要关闭评论的页面加一句 comments: false 即可.

PDF插件配置

不多说了，参见 https://pdfobject.com/
官方 github 仓库：https://github.com/pipwerks/PDFObject

https://asdfv1929.github.io/2018/01/20/gitalk/↩