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

前言

LikeCoin 是一種加密虛擬貨幣，基於以太坊區塊鏈鎖延伸出來的代幣。不知道大家是不是在瀏覽網站是不是常常看到像 Medium 拍手按鈕， LikeCoin 基金會會依據別人給創作者的按讚數配發其發行虛擬幣幣給創作者，當 LikeCoin 數達到 2,000 時就可以兌換成法定貨幣。我想在自己的 Hexo 網頁放置 LikeCoin 主要原因為我很喜歡它的配色、 Logo 的設計，另一個原因是欣賞它的創作生態圈治理理念。

LikeCoin 加入到 Hexo

本篇文章是以 Hexo icarus 主題設定為主，且預設您已經註冊 LikeCoin 。

官方網站是以 Hexo next 主題為範例，而我的主題目前是使用 icarus ， next 的模板引擎是用 ejs ，而 icarus 則是用 React 的 jsx ，所以設定上就有些許不同。

LikeCoin button Gitbook 官方範例

<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/[LikerID]/button?referrer=" +
      encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
  </script>
<div>

icarus 主題預設可以設定 donate 的連結，可以透過 _config.icarus.yml 去做設定，它根據 yml 屬性找到對應連結的圖片，再渲染到前端頁面的卡片上。

_config.icarus.yml

donates:
    # "Buy me a coffee" donate button configurations
    -
        type: buymeacoffee
        # URL to the "Buy me a coffee" page
        url: '你的buymeacoffee URL'
    # Paypal donate button configurations
    -
        type: paypal
        # Paypal business ID or email address
        business: 'paypal ID'
        # Currency code
        currency_code: USD #收款幣別

donates.jsx 原始碼

const logger = require('hexo-log')();
const { Component } = require('inferno');
const view = require('hexo-component-inferno/lib/core/view');

module.exports = class extends Component {
    render() {
        const { config, helper } = this.props;
        const { __ } = helper;
        const { donates = [] } = config;
        if (!Array.isArray(donates) || !donates.length) {
            return null;
        }
        return <div class="card">
            <div class="card-content">
                <h3 class="menu-label has-text-centered">{__('donate.title')}</h3>
                <div class="buttons is-centered">
                    {donates.map(service => {
                        const type = service.type;
                        if (typeof type === 'string') {
                            try {
                                let Donate = view.require('donate/' + type);
                                Donate = Donate.Cacheable ? Donate.Cacheable : Donate;
                                return <Donate helper={helper} donate={service} />;
                            } catch (e) {
                                logger.w(`Icarus cannot load donate button "${type}"`);
                            }
                        }
                        return null;
                    })}
                </div>
            </div>
        </div>;
    }
};

魔改 icarus 原始碼

由於我是使用 npm 下載主題，所以主題外框、文章、頁面元件會放在你資料夾的 node_modules/hexo-theme-icarus/layout/common/ 底下，我是在 common 資料夾底下新建一個 jsx 檔元件，此元件去繼承 React.Component ，繼承下來的 sub class 去覆寫 render() 方法，我們方法回傳官方網站提供 iframe 標籤的內容，iframe src 屬性的 [LikerID] 換成自己的 LikerID ，最後我們將建立好的類別輸出出去，我的檔案取名叫 likecoin.jsx。

likecoin.jsx

const { Component } = require('inferno');

module.exports = class extends Component {
  render() {
    return <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/[LikerID]/button?referrer=" + encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>;
  }
}

原先包住在 <div class="buttons is-centered">...</div> 原始碼以迭代方式尋找在使用者在 _config.icarus.yml 設定的 donate type 有沒有在對應的type，再把type帶進去 Donate渲染出來，那我們要改的就是這一段，接著我們將 likecoin.jsx 引入到 donates.jsx ，使用標籤將元件包住，並取代剛剛我們提到的地方，由於我們不需要再透過 config 檔尋找 donate type ，所以我有把 _config.icarus.yml donate 那一塊刪掉，原始碼原本判斷 donates 是否為陣列及陣列長度也一併移除。

donates.jsx

const logger = require('hexo-log')();
const { Component } = require('inferno');
const LikeCoin = require('./likecoin');
const view = require('hexo-component-inferno/lib/core/view');

module.exports = class extends Component {
    render() {
        const { helper } = this.props;
        const { __ } = helper;
        return <div class="card">
            <div class="card-content">
                <h3 class="menu-label has-text-centered">{__('donate.title')}</h3>
                <div class="is-centered">
                    <LikeCoin></LikeCoin>
                </div>
            </div>
        </div>;
    }
};

參考資源

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

2. React.Component