对 Ghost 做了一些微小的工作：添加 Disqus 评论模块、highlight.js & Mathjax

文章目录

一直比较喜欢轻量级的程序，所以当时要搭建博客的时候就选择了 Ghost，很多东西都可以自定义，然后下午就根据自己对于一个博客平台需要的其他功能做了一些微小的优化。也没什么别的，大概三件事：

一个，添加了 Disqus 评论模块
第二个，把 Mathjax 加载进了网页
第三个，就是我们知道的 “代码块语法高亮”

如果说还有一点什么就是代码一律用等宽字体！这个对代码的显示有很大的关系。还有加上的十几行 CSS 也是很大的。但这些都是次要的，我主要的我就是三件事情，很惭愧，就做了一点微小的工作，谢谢大家。

Disqus

Disqus 有通用嵌入代码，只要把它加进页面即可，对于 Ghost 的博客平台还是比较方便的，而且 Ghost 官方也有给说明文档

首先需要找到博客文章的模板文件 post.hbs，这个文件在 Ghost 主题目录下，对于默认主题也就是 {Ghost-Dir}/content/themes/casper/

拿到了通用嵌入代码块之后需要找一个合适的放评论模块的位置，我最后的决定是放在 </footer> 和 </article> 的中间，也就是作者信息之后，文章区域结束之前

还有一点是建议配置的两个变量：url 和 identifier，关于这一点 Disqus 也有给说明，大意是防止在形式上不同的网址可以进入相同页面的情况下，由于评论仅由网址定位而导致一篇文章后的评论分离在几个不同的网页上，然后需要用迁移工具或者其他方式解决，造成不必要的麻烦

比如某个网页提供了 https 链接，但是同时也允许 http 的访问，这就导致了用不同的协议访问同一个页面，由于网址的不同 Disqus 认为是两个不同的网页而分开存储评论

另一个常见的例子就是很多网站都开了对 www 和不带 www 的解析，并且解析到相同的网页，可能由于个人访问网页的习惯不同也会导致上述情况发生

不过其实我在配置 SSL 的时候已经做了全部的重定向，也就是只能访问不带 www 的 https 页面，其他请求都会被重定向到此，所以理论上并不用怎么担心这个问题，不过毕竟也就几行代码，为了后期少有麻烦还是加上了 hhh

最后那部分嵌入的 HTML 代码大概是这个样子的：

{{!-- Disqus Commets --}}
<div id="disqus_thread"></div>

<script>  
    var disqus_config = function () {
        this.page.url = '{{url absolute="true"}}';
        this.page.identifier = 'ghost-{{id}}';
    };

    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://disqus-shortname.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>  
{{!-- /Disqus Commets --}}

其中的 disqus-shortname 应该是在选择安装 Disqus 到自己网站的时候设置的那个 shortname

Ghost 使用文章的 ID 作为了验证评论归属的方式，也就可以保证一篇文章唯一对应着一个评论区

改完后保存再重启一下 Ghost，查看一下文章页面就可以发现加载进的 Disqus 评论框了

Why Disqus

最后谈谈为什么选择 Disqus 吧

就我个人而言，对评论模块的需求大致是这样子的：

滋瓷免登陆评论
也就是匿名评论、以游客身份发表评论，填写好署名和留言等基本信息即可发布，可以不需要登录注册或者其他乱七八糟的强制要求
滋瓷数据导入导出
在更换评论系统甚至更换域名的情况下应该要不至于丢失原有的那些评论数据，当然最好是能够很方便进行导入导出
滋瓷邮件通知
如果填写了邮件并且允许接收通知或者直接登录时，应该要能在留言被回复等情况下收到邮件通知
滋瓷 Gravatar 头像
头像也是很重要的！能够滋瓷 Gravatar 头像当然是一件非常好的事情，这样填好电子邮件就可以加载到头像，而且也不用看着可能出现的的满屏默认头像，那样实在有点太闷了
滋瓷链接到自己的网站
填写了网站链接时，点击评论的头像即可链接到自己的网页

当然也不是一定要全部满足啦，其实一直也有在考虑用什么评论插件，看完上述五个相信也能知道我最开始是很喜欢大部分的 WordPress 博客提供的那种评论功能，也就是填好评论提交即可，头像根据电子邮件地址加载，然后还可以填链接到自己的网页。不过后来发现通过这样的方式留下的评论，发出之后就很难进行后续的更改、删除等操作，因为发布的时候就没有验证，也就不能对编辑修改操作再进行验证了。当然万一写错了可以直接联系管理员修改。

后来再找了找，最后还是决定用 Disqus 了，缺陷当然是墙内无法访问，但是相对而言用户多，也就是意味着一个账号就可以在所有同样使用 Disqus 的评论模块里发布留言以及方便地进行后续操作，毕竟我觉得评论的修改权还是应该主要属于发布者的

然后另一个吸引我的地方就是查了下发现是有提供评论迁移这个功能的，大部分评论插件应该也都有（实在不行直接自己导出再导入数据库也可以吧 2333）总之不用太担心换域名之后会丢失一些比较重要的东西

最后还有一点就是 Disqus 也提供了 guest 模式，也就是同样可以不登录进行评论，而且因为不太喜欢看到默认的那个头像图，我给没设置头像的评论者默认设置成了 Baymax 嘿嘿嘿

Highlight.js

首先是加载 CSS 和 JS 代码，建议使用 CDN ，顺带安利一波 BootCDN（

我把加载的代码放在了和 post.hbs 同目录的 default.hbs 文件里，Mathjax 也同样放进了这个文件

在链接 CSS 代码的位置（写有 {{!-- Styles'n'Scripts --}} 的区块）加上这一段：

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/monokai-sublime.min.css">

其中主题可以根据自己的喜好选择，我个人一直比较喜欢 Monokai 的配色，如果需要更换可以自己找到对应的 CSS 文件地址然后更改加载代码

在链接 JS 代码的位置（写有 {{!-- The main JavaScript file for Casper --}} 的区块，尽可能往后放）加上这一段：

<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>

然后重启一下 Ghost，代码区块应该就可以高亮显示了，此外为了方便 Highlight.js 不判断错语言，也为了规范性，建议在用 Markdown 写代码块的时候指定好语言

但是实际上的效果也不是很完美，比如一段简单的 C++ 代码的显示是这个样子的：

/*
    A Hello World Program in C++
*/

#include <cstdio>
#include <iostream>
using namespace std;

int main(int argc, char const *argv[])  
{
    int num = 233;
    printf("Num: %d\n", num);

    cout << "Hello World!" << endl;
    return 0;
}

在 Sublime Text 下的效果如文章标题图片所示，还是有不少差别的

不过这也已经足够满足大部分的使用情况，而且确实漂亮多了

另外一个自己做的更改是让网页的代码全部使用等宽字体，由于涉及的更改较多我就直接重写了这一部分的 CSS 然后用 !important 属性覆盖了

找到需要的等宽字体（要注意版权问题），放进 {Ghost-Dir}/content/themes/casper/assets/fonts 里面然后修改 CSS 文件加载进字体文件并进行相关修改

在 {Ghost-Dir}/content/themes/casper/assets/css/screen.css 的开头加上这些：

/* Extra Code Added By Kingsley, 20170627 - Start */

@font-face {
    font-family: SourceCodePro;
    src: url('../fonts/SourceCodePro-Regular.ttf.woff');
}
pre {  
    border: none !important;
    background: 0 !important;
}
code {  
    font-family: SourceCodePro !important;
    border-radius: 3px !important;
    line-height: 1.3em;
}

/* Extra Code Added By Kingsley, 20170627 - End */

保存好就可以看看效果了，其实除此之外我还改了不少 CSS（逃，比如把行内代码的颜色、区块引用的格式什么的改了改，以及在写 git-game 和 git-game-v2 的时候发现线太宽了之类的也 xjb 做了点修改~~，但这些都是次要的，我主要的我就是改了下这个代码的显示~~

如果在控制台查看 screen.css 文件就可以看到所有的修改，我对于每次修改都是加了日期和时间、留着原来的值的，遵循尽可能只增不删的原则~~，不过你要是闲成这样那可真是吃饱了撑的（再逃~~

比较有趣的一件事是当我想拿到这段 CSS 代码的时候无意中看到文件末尾的这个：

End of file. Animations should be the last thing here. Do not add stuff below this point, or it will probably fuck everything up.

嘿嘿嘿

Mathjax

Mathjax 的设置就很简单了，如果是用 CDN 的话只需要直接引入一个 js 文件

和 Highlight.js 一样，我还是把这部分加载的内容放进了 default.hbs

此外，由于不太喜欢左下角显示的 Mathjax 加载进度等信息，我也自己加了一点自定义的配置，更多其他有关 Mathjax 的配置选项可以参考官方文档

配置信息需要写在文件加载的代码之前，并且 <script> 标签内的 type 值要设置为 text/x-mathjax-config，否则会在主 JS 文件加载之前默认被当成 JavaScript 代码执行而报错：

<script type="text/x-mathjax-config">  
    MathJax.Hub.Config({
        messageStyle: 'none',
        showProcessingMessages: false
    });
</script>  
<script async src="https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>

用 async 是为了使 Mathjax 异步加载，防止对网页的加载时间造成太大影响

加入 Mathjax 主要是考虑到可能偶尔难得会需要打上什么数学公式，比如 $ 1 + 1 = 2 $ 或者 $ y = x ^ 2 $ 什么的（逃

还有一点就是移植的方便，毕竟只要有公式的 TeX 源码，直接复制粘贴就可以了

如果需要把网页中的公式复制到 LaTeX 之类的话，可以在页面内右击公式，选择 Show Math As -> Tex Commands 导出成 Markdown 解析后的 TeX 命令，即可同样作为 TeX 命令进行解析

Mathjax 数学公式的语法和 TeX 相同，这里就不介绍了~~毕竟我也不太熟~~，书写格式按照不同的需求分为以下两种：

inline 即行内格式写在 $ 和 $ 之间
displayed 即独立格式写在两个 $$ 之间或者 \[ 和 \] 之间

由于 $ 符号可能比较常用，放在两个 $ 中间显示行内公式的方式容易造成误判，默认是不滋瓷这种方式的公式书写的，如果有需要的话可以参考这里把加载的代码改为：

<script type="text/x-mathjax-config">  
    MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
        messageStyle: 'none',
        showProcessingMessages: false
    });
</script>  
<script async src="https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>

效果如下：行内公式 $ 1 - \sin^2\theta = \cos^2\theta $ 以及独立的区块公式：

$$ \left [ – \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi $$

~~这公式是官网抄来的，我也不认识~~
对更多美丽的数学公式有兴趣的话可以直接去看 Mathjax 官网给的一些例子（逃
（P.S. 似乎不挂代理的情况下网站加载很慢）

如果测试过几个常见的公式就会发现 Markdown 和 Mathjax 其实是有一些冲突的问题的，这一部分内容本来是连同 ~~xjb 发现的~~一些解决方案一起写在这一块里面的，但是后来越写越长，觉得还是单独拿出来比较合适，所以有关的情况请参考下一篇文章：关于 Markdown 与 Mathjax 的冲突问题及几个解决方案

Menu

Disqus

Why Disqus

Highlight.js

Mathjax