為 NexT 新增 LikeCoin

發表於 分類於

主要分享 NexT 新增 LikeCoin 的步驟。

前言

新增 LikeCoin 主要是從 Medium 轉來自架站時，覺得 M 站的拍手還是能夠起到激勵的作用，LikeCoin 也算是大眾所用，所以就來看我的操作步驟吧！

Hexo 版本

  • hexo：6.3.0
  • hexo-server：3.0.0

NexT 版本

  • NexT：^8.12.1

操作步驟

  1. 註冊 LikeCoin
    並且透過設定更改自己的 Liker IDImage
  2. 在 node_modules/hexo-theme-next/themes/next/layout/_macro 目錄下新增一檔案 like_coin.njk 並貼上下列程式碼，並將 [LikerID] 更改為你的 Liker ID。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div>
        <script type="text/javascript">
          document.write(
            "<iframe scrolling='no' frameborder='0' style='height: 212px; width: 100%;' " +
            "sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' " +
            "src='https://button.like.co/in/embed/[LikerID]/button?referrer=" +
            encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
        </script>
    </div>

請注意

  • Linker ID 記得將 [] 移除後改成自己的
  • 不要直接複製官方的 code，官方 code 有錯誤
    1. div 沒有結尾 </div>
    2. NexT & Hexo 更新至一定版本後已經變成 .njk 格式

  1. 至 node_modules/hexo-theme-next/themes/next/layout/_macro/post.njk 搜尋 {{ post.content }} 將路徑加在下方，當然若想放置在別的區塊則依照 Hexo 架構進行新增即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
        <!--/noindex-->
      {% else %}
        {{ post.content }}
        {% include '../_macro/like_coin.njk' %} #here
      {%- endif %}
    {% else %}
      {{ post.content }}
      {% include '../_macro/like_coin.njk' %} #here
    {%- endif %}

  2. hexo server 就可以看到文章底下出現摟！Image

參考資料的部分已與我的版本不同，但若你是 Hexo 低於 8 則可以參考以下資料：

參考資料：為 Hexo 裝上 LikeCoin 按鈕、如何在 Hexo 開發環境的文章中加入 LikeCoin button、Hexo × NexT × LikeCoin 安裝