在Hexo NexT增加like Button

前言

如果你還不知道like coin是什麼,請閱讀化讚為賞!LikeCoin是什麼?
寫blog除了有分享的心態外,若或多或少能增加一些收入,當然就更棒了!
最簡單的方式就是Google AdSense。在不影響閱讀體驗下,放置一些廣告
但並不是每個人都會點擊廣告來鼓勵作者。而要純靠流量…一個月恐怕連1元都賺不到
而like coin的精神其實挺不錯

營造良好創作風氣!

畢竟每一篇文章都是自己的心血結晶,若能獲得更好的支持,對作者來說也更有動力持續寫作下去!

創辦人提過:LikeCoin 相信優質內容值得付費,但理解要改變用戶使用習慣不是一朝一夕的事。
而按下Like,對瀏覽者來說不必支付任何費用,較能提高使用意願。作者又能得到實質的回饋!

hexo 如此小眾市場,果然搜尋後完全沒有相關教學XD
只好自行研究如何增加like button

作法

like Button的原理很簡單,手動增加的方式就是在文末加上like button導向這篇文章網址就好了!
新文章當然還可以順手加一下,但舊文章還要逐一去加的話,也太辛苦了!
更遑論若這服務最後死掉了,還得逐篇回去刪掉…

所幸已有人寫出每一文章頁面自動產生like button (見參考資料)
直接沿用他的語法,再補上hexo文章下方就可以了!

增加根據文章網址,自動產生like button連結

themes/next/layout/_custom/,新增一檔案like_coin.ejs
裡面貼上下列程式碼
記得將[您的liker ID]改成自己的帳號

1
2
3
4
5
6
7
<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/[您的liker ID]/button?referrer=" +
encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
</script>
<div>

在每篇文章末端加上like button

因為我打算加在相關文章的上方,所以我將我的文件與他放在一起
打開themes/next/layout/_macro/post.swig

1
2
3
4
    {% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
+ {% include '../_custom/like_coin.ejs' %}
{% include '../_partials/post/post-related.swig' with { post: post } %}
{% endif %}

如果您沒有開啟相關文章的話,則加在往上幾行的{{ post.content }}後方

1
2
3
4
5
6
7
8
9
10
11
12
13
        {% else %}
{% if post.type === 'picture' %}
<a href="{{ url_for(post.path) }}">{{ post.content }}</a>
{% else %}
{{ post.content }}
+ {% include '../_custom/like_coin.ejs' %}
{% endif %}
{% endif %}
{% else %}
{{ post.content }}
+ {% include '../_custom/like_coin.ejs' %}
{% endif %}
</div>

接著就可以打開自己的頁面檢查一下是否都有順利出現like button嘍!

建議閱讀順序

  1. 為什麼我推薦hexo部署到Gitlab
  2. HEXO基礎配置教學
  3. Git基礎設定
  4. 部署HEXO到GitLab Page
  5. Gitlab使用自訂域名搭配Cloud Flare免費升級成https
  6. hexo NexT主題增加AdSense
  7. 在Hexo NexT增加like Button
  8. hexo NexT主題版更心得

參考資料

化讚為賞!LikeCoin是什麼?
以JavaScript在Blogger等各家網誌的文末、側欄產生LikeButton