Hexo × NexT × LikeCoin 安裝

前言

LikeCoin 是一種區塊鏈技術的應用，旨在讓優質內容的提供者能夠得到應得的回報。這篇文章記錄如何在 Hexo 搭配 NexT 主題時，在文章頁面中安裝 LikeCoin。雖然官方有給出教學，但程式碼有些微錯誤且安裝過程中會報錯，讓我決定還是記錄下自己的安裝步驟，讓以後的自己或有需要的讀者可以參考。

like_coin.swig

先建立 themes/next/layout/_custom/like_coin.swig，方便在其他檔案中直接引用 LikeCoin，不需重複輸入程式碼，內容如下，記得將 [LikerID] 修改為自己的 LikerID

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

這邊特別注意閉 div 是要有反斜線 (</div>) 的，原官方教學因少了反斜線讓我整個版面走鐘，debug 很久才找到這個小錯誤。

加上 LikeCoin

每個 Post

NexT 主題對於 Post 的 Layout 是寫在 themes/next/layout/_macro/post.swig，因此若想在每篇文章加上 LikeCoin，修改此檔案即可，我是在相關文章區塊前加上 LikeCoin，若想看效果，可以拉到文章下方 LikeCoin 處查看。放在此處並且能顯示的前提是，在主題 _config.yml 的 related_posts 需要啟用才會顯示，若無啟用，可以調整放置到任何想放置的地方

{%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
    {{ partial('../_custom/like_coin.swig') }}
    {{ partial('_partials/post/post-related.swig') }}
{%- endif %}

若是依照原官方教學使用 ejs + include，會出現明明檔案存在但回報 template not found 的情況，但若按照我上方的作法，就可以在文章中正常顯示 LikeCoin 囉

1	Error: template not found: D:\weirenxue.github.io\themes\next\layout\_custom\like_coin.ejs

每個 Page

NexT 主題對於 Page 的 Layout 是寫在 themes/next/layout/page.swig，因此若想在每個頁面 (例如：tag、category 或其他自建頁面，但不包含 archive 頁面) 加上 LikeCoin，修改此檔案即可，這邊我是在該頁面主體結束後加上 LikeCoin，若想看放置後的效果可以到我的頁面工具箱、學習歷程查看。

    {#####################}
    {### END PAGE BODY ###}
    {#####################}
</div>
{% include '_partials/page/breadcrumb.swig' %}

{{ partial('./_custom/like_coin.swig') }}

參考文獻

如何在 Hexo 開發環境的文章中加入 LikeCoin button

薛惟仁筆記本