Ghost页面统计、代码高亮、数学公式组件引入

ghost部署好后,日常使用中还会涉及代码,或者数学公式的情况,访问统计也是网站不可或缺的一部分,所以需要自己动手将该类插件进行补全使用,参考 chardlau 这大哥里面的文章,不过网站现在已经访问不了。

页面统计

通过搜索发现 不蒜子 使用是最多的,简单,方便,易用,还免费。
1 Ghost后台 Code injection 中,将 复制到 Site Header 中即可,
2 使用时,找到自己模板需要展示的位置进行代码展示,如:

<!-- 整站统计 -->
<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
<!-- 单页面统计 -->
<span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
  本文访客数<span id="busuanzi_value_page_uv"></span>人次
</span>

代码高亮

highlightjs 是博客中最常使用的高亮js,主题样式多,引用方便,非常符合coder胃口。写该文章时候版本号是9.17.1,使用主题是:monokai-sublime
所以根据此版本举例:

1 Ghost后台 Code injection --> Site Header 保存内容:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/monokai-sublime.min.css">
2 Ghost后台 Code injection --> Site Footer 保存内容:
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
3 使用时候和引入MarkDown一样 上下 三个 ` 包含里面就可以

数学公式

数学公式好哇,真有公式写出来,一看就是正经人啊,其实主要还是能明确表达对应的内容,什么圆周率,相对论啊,但凡知道的都可以直观的表达出来,主要使用插件为:MathJax,官网解释的可是Rich API。不多说,show 操作:

说明:最新版本为3,本次使用的是2.7.2版本,因为要兼容MarkDown要修改注释方案,但是没有测试成功,所以使用了2.7.2版本
1 将script放入 Ghost后台 Code injection --> Site Footer 保存内容即可 :
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
        MathJax.Hub.Config({
                tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
        });
</script> 
2 测试内容为
When $ a \ne 0 $, there are two solutions to $ ax^2 + bx + c = 0 $ and they are
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
3 将上述内容复制到文章里面,保存打开即可看到效果

When $ a \ne 0 $, there are two solutions to $ ax^2 + bx + c = 0 $ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

4 使用MarkDown写博客的人,反斜杠需要转移,即\( ... \)需要写成\\( ... \\),否则会MathJax会找不到内容。
MathJax针对这种情况提供了自定义起始标签的配置功能。在引入代码的位置插入配置内容即可。我这里使用$ ... $代替默认的\( ... \)
5 $$ ... $$ 为换行显示公式
6 该版本如果需要转换的前面为换行符号也不会对公式进行转义
小捐怡情,大捐感激,点下广告也是极好的