來源:docs.like.co來源:docs.like.co

自從用 Hexo 建立自己的 blog 後不久,就有認真思考過要不要在文末加上 LikeCoin 按鈕,但一直都沒有行動。原因大致有二:

  1. 重視美感,覺得 LikeCoin 按鈕和 blog 整體風格似乎有點不搭。
  2. 覺得拍手前的登入程序頗為麻煩,連我自己可能都懶得登入,又怎麼能夠期待收獲別人的拍手呢?

基於上述兩個理由,即使後來方格子、Medium 等平台以及更早的 WordPress 都已經陸續支援了 LikeCoin 按鈕,我還是興趣缺缺。

但為什麼後來又回心轉意了呢?原因有點特別。

轉折——「相關文章」功能

過年期間,我苦於 blog 單篇文章頁面內的「坪效」太差,怎麼說呢?

以下指的都是「桌面版」網頁,手機版的顯示空間本來就有限,所以版面呈現上差異不大。

以友人 Jun 的這篇〈【Notion】Notion+ 標記管理器,快速匯出筆記重點〉為例,從文內的版面就可以看到典型 WordPress 排版:左邊有「熱門文章」連結,而文末有「你可能也會有興趣的其他文章」連結。

換句話說,頁面除了本文外,還會配置不少「站內連結」,除了增強 SEO,也能讓從搜尋引擎進來的新朋友,有機會直接看到站內其他可能也會感興趣的文章,這就是我所謂的「頁面的坪效」——好不容易吸引讀者點進來了,總不希望對方看完眼前的文章就速速閃人哩!

唉呀!我也好想要有「相關文章」這樣的功能,這不是理所當然應該要有的嗎?而且很多 Hexo 主題也都有,可是我選的主題偏偏就是沒有!

只能按照網路上的教學,自己使用套件(hexo-related-popular-posts)加上改模版,把它給刻出來,第一版大致如下:

第一版我叫它「類似標籤文章」第一版我叫它「類似標籤文章」

感覺效果還不錯!外掛會依照有相同標籤的文章自行幫你推薦,我設定最多只顯示 3 篇,以免失焦,而且我很喜歡這樣的呈現,簡潔不失美感,但後來發現一個問題。

為了區別內文的結尾和「相關文章」區塊,我在兩者中間額外加上了一條分隔線,這就造成了我的苦惱,因為我常常在最後一大段——小結——之前,也使用分隔線,如果小結的內容不多,就會在短短的篇幅範圍內使用了兩次分隔線

這密集出現的分隔線,在我看來就像函式中有重複的程式碼段落卻沒有進行重構合併一般——讓我混身不自在:

雖然應該沒什麼人會在意,但我就是看不順眼,怎麼辦才好?

沒錯,我想到了使用 LikeCoin 按鈕的整個 widget 區塊作為一種另類的分隔線

為 Hexo 安裝 LikeCoin widget

既然有這樣的想法,第一個問題便是「Hexo 能裝 LikeCoin widget 嗎?」

答案是:當然可以。

不過資料並不多,你孤狗一下,顯然官方文件的教學已經是最全面的了,儘管它也是收集、引用別人的文章。

我主要還是參考這篇被文件引用的〈在Hexo NexT增加like Button〉,比較可惜的是,本篇文章是基於 Hexo 中最知名的 Next 主題,該主題用戶眾多,對常見功能都有高度的整合。但如果你跟我一樣不是用這個主題的話,很抱歉,還是要稍為手刻一下——就是要改模板內容啦!

因為才剛實作完「相關文章」區塊沒多久,記憶猶新,我便想到乾脆就把 LikeCoin widget 的程式碼也一起塞到相關文章的 swig 模板裡,也就是把它們在呈現上綁在一起,畢竟它們通常是「同進同出」沒錯,模板的 HTML 長這樣:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
<script type="text/javascript">
document.write(
"<iframe scrolling='no' frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' style='height: 212px; width: 100%;' src='https://button.like.co/in/embed/[LikerID]/button?referrer=" +
encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
</script>
<div>
♠︎
<b>
相關文章
</b>
{%- if theme.popular_posts.enable -%}
{{ popular_posts( { ulClass: 'popular-posts', maxCount: theme.popular_posts.maxCount, PPMixingRate: theme.popular_posts.PPMixingRate, isImage:theme.popular_posts.isImage } , page ) }}
{%- endif -%}

「♠︎」之前的部分,就是 LikeCoin widget 的程式碼,從上述官方文件複製而來,其中[LikerID]記得要改成你自己的 Liker ID。

雖然每個主題的手刻方式略有不同,但也大同小異,只能靠自己費一些心思了。

成果

令人滿意!這自然的「留白」,非常符合我的期待!簡直超乎想像。

頓時我才明白,原來這就是它最大的價值!真是太美惹。

如果喜歡這篇文章,也歡迎按下 LikeCoin button 為我拍手唷!