為 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 %}
  1. hexo server 就可以看到文章底下出現摟！Image

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

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