新增LINE分享按鈕

Thu, 30 Jun 2022 04:47:06 +0800

寫在前面

社群分享對自媒體或是創作者來說一直是一個很重要的功能。從創作者的角度來說，花費好大的心力寫好一篇文章，當然不希望只是擺在家裡孤芳自賞；而從讀者的角度來說，看到一篇實用、知識量高的文章，也會希望能有快速方便的管道，將文章分享出去，因此一鍵分享的功能可說是引導流量的一個重要關鍵。

Hugo是一個客制化程度很高的靜態部落格系統，內建有社群分享的功能，且有數不清的主題可以套用並修改。以本站的主題PaperMod為例，當然也有內建社群分享按鈕¹囉！

以台灣來說，LINE大概是最多人使用的社群軟體，很可惜這並沒有整合到PaperMod主題裡面，所幸研究了一下，發現要達成這件事並不困難，以下就手把手跟著我做吧！

1. 啟用ShareButton功能

首先先來看看文章分享按鈕在Hugo/PaperMod中是如何實現的。找到config.yml檔案，並在params區塊中添加以下參數：

params:
    ShowShareButtons: true # 啟用ShareButton

如此便會啟用社群分享功能，隨便點開一篇文章，滑到最下面應該就可以看到出現各式各樣的社群分享按鈕。

內建分享按鈕有 twitter、linkedin、reddit、facebook、whatsapp、以及telegram (由左至右)

1.1 特定ShareButton

如果只想要特定的 share button(s)，則只要在原本的ShowShareButtons處添加下面這行即可：

params:
    ShowShareButtons: true
    # 從6個內建分享按鈕中，加入欲新增的shareButton(s)，用","隔開
    ShareButtons: ["twitter","facebook", "telegram"]

只顯示指定的按鈕

2. 新增自定義按鈕

接下來找到share_icons.html檔案。
原始檔案位置在{site name}/themes/PaperMod/layouts/partials/share_icons.html，我們把它複製出來並貼到{site name}/layouts/partials/share_icons.html²

2.1 share_icons.html

share_icons.html裡面有預設六種的社群分享按鈕，隨便取一個出來觀察程式結構：
(大概在62行附近)

62
63
64
65
66
67
68
69
70


{{- if (cond ($custom) (in $ShareButtons "telegram") (true)) }}
<a target="_blank" rel="noopener noreferrer" aria-label="share {{ $title | plainify }} on telegram"
    href="https://telegram.me/share/url?text={{ $title }}&url={{ $pageurl }}">
    <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28">
        <path
            d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
    svg>
a>
{{- end }}

觀察後發現，每個按鈕的結構其實都很類似：

{{- if (cond ($custom) (in $ShareButtons "telegram") (true)) }}　
<a target rel aria-label href > 
<svg>...svg> 
a>
{{ - end }}

那麼只要土炮一個類似的東西，應該就可以達成目的了吧！

2.2 加入line圖示

先來處理icon的部分，查了一下開發者說明的文件³，提到希望icon盡量參照feathericon simpleicons的設計風格，來去這兩個地方找找吧！

bingo! 在simpleicons還真的找到了，把它的svg檔下載下來並用vs code開啟。

記得要選svg!

用文字編輯器打開後，看到這一長串，這就是我們要的！複製起來等等用。

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LINEtitle><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>svg>

2.3 按下按鈕的動作

接下來處理按下按鈕的動作。

觀察a標籤裡面的東西，和其他按鈕比較一下

<a target rel aria-label href >

target="_blank"表示是按下後開啟新分頁
rel, aria-label　大家都差不多
關鍵在href

google 關鍵字 [line 按鈕分享]，找到「建立line分享按鍵」那篇文章⁴

紅色框裡面的東西是我們要放在href的地方的東西

https://social-plugins.line.me/lineit/share?url=

2.4 組合在一起

按鈕部分的程式碼如下：

{{- if (cond ($custom) (in $ShareButtons "line") (true)) }}
<a target="_blank" 
    rel="noopener noreferrer" 
    aria-label="share {{ $title | plainify }} on line"  
    href="https://social-plugins.line.me/lineit/share?url={{ $pageurl }}" > 

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LINEtitle><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>svg>
a>
{{ - end }}

注意看 highlight 起來的那兩行
aria-label：只是把 on “telegram” 改成 on “line"
href 的最後面則是加上 {{ $pageurl }}：這樣才會在按下按鈕後自動帶入文章的 url

最後一步了，我們來處理頭尾的雙括號！

2.5 處理頭尾雙括號

{{- if (cond ($custom) (in $ShareButtons "line") (true)) }}

看到關鍵字if in $shareButtons "line"，感覺是必須要把"line按鈕"註冊到　$ShareButtons　列表裡面，才可以正常運作/顯示。

參考上面特定ShareButton段落，回到config.yml把line加到列表裡吧!

params:
    ShowShareButtons: true
    ShareButtons: ["twitter","facebook", "telegram","line"]

大功告成啦!!!

Line按鈕出現啦~~~感動~~~

註解&文章連結

PaperMod主題支援的分享按鈕列表 (檢自開發者的github說明文件) ↩︎
一般會避免直接改動themes資料夾下的原始檔案，原因有二：1. hugo預設會先讀取{site name}/layouts下的設定(在這裡做客制化)，如果該資料夾沒有檔案才會去{site name}/themes/PaperMod/layouts下面找，這樣的好處是，如此一來一旦自己把blog改壞了，至少還有範本可以參考。2. 主題開發者有可能會因為增加新功能而更新資源，如果重新遠端clone repo的話，之前修改過的東西就會被蓋掉了。 ↩︎
討論icon風格的PR(pull request) ↩︎
直接幫你找好了，是不是很貼心！ ↩︎

Share_Icons on 小M平碎碎念