1 of 8

其他自架網站

如何在自擁有的網站加入 LikeCoin button？

ghost

如何在 ghost 文章中加入 LikeCoin button

感謝用戶的教學範本，留意方可使用。

安裝讚賞鍵以前，請先。

修改 post.hbs

將 IFrame 代碼加入 post.hbs並將 [LikerID] 更改為你的 Liker ID

修整讚賞鍵外觀

增加以下代碼到 css

完成。

參考文章

Hexo

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

感謝用戶只是個打字的的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

增加根據文章網址，自動產生讚賞鍵鏈結

在 themes/next/layout/_custom/ 目錄下新增一檔案 like_coin.ejs 並貼上下列程式碼，並將 [LikerID] 更改為你的 Liker ID。

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

在每篇文章末端加上讚賞鍵

打開 themes/next/layout/_macro/post.swig 在合適的位置把 like_coin.ejs 放置好

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

如果您沒有開啟相關文章的話，則加在往上幾行的 {{ post.content }} 後方

        {% else %}
          {% if post.type === 'picture' %}
            <a href="{{ url_for(post.path) }}">{{ post.content }}</a>
          {% else %}
            {{ post.content }}
+      {% include '../_custom/like_coin.ejs' %}
          {% endif %}
        {% endif %}
      {% else %}
        {{ post.content }}
+      {% include '../_custom/like_coin.ejs' %}
      {% endif %}
    </div>

完成後就可以看到讚賞鍵出現在文章中。

參考文章

在Hexo NexT增加like Button

如何将Liker按钮集成到Hexo

藍圖重生（一）：給 Hexo 文章加上 LikeCoin 的贊賞鍵

Hexo教學2 iframe(likecoin)

Hugo

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

感謝用戶 Wancat 的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

先為你的網站選擇一個主題，以下採用 CleanWhite 這套主題作例子。

Hugo 可以使用自訂 Layout 的方式，在不改變主題的情況下改變網站設計，用戶可透過這個方式在每篇文章下放置讚賞鍵。

首先覆蓋文章的模板，將 theme 的 layouts 資料夾複製到專案目錄下

cp -r theme/YOUR_THEME/layouts/ .

Hugo 中的 Partial Templates 可以讓你建立小模板，嵌入在頁面中。在 layouts 的 partials 資料夾建立 likecoin.html，寫入以下內容。你也可以在這裡以 HTML 格式加上想給讀者看的說明文字

<iframe class="LikeCoin" height="235" src="https://button.like.co/in/embed/{{ .Site.Params.likerID }}/button?referrer={{ .Permalink }}" width="100%" frameborder=0></iframe>

接下來在 config.toml 中加入以下程式碼，並將 [LikerID] 更改為你的 Liker ID

[[params]]
	likerID = "likerID"

接著編輯文章使用的模板，通常位處於 _default/single.html。這就是一個 Go Template，在你想要的地方插入，建議插在 {{ .Content }} 後面，這樣 LikeCoin button 就會接續出現文章下面

{{ partial "likecoin.html" . }}

這樣 Hugo 就會將 LikeCoin 這個 partial render 到你的文章中了。記得加上 “."，沒有的話，LikeCoin 的模板讀不到資料。留意整個過程都不需要修改 theme 的原始程式

最後執行 hugo server 預覽你的網站。

參考文章

Hugo 安裝 LikeCoin 教學

Hugo使用Likecoin教學

[hugo]在hugo安裝likecoin按鈕

【LikeCoin應用技】我是如何想到在Markdown格式裡面加入LikeCoin讚賞鏈（附上教學）

Jekyll

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

感謝用戶 PinGuの独り言的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

從 _config.yml 設定 liker_id

先在 _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

先建立讚賞鍵的 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 %}

用 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

給Jekyll加上LikeButton賺錢錢

Add LikeWidget to Github Pages

mdBook

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

感謝用戶的教學範本。

安裝讚賞鍵以前，請先。

放入 mdBook 產出的 HTML 靜態文件的重點是需要使用 Javascript 來動態產生下面 HTML 片段於瀏覽器之中。

客製 mdBook 先新增 likebutton.js 於 book.toml 旁，也可以使用的 sdk.js 原理類似。

likebutton.js

編輯 book.toml 的 output.html 段落加入 js 與 css

最後就是看那一頁 md 裡面要加上按鈕就新增一個 div 後用 class 為 LikeCoin button 來綁住輸出。

上面寫在 md 內的 div 在經過 mdbook build 轉化成為 HTML 後即能出現讚賞鍵。

目前只能限制一個 Liker ID 使用，如要提供多用戶可以用 getElementsByClassName(LikerIDFoo) 來實做。

參考文章

October CMS

如何在 October CMS 文章中加入 LikeCoin button

可參考非官方外掛 October CMS LikeCoin Plugin。

其他

如何在任何自架網站加入 LikeCoin button？

你可使用 LikeCoin API，在任何網站和 app 加入 LikeCoin button，詳情請參閱開發資源（英文）。或參考：

Hugo

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

感謝用戶 Wancat 的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

先為你的網站選擇一個主題，以下採用 CleanWhite 這套主題作例子。

Hugo 可以使用自訂 Layout 的方式，在不改變主題的情況下改變網站設計，用戶可透過這個方式在每篇文章下放置讚賞鍵。

首先覆蓋文章的模板，將 theme 的 layouts 資料夾複製到專案目錄下

cp -r theme/YOUR_THEME/layouts/ .

<iframe class="LikeCoin" height="235" src="https://button.like.co/in/embed/{{ .Site.Params.likerID }}/button?referrer={{ .Permalink }}" width="100%" frameborder=0></iframe>

接下來在 config.toml 中加入以下程式碼，並將 [LikerID] 更改為你的 Liker ID

[[params]]
	likerID = "likerID"

{{ partial "likecoin.html" . }}

最後執行 hugo server 預覽你的網站。

參考文章

Hugo 安裝 LikeCoin 教學

Hugo使用Likecoin教學

[hugo]在hugo安裝likecoin按鈕

【LikeCoin應用技】我是如何想到在Markdown格式裡面加入LikeCoin讚賞鏈（附上教學）

Jekyll

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

感謝用戶 PinGuの独り言的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

從 _config.yml 設定 liker_id

先在 _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

先建立讚賞鍵的 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 %}

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

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

給Jekyll加上LikeButton賺錢錢

Add LikeWidget to Github Pages

Hexo

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

感謝用戶只是個打字的的教學範本。

安裝讚賞鍵以前，請先註冊 Liker ID。

增加根據文章網址，自動產生讚賞鍵鏈結

在 themes/next/layout/_custom/ 目錄下新增一檔案 like_coin.ejs 並貼上下列程式碼，並將 [LikerID] 更改為你的 Liker ID。

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

在每篇文章末端加上讚賞鍵

打開 themes/next/layout/_macro/post.swig 在合適的位置把 like_coin.ejs 放置好

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

如果您沒有開啟相關文章的話，則加在往上幾行的 {{ post.content }} 後方

        {% else %}
          {% if post.type === 'picture' %}
            <a href="{{ url_for(post.path) }}">{{ post.content }}</a>
          {% else %}
            {{ post.content }}
+      {% include '../_custom/like_coin.ejs' %}
          {% endif %}
        {% endif %}
      {% else %}
        {{ post.content }}
+      {% include '../_custom/like_coin.ejs' %}
      {% endif %}
    </div>

完成後就可以看到讚賞鍵出現在文章中。

參考文章

在Hexo NexT增加like Button

如何将Liker按钮集成到Hexo

藍圖重生（一）：給 Hexo 文章加上 LikeCoin 的贊賞鍵

Hexo教學2 iframe(likecoin)

mdBook

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

感謝用戶的教學範本。

安裝讚賞鍵以前，請先。

放入 mdBook 產出的 HTML 靜態文件的重點是需要使用 Javascript 來動態產生下面 HTML 片段於瀏覽器之中。

客製 mdBook 先新增 likebutton.js 於 book.toml 旁，也可以使用的 sdk.js 原理類似。

likebutton.js

並複製成為 likebutton.css

.likecoin-button {
  position: relative;
  width: 100%;
  max-width: 485px;
  max-height: 240px;
  margin: 0 auto;
}
.likecoin-button > div {
  padding-top: 49.48454%;
}
.likecoin-button > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

編輯 book.toml 的 output.html 段落加入 js 與 css

[output.html]
default-theme = "coal"
mathjax-support = true
additional-js = ["likebutton.js"]
additional-css = ["likebutton.css"]

最後就是看那一頁 md 裡面要加上按鈕就新增一個 div 後用 class 為 LikeCoin button 來綁住輸出。

<div class="likebutton"/>

上面寫在 md 內的 div 在經過 mdbook build 轉化成為 HTML 後即能出現讚賞鍵。

目前只能限制一個 Liker ID 使用，如要提供多用戶可以用 getElementsByClassName(LikerIDFoo) 來實做。