Featured image of post Hugo 定製自己的Stack主題
Blog

Hugo 定製自己的Stack主題

Card-style Hugo theme designed for bloggers

SCSS

hugo-theme-stack 這個主題採用 SCSS 作為寫 CSS 的語言
使用上也不會太困難，用大括號區分選擇器，使用分號區分屬性，寫起來蠻接近原本的 CSS

巢狀結構 (Nesting)

SCSS 支援在搜尋標籤下再次用搜尋，相下面的例子可以更清楚知道像 .title.name 的對應關係

</> scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.title {
  color: rgb(0, 0, 0);

  .name {
    color: rgb(0, 255, 0);
  }

  span {
    color: rgb(255, 0, 0);
  }
}

編譯完之後會變成

</> css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.title {
  color: rgb(0, 0, 0);
}

.title .name {
  color: rgb(0, 255, 0);
}

.title span {
  color: rgb(255, 0, 0);
}

變數(Variables)

scss 內的變數可以紀錄多個值，單個值時可以用於計算

</> scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

$box-margin: 10px 10px 5px 5px;
$fontbase: 5pt;

.box{
  margin: $box-margin;

  h2 {
    font-size: $fontbase * 2;
  }

  p {
    font-size: $fontbase;
  }
}

編譯完之後

</> css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.box{
  margin: 10px 10px 5px 5px;
}

.box h2 {
  font-size: 10pt;
}

p {
  font-size: 5pt;
}

引用

scss 支援檔案引用，例如我已經有個寫好的 sidebar.scss，在上一層就可以引用這個檔案，編譯時只生成單一個 css

</> scss
1

@import "sidebar.scss";

後面就放意本站有做的修改

更改新貼文模版

新增貼文指令，建立 my-new-post

>_ terminal 
1

hugo new content post/my-new-post/index.md

依照官方文件 archetypes#lookup-order 的說明

Hugo會依序到下面四個地方找模版

  1. archetypes/post.md
  2. archetypes/default.md
  3. themes/my-theme/archetypes/posts.md
  4. themes/my-theme/archetypes/default.md

其中第3跟第4種，如果主題安裝是用 module 的方式，專案資料夾內不會出現

我們可以在專案資料夾建 archetypes/post.md 取代就好

內容用 yaml, toml 或 json 都可以，這邊以 yaml 為例

其他格式請參考官方文件 archetypes

</> yaml 📄 my-project/archetypes/post.md
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

---
title: "{{ replace .File.ContentBaseName `-` ` ` | title }}"
slug: "{{ .File.ContentBaseName }}"
description: ""
date: {{ .Date }}
draft: true
hidden: false
comments: true
image:
categories: example
tags:
- example

---

這樣用指令產生新文章時，title 會替換為 my new post，slug 還是維持 my-new-post

調整 Archives

貼文改一行兩篇

在 my-project/assets/scss/custom.scss 新增下面程式碼

</> scss 📄 my-project/assets/scss/custom.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

@media (min-width: 1024px) {
    .article-list--compact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: none;
        box-shadow: none;
        gap: 1rem;

        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
        }
    }
}

鍵盤按鍵 <kbd>

HTML 內有一個不太常用的標籤 <kbd></kbd> 用來表示鍵盤按鍵。markdown 沒支援生成這個標籤，不過 markdown 內可以直接寫 HTML 使用。平常雖然不太常用，但偶爾用到時還是希望它長得好看一點。

Ctrl + C

</> markdown
1

<kbd>Ctrl</kbd> + <kbd>C</kbd>

翻一下 github 發現，有專門作鍵盤案動畫的 CSS shhdharmen/keyboard-css。

最簡單的方式可以在 my-project/layouts/partials/head/custom.html 加上引用就可以了。

</> html 📄 my-project/layouts/partials/head/custom.html
1

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/main.min.css" />

不過使用時就要指定 class 才會有效，雖然可以有很多風格可以彈性使用，但在 markdown 就要多打很多字。

</> markdown
1

<kbd class="kbc-button">Ctrl</kbd> + <kbd class="kbc-button">C</kbd>

我這邊大概只會用一種風格，所以為了以後可以少打點字，這邊還是要稍微作點修改，移植裡面按鈕(button)的版本到我的scss。

CSS code 修改自 GitHub shhdharmen/keyboard-css

如果不需要有夜晚模式的話，在 custom.scss 加入下面的代碼即可 (白色按鍵)

</> scss 📄 my-project/assets/scss/custom.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

kbd {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid #e6e6e6;
  border-radius: .25rem;
  display: inline-block;
  font-weight: 400;
  text-align: left;
  transform: translateZ(5px);
  transform-style: preserve-3d;
  transition: all .25s cubic-bezier(.2, 1, .2, 1);
  font-size: 1rem;
  line-height: 1.5;
  margin: .375rem .375rem .6875rem;
  padding: .375rem .75rem;
  box-shadow: 0 0 #d9d9d9, 0 0 #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 0 5px #d9d9d9, 2px 2.5px 4px #adb5bd, 0 -1px 2.5px #adb5bd;
  background-color: #fff;
  color: #343a40;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-decoration: none
}

kbd:after {
  border-radius: .5rem;
  border-width: .125rem;
  bottom: -10px;
  left: -.3125rem;
  right: -.3125rem;
  top: 0;
  transform: translateZ(-5px);
  border-color: #ccc
}

kbd:focus,
kbd:hover {
  transform: translate3d(0, 1px, 5px);
  box-shadow: 0 0 #d9d9d9, 0 0 #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 2px 2px 4px #adb5bd, 0 -1px 2px #adb5bd;
  background-color: #e6e6e6;
  color: #343a40;
  outline: none;
  text-decoration: none
}

kbd:focus:after,
kbd:hover:after {
  transform: translate3d(0, -1px, -5px)
}

kbd:active {
  border-color: transparent;
  transform: translate3d(0, 5px, 0);
  background-color: #e6e6e6;
  box-shadow: 0 0 1px 1px #d9d9d9;
  color: #343a40
}

kbd:active:after {
  transform: translate3d(0, -5px, 0)
}

kbd:disabled {
  cursor: not-allowed;
  opacity: .65;
  pointer-events: none
}

如果要有夜晚模式

  • 新增 highlight 資料夾 my-project/assets/scss/partials/highlight/
  • 新增 dark.scss 跟 light.scss 取代原本主題自帶的 scss
  • 貼上下面的內容，這些程式碼都是照搬主題原始的 scss
  • 調整配色變數（如果你不喜歡我的配色），並引用 kbd.scss
  • 加上 kbd.scss 放對應的 scss code
</> scss 📄 my-project/assets/scss/partials/highlight/dark.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/*
*   Style: monokai
*   https://xyproto.github.io/splash/docs/monokai.html
*/

$color: #f8f8f2;
$background-color: #272822;
$error-color: #bb0064;
$keyword-color: #66d9ef;
$text-color: $color;
$name-color: #a6e22e;
$literal-color: #e6db74;

// kbd colors
$kbd-fontcolor: #D5FFE4;
$kbd-box-shadow: #5b4f9d;
$kbd-box-shadow2: #6255ab;
$kbd-background-color: #6F61C0;
$kbd-after-border: #011a3c;
$kbd-hobver-background: #5b4f9d;

@import "common.scss";

// 在這邊引用
@import "kbd.scss"
</> scss 📄 my-project/assets/scss/partials/highlight/light.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/*
*   Style: monokailight
*   https://xyproto.github.io/splash/docs/monokailight.html
*/

$color: #272822;
$background-color: #fafafa;
$error-color: #960050;
$keyword-color: #00a8c8;
$text-color: #111111;
$name-color: #75af00;
$literal-color: #d88200;

// kbd colors
$kbd-fontcolor: #343a40;
$kbd-box-shadow: #d9d9d9;
$kbd-box-shadow2: #adb5bd;
$kbd-background-color: #fff;
$kbd-after-border: #ccc;
$kbd-hobver-background: #e6e6e6;

@import "common.scss";

// 在這邊引用
@import "kbd.scss"
</> scss 📄 my-project/assets/scss/partials/highlight/kbd.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

kbd {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid $kbd-hobver-background;
  border-radius: .25rem;
  display: inline-block;
  font-weight: 400;
  text-align: left;
  transform: translateZ(5px);
  transform-style: preserve-3d;
  transition: all .25s cubic-bezier(.2, 1, .2, 1);
  font-size: 1rem;
  line-height: 1.5;
  margin: .375rem .375rem .6875rem;
  padding: .375rem .75rem;
  box-shadow: 0 0 $kbd-box-shadow, 0 0 $kbd-box-shadow, 0 1px $kbd-box-shadow, 0 2px $kbd-box-shadow, 0 3px $kbd-box-shadow, 0 4px $kbd-box-shadow, 0 5px $kbd-box-shadow, 2px 2.5px 4px #adb5bd, 0 -1px 2.5px #adb5bd;
  background-color: $kbd-background-color;
  color: $kbd-fontcolor;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-decoration: none
}

kbd:after {
  border-radius: .5rem;
  border-width: .125rem;
  bottom: -10px;
  left: -.3125rem;
  right: -.3125rem;
  top: 0;
  transform: translateZ(-5px);
  border-color: $kbd-after-border
}

kbd:focus,
kbd:hover {
  transform: translate3d(0, 1px, 5px);
  box-shadow: 0 0 $kbd-box-shadow, 0 0 $kbd-box-shadow, 0 1px $kbd-box-shadow, 0 2px $kbd-box-shadow, 0 3px $kbd-box-shadow, 0 4px $kbd-box-shadow, 2px 2px 4px $kbd-box-shadow2, 0 -1px 2px $kbd-box-shadow2;
  background-color: $kbd-hobver-background;
  color: $kbd-fontcolor;
  outline: none;
  text-decoration: none
}

kbd:focus:after,
kbd:hover:after {
  transform: translate3d(0, -1px, -5px)
}

kbd:active {
  border-color: transparent;
  transform: translate3d(0, 5px, 0);
  background-color: $kbd-hobver-background;
  box-shadow: 0 0 1px 1px $kbd-box-shadow;
  color: $kbd-fontcolor
}

kbd:active:after {
  transform: translate3d(0, -5px, 0)
}

kbd:disabled {
  cursor: not-allowed;
  opacity: .65;
  pointer-events: none
}

完成🎉

參考來源

© 2021 - 2025 筆記Zone
使用 Hugo 建立
主題 Stack 由 Jimmy 設計