For the complete documentation index, see llms.txt. This page is also available as Markdown.

Hugo

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

感謝用戶 Wancat 的教學範本。

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

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

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

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

cp -r theme/YOUR_THEME/layouts/ .

Hugo 中的 Partial Templates 可以讓你建立小模板,嵌入在頁面中。在 layoutspartials 資料夾建立 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讚賞鏈(附上教學)

Last updated