Hugo 和 Stack 的服用記錄

簡介

在寫這寫篇文章時，參考了以下內容，在此表示感謝。

Hugo Stack 主题使用方法

Hugo 安裝

macOS：

1

brew install hugo

創建網站

1
2


hugo new site quickstart
cd quickstart

Stack 安裝

因為想要對 Stack 主題的細節進行調整，然後可以有效保存更動，所以先在 GitHub 中把 Stack 主題 fork 到自己帳號底下，之後 Stack 主題更新時再 fetch 和 rebase：

1

git submodule add https://github.com/<username>/hugo-theme-stack.git

設定 Stack

將範例中的設定複製到根目錄：

1
2


mv hugo.toml hugo.toml.bak
cp themes/hugo-theme-stack/exampleSite/config.yaml .

自 hugo v0.110.0 起，設定檔改名為 hugo.toml，但 config.toml 等仍然支持，在這主題中仍然未更新。¹

然後將一些佈局的文件複製到根目錄：

1
2
3


cp -r ./themes/hugo-theme-stack/exampleSite/content/categories ./content
cp -r ./themes/hugo-theme-stack/exampleSite/content/page ./content
cp -r ./themes/hugo-theme-stack/exampleSite/content/_index.md ./content

因為不需要需要多國語系，把中文文件移除：

1

rm ./content/page/about/index.zh-cn.md

語言

由於已經決定了使用英文，在 config.yaml 中僅保留英文的設定。

刪除 languages 中除了 en 以外的內容。

日期格式

默認的格式是 Jan 02, 2006。

日期格式可以參考 Go 的 docs，在 config.yaml 中修改：²

1
2
3
4


params:
    dateFormat:
        published: 2006/01/02
        lastUpdated: 2006/01/02

左側的 menu 項目（Home、About、Archives、Search、Links），在 content/page/ 中有對應的目錄。

透過修改對應目錄中的 index.md 可以設定顯示的文字和 icon 等内容。

Profile 圖片和簡介

Profile 圖片和簡介通過 config.yaml 中的 params.sidebar 進行設定。

1
2
3
4
5
6
7
8


params:
    sidebar:
        emoji: 🤍
        subtitle: Beautiful things don't ask for attention.
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

圖片 img/avatar.png 需要放在 assets/ 中。

主題自帶一些來自 Tabler Icons³ 的 icon，存放在 themes/hugo-theme-stack/assets/icons 中。

如果要使用自定義的 icon，放在 assets/icons 中。

可以通過 config.yaml 中的 menu.social 進行設定：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


menu:
    social:
        - identifier: github
          name: GitHub
          url: https://github.com/
          params:
              icon: brand-github

        - identifier: linkedin
          name: Linkedin
          url: https://www.linkedin.com/in/
          params:
              icon: brand-linkedin

brand-linkedin 需要自己到 Tabler Icons 取得。

網站 icon

通過 config.yaml 中的 params.favicon 進行設定：

1
2


params:
    favicon: /favicon.ico

Icon /favicon.ico 需要放在 static/ 中。

滾動條

預設的滾動條看起來太粗：

在 themes/hugo-theme-stack/assets/scss/partials/base.scss 中，修改以下內容：

1
2
3
4
5
6
7
8


* {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

文章 front matter 原型

將最常使用的幾個 front matter 更新到原型中以方便創作時快速開始，把 archetypes/default.md 修改為：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


---
title: "{{ replace .File.ContentBaseName "-" " " | title }}"
date: "{{ .Date }}"
description: ""
categories: [
    "uncategorized",
]
tags: [
    "untagged",
]
slug: "{{ .File.ContentBaseName }}"
draft: true
---