如何在 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

與你的連結，是我寫部落格的動力

喜歡這篇文章的話，歡迎在下方留言或是寄 Email 回饋給我！

也可以去誰來我家簽個到，或是去看看其他文章 ~~