2022-03-12發表2022-03-13更新Hexo6 分鐘讀完 (大約870個字)

[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>;
    }
};

參考資源

2020-06-08發表2021-06-27更新Hexo6 分鐘讀完 (大約893個字)

[Hexo] 在不同電腦上寫部落格

HEXO 簡介

HEXO 是一套 OPEN SOURCE 寫部落格框架，專門用來部署靜態網頁的工具，並支持 MARKDOWN 的方式撰寫，對於工程師來說非常方便
，使用方式則是使用 NODE.JS 軟體套件管理系統下載，利用指令 MARKDOWN 標記語言檔案，再透過解析方式生成靜態網頁，過程十分
快速、方便。

但如果你想要在不同裝置上撰寫部落格的話，就需要透過版本控制實現。

在 GITHUB 上開好分支

假設你已經有自己的 Repository，這個 Repository 必須與自己使用者名稱相同，例如：gordonfang199649.github.io

分支上面開立分支，我自己是取名為 hexo，輸入完分支即在下方按”Create branch from master”

在 Repository 中間分頁切到 Settings 後，左邊項目中選取 Branch（分支)，我們將”hexo”設為預設分支

設置靜態網頁部署資訊

這邊部署資訊要在撰寫部落格根目錄中的_config.yml 設定，我使用的是 GitHub 部署，所以 type 這邊輸入 git，repository 輸入你
的 GitHub Repositroy 的 URL，分支則設置為 master，如果你是已經建立部署資訊的朋友們，可以先跳過此步驟。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: 你的GitHub Repositroy的URL
  branch: master

移除主題.git

在將異動檔案上版至 hexo 分支前，要先將套主題中的.git 資料夾刪除
因為 git 不容許一個以上.git 存在

1 2	$pwd /你的hexo資料夾名稱/themes/套用主題資料夾名稱/.git

將異動檔案傳至遠端 Repository

部署文章到 master 分支
加入遠端 Repository 位置
開設分支 hexo
切換分支至 hexo
將異動檔案移動到暫存區
提交異動檔案
上版至遠端 Repository

$hexo clean && hexo generate
$hexo deploy
$git remote add origin https://github.com/usrname/usrname.github.io
$git branch hexo
$git checkout hexo
$git add .
$git commit -m "commited message"
$git push origin hexo

在不同裝置取得最新版本（環境是已建立）

只要下”Git pull”指令就可以取得當前部落格內容最新版本
每次異動檔案要上傳遠端 Repository，先從遠端 PULL 一版下來，並輸入上一節第二到第四步驟的指令

$git branch hexo
$git checkout hexo
$git pull
$hexo clean && hexo generate
$hexo deploy
$git add .
$git commit -m "commited message"
$git push origin hexo

在不同裝置取得最新版本（環境是未建立）

若在尚未建立環境的裝置下，要先 Clone 自己的 Repository，再另行安裝 Hexo

1	$git clone https://github.com/usrname/usrname.github.io.git

為什麼要另外開立分支的原因?

最後部署至 GitHub 上，我們是透過”hexo deploy”指令部署到 GitHub 上的 master，另一個 hexo 分支則是儲存不同裝置上上版紀錄、
及資料，在替大家複習一下，若寫好文章要發佈上去，得先部署到”GitHub 的 master 分支”上，這樣才可以看得到靜態網頁，再來是將
異動的檔案上到 hexo 分支，在不同裝置下都能複製一版下來再進行部落格的撰寫。

$hexo clean && hexo generate
$hexo deploy
$git branch hexo
$git checkout hexo
$git add .
$git commit -m "commited message"
$git push origin hexo