# Jekyll

{% hint style="warning" %}
此文檔只適用於 Liker Land 和 LikeCoin v2。如需了解 [3ook.com](http://3ook.com/) 和 LikeCoin v3，請至 [docs.3ook.com](http://docs.3ook.com/) 及 [dao.like.co](https://dao.like.co/)。
{% endhint %}

感謝用戶 [PinGuの独り言](https://pingu.moe/2020/01/integrate-likebutton-with-jekyll/) 的教學範本。

安裝讚賞鍵以前，請先 [註冊 Liker ID](https://docs.v2.like.co/zh/general-guides/dapp/liker-id)。

### 從 \_config.yml 設定 liker\_id <a href="#cong-configyml-she-ding-likerid" id="cong-configyml-she-ding-likerid"></a>

先在 `_config.yml` 加入 `liker_id` 鍵值，並將 \[LikerID] 更改為你的 Liker ID

```
# Enter your Liker ID to enable LikeCoin button
liker_id: [LikerID]
```

宣告在`_config.yml` 的變數可以從物件 site 中取得，也就是 `{{site.liker_id}}`

```
https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}
```

### 插入 iframe <a href="#cha-ru-iframe" id="cha-ru-iframe"></a>

先建立讚賞鍵的 HTML 片段

```
{% if site.liker_id %}
<iframe
  src="https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}">
</iframe>
{% endif %}
```

&#x20;用 if 檢查 `liker_id` 是否存在。接著要在 post 樣板裡加入剛才的片段，找個接近區段結束的地方寫上 `{% include likeco.html %}`

建置一次，文章末端已經可以看到讚賞鍵，不過大小還要調整。讚賞鍵的元件會自行適應以維持長寬比，其長寬約為 485px\*240px。使用以下程式碼把它置中自動縮放並隱藏卷軸。

```
{% if site.liker_id %}
<iframe
  style="width: 100%; max-width: 485px; height: 240px; margin: auto; overflow: hidden; display: block;"
  src="https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}">
</iframe>
{% endif %}
```

### 參考文章

> [幫jekyll加上likecoin
> ](https://blog.allmwh.org/2020-02/jekyll-likecoin/)

> [給Jekyll加上LikeButton賺錢錢](https://pingu.moe/2020/01/integrate-likebutton-with-jekyll/)

> [Add LikeWidget to Github Pages](https://klee1611.github.io/likecoin-button-jekyll.html)
