為Ghost博客擴展代碼高亮、數學公式、頁面統計、評論

前幾天搗鼓了一下博客首頁，接下來再豐富一下博客頁面的功能與內容。由於我所使用的Ghost博客專注於輕量簡潔，因此標題中提到的功能在Ghost中默認均不支持。下面將逐個介紹一下如何為Ghost擴展這些功能。

代碼高亮

代碼高亮的方案很多，我在Hexo的某個主題上注意到了highlight.js這個插件。

這個插件默認支持23中主流編程語言以及100多種代碼高亮主題，基本滿足你的需求。還不滿意？你可以在官網選擇你希望支持的編程語言進行定制。

我使用官網介紹的CDN方式嵌入highlight.js。在網頁head標簽下插入下面兩行代碼：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

其中第一句下載的是主題樣式文件，default是默認主題，我自己改成了monokai-sublime。

然后在body結束位置插入啟用代碼即可，插件可以自動檢測代碼所使用的語言。

<script>hljs.initHighlightingOnLoad();</script>

更多配置可以查閱其官網，不在此贅述。

下面展示一下簡單的JavaScript代碼被高亮后的效果：

 

代碼高亮效果

 

數學公式

引入數學公式支持是考慮到接下來我將可能寫一些數學相關的文章。目前發現MathJax是口碑比較好的插件，其使用方法也很簡單。

使用CDN方式在網頁head插入MathJax的代碼就完成安裝工作。

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>

使用的時候MathJax默認會識別兩種標記$$ ... $$和\( ... \)，並把其中的內容當成數學公式處理。這兩種標記的區別：前者獨立成行顯示，如p標簽；后者作為行中的一部分，如span標簽。

需要提醒使用MarkDown寫博客的人，反斜杠需要轉移，即\( ... \)需要寫成\\( ... \\)，否則會MathJax會找不到內容。

MathJax針對這種情況提供了自定義起始標簽的配置功能。在引入代碼的位置插入配置內容即可。我這里使用$- ... -$代替默認的\( ... \)如下：

<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>

下面舉個例子：

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}.$$

它的顯示結果如下： 

MathJax顯示結果

頁面統計

這里提到的頁面統計專指在網頁中顯示網站的訪問量，請注意區別於類似百度統計等數據分析平台。

在知乎和V2EX上看到網友推薦使用LeanCloud的比較多。這種方案相當於使用遠程數據庫做統計服務接口，需要額外多做一些工作。

我比較懶，希望能夠找到一種簡單代碼注入就能實現的方案。在知乎的角落里看到別人介紹了不蒜子busuanzi.ibruce.info。

看它的官網覺得更像個個人網站，目前未對外開放注冊。反正這些I don't care，它號稱兩行代碼就能顯示統計內容完全滿足了我的需要，因此就選擇它了。

第一步：安裝代碼的方式：

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

第二步：在合適的地方顯示統計信息（自己根據id選擇需要的字段）

<!-- 整站統計 -->
<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>

評論

前些年多說幾乎遍布每個個人網站，在此之前我也用過多說。但隨着多說和網易雲跟帖的倒台，我才開始關注其他的替代品，如暢言(需備案)、dispus(需翻牆)、來比力等。綜合考慮，我選擇了來比力livere.com。

進入來比力官網首頁，點擊導航欄上的安裝，選擇City版（適合個人的免費版本），點擊現在安裝，提示需要登錄（沒賬號先用郵箱注冊）。

 

來比力City版

 

然后輸入網站的基本信息即可生成代碼。把代碼插入你的網頁適當的位置即可。

下次登錄來比力官網可以進入你的管理后台查看和管理評論數據，如下圖：

 

 

來比力管理后台

本文同步博客