在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]改成自己的帳號

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

建議閱讀順序

參考資料

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