在Hexo NexT增加like Button
Deprecated!
此為舊版侵入式修改,NEXT 8版本以後,建議參照版更HEXO NEXT 6→8,以非侵入式修改整合AdSense、like coin、修正gitlab-ci文章更新時間錯誤的問題
前言
如果你還不知道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]
改成自己的帳號
<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
{% 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 }}
後方
{% 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嘍!