Hugo 主題 "Stack" 加入 Favicon 以及 Social Icon

目前看到此網站的朋友，應該已經可以在 Browser 的 Tab 上看到我的 Icon
以及左側 Side menu 看到 Github 以及 Email 的 Icon
最早其實就滿想要好好處理這幾個內容
但一直都沒有好好的去學習 Hugo 的架構以及如何做客製化

在今天完成了之後，來把過程記錄下來
後續提供給搜尋到這篇文的朋友使用

關於 Hugo 客製化架構

在 Hugo 上每個主題可能多少有變化，但大致上會有個基礎概念

每個主題基本的設定都已經完成，設計的用意是 讓 User 可以不動到基本文件來做修改
多數 layout 的修改都是透過部署文件(以我而言是 hugo.toml 檔案)來加入參數修改
變動的檔案與資料則是放在 layout 資料夾中

加入 Favicon

Favicon 是我最早想要加入的內容，因為也與後面要進行的 SEO 有關聯，也對我後續其他網站搬動到 Hugo 有幫助
首先，由於我們自己的先決知識知道 “favicon” 基本上是落在 html 內的 head 中
因此我們會需要先在 layout 資料夾中找到 head.html 這個檔案

在經過尋找之後，我們會在 root/layouts/partials/head 資料夾中，找到我們的 head.html
並在其中找到一段對於 favicon 的設定

{{ with .Site.Params.favicon }}
    <link rel="shortcut icon" href="{{ . | relURL }}" />
{{ end }}

這段的意思是說，可以藉由定義 [params] 中的 favicon 來讓我們的網站顯示 Favicon
因此我就回到 hugo.toml 中，加入以下內容

[params]
  favicon = "/img/favicon.ico"

接著只要將我們上網找到的 favicon 放在 static 資料夾中的 img 底下，即可完成加入 Favicon 經過測試後 png 檔案也可以使用

然而！我很想要用我在 tablericons 上找到的這個可愛的 icon

但又不想要另外存 png 或 ico 檔案，因此決定直接使用 html 顯示 svg link 的方法來實現改為以下方式

在 https://www.base64encode.org/ 中，將 svg 的 code 轉為 base64
使用以下 code 加入到 head.html 中的最下層

<link rel="icon" href="data:image/svg+xml;base64,{{ base64轉出來的資料 }}" type="image/svg+xml">

如此一來，就實現了使用 svg 檔案當作 favicon 的願望

接下來是在左側的個人 Profile 中，加入 Github、Linkedin 以及 mail 的 Icon
(原本想要加入 IG 或 FB 的，但後來覺得還是與個人的社交分開好了)
Social Icon 的加入，基本上與 Favicon 的加入大同小異
首先，我們一樣會先到去尋找設定 social 所需要的參數
這次則是在 root/layouts/partials/sidebar/left.html 這個檔案中找到資訊

    {{- with .Site.Menus.social -}}
        <ol class="menu-social">
            {{ range . }}
                <li>
                    <a 
                        href='{{ .URL }}'
                        {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
                        {{ with .Name }}title="{{ . }}"{{ end }}
                        rel="me"
                    >
                        {{ $icon := default "link" .Params.Icon }}
                        {{ with $icon }}
                            {{ partial "helper/icon" . }}
                        {{ end }}
                    </a>
                </li>
            {{ end }}
        </ol>
    {{- end -}}

這邊其實比較複雜，但可以理解的是，我們要在 “Menus” 中定義來定義 Social，而且他本身會包在一個 li 以及 a 之中
而這邊的 icon 則是透過 helper/icon 來顯示

因此我們回到 hugo.toml 中，加入以下內容

[menu]
  [[menu.social]]
    identifier = "github"
    name = "GitHub" 
    url = "https://github.com/yoyoshenTW"
    weight = 1
    [menu.social.params]
      icon = "brand-github" 
      newTab = true

這裡是先加入 Github 的設定，接著就能看到在左側的 Sidebar 中，出現了 Github 的 Icon
然而不同的是，我們這裡的 icon 是使用指定資料夾的圖片，必須要到 assets/icons/ 中，來新增指定的 image 檔案

完成

先來看看可愛的 profile 以及 icon 經過以上步驟，我終於完成了我網站最後的美化啦~~
而也在這個過程中，近一步了解 Hugu 透過 toml 檔案進行客製化的方式，以及其架構

關於 Hugo 客製化架構

加入 Favicon

加入 Social Icon

完成