如何在 Hugo / Wowchemy 文章底下插入 LikeCoin Button

前置作業 註冊 Liker ID 一個 Hugo 網站 覆蓋主題預設頁面 由於 Hugo 支援以覆蓋的方式客製化主題，所以不必去直接去修改 theme/ 裡的檔案，而是複製一份出來，然後把預設值覆蓋過去。 Hugo 一般來說，Hugo 的文章 Template 是 [根目錄]/theme/<主題名稱>/layouts/_default/single.html，你可以直接將它複製出來到 [根目錄]/layouts/_default/single.html： 1 2 mkdir -p layouts/_default/ cp theme/<theme_name>/layouts/_default/single.html layouts/_default/single.html Wowchemy 而我使用的主題是 Wowchemy，以下也會使用這個主題來示範。這個主題是透過 Go module 來載入，Repository 內沒有 theme/ 這個資料夾，所以必須要到源頭去找並且自己建立檔案。 找到 Wowchemy 的 single.html 發現他們把文章底下的有的沒的東西，像是標籤、分享按鈕、作者，之類的東西都包在 page_footer.html 裡面了。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 {{- define "main" -}} <article class="article"> {{ partial "page_header" . }} <div class="article-container"> <div class="article-style"> {{ .Content }} </div> {{ partial "page_footer" . }} </div> </article> {{- end -}} 所以再找到 wowchemy/layouts/partials/page_footer.html，就能看到文末的區塊確實都是被包在這個檔案裡面。所以建立 [根目錄]/layouts/partials/page_footer.html，然後把 Wowchemy 的內容複製進去。 1 2 3 4 5 6 7 8 9 10 11 12 13 {{ partial "page_edit" . }} {{ partial "tags" . }} {{ partial "components/page_sharer" . }} {{ partial "page_author" . }} {{ partial "comments" . }} {{ if .Params.pager }} <div class="article-widget"> {{ partial "components/pager" . }} </div> {{ end }} <!-- {{ partial "page_related" . }} --> 這時候使用 hugo serve 來預覽網站應該不會有任何的變化和報錯，你可以在其中插入一些文字看看是否真的有效果。 插入 LikeCoin Button 在剛剛建立的檔案 [根目錄]/layouts/partials/page_footer.html 中插入一行 {{ partial "likecoin" . }}，位置可以隨意調整，像我就調整成這樣： 1 2 3 4 5 6 7 8 9 10 11 12 13 {{ partial "page_edit" . }} <!-- {{ partial "page_related" . }} --> {{ partial "likecoin" . }} <!-- 插入這行 --> {{ partial "components/page_sharer" . }} {{ partial "tags" . }} {{ partial "page_author" . }} {{ partial "comments" . }} {{ if .Params.pager }} <div class="article-widget"> {{ partial "components/pager" . }} </div> {{ end }} 然後再建立一個檔案 [根目錄]/layouts/partials/likecoin.html，在裡面填入： 1 2 3 4 5 6 7 8 9 10 {{ if site.Params.features.comment.likecoin_button }} {{ $config := site.Params.features.likecoin_button }} <iframe class="LikeCoin" height="200" src="https://button.like.co/in/embed/{{$config.likerID}}/button?referrer={{ .Permalink }}" width="100%" frameborder=0> </iframe> {{ end }} 接著再到 [根目錄]/config/_defualt/params.yaml，在 features: 的最後加上 Liker ID，像是這樣： 1 2 3 4 5 6 7 ... map: provider: '' api_key: '' zoom: 15 likecoin_button: likerID: '<你的 Liker ID>' # 改成你的 Liker ID 這個時候 LikeCoin Button 應該就會正確插入到網站裡面。 參考來源 https://docs.like.co/v/zh/user-guide/creator/self-host/hugo https://wancat.cc/post/hugo-install-likecoin/ https://github.com/wowchemy/wowchemy-hugo-themes/pull/2830/files