Hugo

Hugo Stack 主题美化

字数: 6256

Hugo 目录结构 

 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

.
├── archetypes                  
│   └── default.md				# hugo新建文章的默认模板
├── config.yaml                 # 网站配置文件
├── content                     # 站点内的内容都在这里
│   ├── categories              # “分类”页面的首页
│   │   └── Test                # “分类”页面下的一个具体分类页面
│   ├── page                    # 显示在网站主页左侧边栏菜单的选项（导航栏）
│   │   ├── about               # 左侧边栏菜单中的“关于”页面
│   │   ├── archives            # 左侧边栏菜单中的“归档”页面
│   │   ├── links               # 左侧边栏菜单中的“链接”页面
│   │   └── search              # 左侧边栏菜单中的“搜索”页面
│   └── post                    # 用户写的帖子都放在这里，每个子文件夹对应一个帖子
│       ├── 2024
│            ├── 09
│                ├── 文章目录
│					  ├── .md
│					  ├── .img
│			 ├── 10
│                ├── 文章目录
│					  ├── .md
├── data
├── layouts
├── LICENSE
├── README.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static                     # 放用户自定义字体、用户头像、网站小图标等
└── themes                     # 放各种主题
    └── hugo-theme-stack       # stack主题
        ├── archetypes
        ├── assets
        ├── config.yaml
        ├── data
        ├── debug.sh
        ├── exampleSite
        ├── go.mod
        ├── i18n
        ├── images
        ├── layouts
        ├── LICENSE
        ├── netlify.toml
        ├── README.md
        └── theme.toml

hugo.yaml 配置文件详解 

  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
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

baseurl: https://example.com/
languageCode: zh-cn 
theme: hugo-theme-stack # 主题
title: 额，随便测试 # 这个没用
copyright: Wei Qi   # 这个是在页脚显示的
TimeZone: Asia/Shanghai

DefaultContentLanguage: zh-cn # 中文支持
hasCJKLanguage: true # 如果是中文就设置为true，否则设置为false

languages:  # 多语言支持
    zh-cn:
        languageName: 中文
        title: 网站名称
        weight: 2
        params:
            description: 网站描述

services:   # 主题配置
    disqus:
        shortname: "hugo-theme-stack"
        
pagination:
    pagerSize: 6	# 页面显示的文章数量
        
params:
    mainSections:
        - post		# 首页显示的文章所在路径，即首页会显示 hugo/content/post/ 下的所有文章
    featuredImageField: image
    rssFullContent: true
    favicon: /favicon.ico    # 网站的图标，放到主题根目录下
    footer:
        since: 2024 # 页脚显示年份的开始年份
	dateFormat:	# 时间显示格式
        published: 2006年1月2日 # Jan 02, 2006
        lastUpdated: 2006年1月2日 15:04 # Jan 02, 2006 15:04 MST

	sidebar:
        emoji: 🍥
        subtitle: Life is Passion !  # 头像下边的文字
        avatar:
            enabled: true
            local: false	# false 头像才显示本地的图片
            src: /img/tx.png	# 放到 hugo/static/img/ 下边，没有 img 则新建
            
	article:    # 文章页配置
        math: false # 启用数学公式
        toc: true   # 文章显示目录
        readingTime: true   # 文字显示阅读时间
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0 # 默认的版权许可

	comments:   # 评论系统
        enabled: false	# 开评论则为 true，需要到网上搜索相关的配置
        provider: disqus
        
    widgets:	# 右侧导航栏，即在页面右边显示：搜索、归档、标签，将对应的 type 注释掉则不显示
        homepage:
            - type: search  # 首页搜索框
            - type: archives    # 首页归档
              params:
                  limit: 5
            - type: categories  # 首页分类
              params:
                  limit: 10
            - type: tag-cloud   # 首页标签云
              params:
                  limit: 10
        page:
            - type: toc # 文章目录
            
    colorScheme:
        # Display toggle
        toggle: true    # 显示切换暗色模式按钮

        # Available values: auto, light, dark
        default: auto   # 默认主题模式

    imageProcessing:
        cover:
            enabled: true   # 是否启用封面图
        content:
            enabled: true   # 是否启用内容图片
            
menu:   # 菜单、导航栏
    main: []	# 这里不配置，配置菜单最好是在 hugo/content/page/ 下加 .md 文件
    
    social: # 头像下边的社交链接
        - identifier: github
          name: GitHub
          url: # https://github.com/CaiJimmy/hugo-theme-stack
          params:
              icon: brand-github

        - identifier: twitter
          name: Twitter
          url: # https://twitter.com
          params:
              icon: brand-twitter

related:    # 相关文章
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200
          
markup:
    goldmark:
        # 这里是 goldmark 渲染选项，默认即可


    tableOfContents:    # 文章目录（右边），层级
        endLevel: 5		# 显示几层标题
        ordered: true	# 标题显示序号，false则无序
        startLevel: 2	# 从第几级标题开始显示

    highlight:	# 代码块高亮
        noClasses: false	# 不启用特定css类高亮
        codeFences: true	# 启用代码块
        guessSyntax: true	# 自动识别语法
    #     lineNoStart: 1
        lineNos: true		# 启用行号
    #     lineNumbersInTable: true
    #     tabWidth: 4
        style: github-dark	# 代码块样式


frontmatter:
  lastmod: :fileModTime		# 文章末尾显示文章的更新时间

站点配置

网站图标

根据上边的 【hugo.yaml 配置文件】，把 .ico 文件放到主题的根目录下，然后修改

1

favicon: /favicon.ico

首页头像

根据上边的 【hugo.yaml 配置文件】，把 .png 放到 hugo/static/img/ 下，然后修改

1
2
3
4
5
6
7

    sidebar:
        emoji: 🍥
        subtitle: 好好生活  # 头像下边的文字
        avatar:
            enabled: true
            local: false # true 这里要改为 false 才生效
            src: /img/tx.png # 头像

网站名称

根据上边的 【hugo.yaml 配置文件】，自己改改 languages

导航栏

根据上边的 【Hugo 目录结构】，将 hugo-theme-stack\exampleSite\content 的内容放到 hugo/content/ 下，其中 page 目录就是导航栏。

站点底部文字

底部文字在 hugo-theme-stack/layout/partials/footer/footer.html 里，相关的网安备案、ICP备案、使用Hugo构建、文章数量、访问人数等文字都写在这里。

更改“使用 Hugo 构建 主题Stack由Jimmy设计”等字样

hugo-theme-stack/layout/partials/footer/footer.html 注释掉原先的代码，注意是 <section class="powerby"> 里边

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

<section class="powerby">
    ......
<!-- {{- $Generator := `<a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a>` -}}
{{- $Theme := printf `<b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="%s">Stack</a></b>` $ThemeVersion -}}
{{- $DesignedBy := `<a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>` -}}
{{ T "footer.builtWith" (dict "Generator" $Generator) | safeHTML }}  {{ T "footer.designedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML }} -->

<!-- 加入这串 -->
    <section class="powerby">
           <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="3.27.0">Stack</a></b> <a>designed by Jimmy</a>
    </section>
<!-- 结束 -->

</section>

效果就如现在的网站一致。

[!CAUTION]

由于自己不会写相关的代码，所以这个操作是：

在网页上，F12控制台找到该相关元素，右键选择【编辑为 HTML 】，将这段 HTML 代码复制贴贴到 footer.html 里，然后再修改文字

添加备案

hugo-theme-stack/layout/partials/footer/footer.html 在 <section class="powerby"> 里边，自己调整代码的位置，看得舒服就行。

1
2

<a href="https://beian.miit.gov.cn/" target="_blank">X ICP 备 2024XXXXXX 号</a> <br/>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=XXXXXXXXXXXX" target="_blank">XX网安备 XXXXXXXXXX 号</a>

统计站点文章数量和字数

参考：多语言 hugo 添加总字数统计和建站时间 - 滑翔闪’S BLOG (huaxiangshan.com)

hugo-theme-stack/layout/partials/footer/footer.html 在 <section class="powerby"> 里边，加入

1
2
3
4
5
6
7

        {{ $articleCount := len .Site.RegularPages }}
        {{ $totalWordCount := 0 }}
        {{ range .Site.Pages }}
        {{ $totalWordCount = add $totalWordCount .WordCount }}
        {{ end }}

        <p>发布了 {{ $articleCount }} 篇文章 | 共 {{$totalWordCount}} 字</p>

效果如下：

但是我觉得这个效果不好，用 k 来做单位会更直观一些。所以做如下修改：

1
2
3
4
5

        {{ $totalWordCountInK := div $totalWordCount 100.0 }}
        {{ $totalWordCountInKCeiling := math.Ceil $totalWordCountInK }}
        {{ $totalWordCountInKFloat := div $totalWordCountInKCeiling 10.0 | printf "%.1f"}}
        
        <p>发布了 {{ $articleCount }} 篇文章 | 共 {{ $totalWordCountInKFloat }}K 字</p>

效果如下：

站点访问人数统计

参考：Hugo+Stack主题集成Vercount统计网站访问信息 (farb.top)

1）在 hugo-theme-stack/layout/partials/footer/custom.html 加入

1

<script defer src="https://cn.vercount.one/js"></script>

2）在 hugo-theme-stack/layout/partials/footer/footer.html 在 <section class="powerby"> 里边，加入（合适的位置，看着舒服就行）

1

<a>总访客数: </a><span id='busuanzi_value_site_uv'>Loading</span> <a> | </a> <a>总访问量: </a><span id='busuanzi_value_site_pv'>Loading</span></br>

页面加载进度条显示

在 hugo-theme-stack/layout/partials/footer/custom.html 加入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<!-- layouts/partials/footer/custom.html -->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"
    integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"
    crossorigin="anonymous"
></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"
    integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"
    crossorigin="anonymous"
/>
<script>
    NProgress.start();
    document.addEventListener("readystatechange", () => {
        if (document.readyState === "interactive") NProgress.inc(0.8);
        if (document.readyState === "complete") NProgress.done();
    });
</script>

首页设置

首页全局配置

在 hugo-theme-stack/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

/*---------------全局设置-------------*/
:root {
  --card-border-radius: 20px; //小卡片圆角
  --article-font-size: 1.7rem; // 全局字体大小
  //--card-background: #ffffff;//小卡片背景颜色
  //--body-text-color: rgba(171, 169, 169, 0.58);//字体颜色


}


/*选中文字颜色*/
::selection {
  color: #fff;
  background: #557697;
}


/*滚动条样式*/
html {
  ::-webkit-scrollbar {
    width: 18px;
    //display: none; //隐藏滚动条
  }

  ::-webkit-scrollbar-track {
    //background-color: #fff; //滚动条背景颜色
  }

  ::-webkit-scrollbar-thumb {
    //鼠标移动上去前的滚动条颜色
    background-color: rgba(111, 114, 115, 0.65); 
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    //鼠标移动上去时的滚动条颜色
    background-color: #232525; 
  }
}

首页欢迎栏

1）在 hugo-theme-stack/layouts/index.html 里加入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 首页欢迎字幅 -->
<div class="welcome">
  <p style="font-size: 2rem; text-align: center; font-weight: bold">
    <span class="shake">👋</span>
    <span class="jump-text1" > Welcome</span>
    <span class="jump-text2"> To </span>
    <span class="jump-text3" style="color:#e99312">Wei Qi</span>
    <span class="jump-text9" style="color:#e99312">Blog</span>
  </p>
  </div>
<!-- 首页欢迎字幅 -->

位置如下：

2）在 hugo-theme-stack/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
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108

//首页欢迎板块样式
.welcome {
  color: var(--card-text-color-main);
  background: var(--card-background);
  box-shadow: var(--shadow-l2);
  border-radius: 30px;
  display: inline-block;
}

// 👋emoji实现摆动效果
.shake {
  display: inline-block;
  animation: shake 1s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: shake;
  animation-timeline: auto;
  animation-range-start: normal;
  animation-range-end: normal;
  animation-delay: 2s;
  @keyframes shake {
    0% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(45deg) scale(1.2);
    }
    50% {
      transform: rotate(0) scale(1.2);
    }
    75% {
      transform: rotate(45deg) scale(1.2);
    }
    100% {
      transform: rotate(0);
    }
  }
}
// 实现字符跳动动画
.jump-text1 {
  display: inline-block;
  animation: jump 0.5s 1;
}

.jump-text2 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.1s;
}

.jump-text3 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.2s;
}

.jump-text4 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.3s;
}

.jump-text5 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.4s;
}

.jump-text6 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.5s;
}

.jump-text7 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.6s;
}

.jump-text8 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.7s;
}

.jump-text9 {
  display: inline-block;
  animation: jump 0.5s 1;
  animation-delay: 0.9s;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

首页文章布局

在 hugo-theme-stack/assets/scss/custom.scss 加入

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

/*主页布局间距调整*/
.main-container {
  gap: 50px; //文章宽度

  @include respond(md) {
    padding: 0 30px;
    gap: 40px; //中等屏幕时的文章宽度
  }
}

.related-contents {
  overflow-x: visible; //显示隐藏的图标
  padding-bottom: 15px;
}

首页文章样式

在 hugo-theme-stack/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

/*主页文章图片样式*/
$image-scale: 1.2;
.article-list article .article-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  //不同显示器（手机，小屏幕电脑，大屏幕电脑）显示的图片高度大小
  @include respond(sm) {
    height: 305px;
  }

  @include respond(md) {
    height: 305px;
  }
  @include respond(xl) {
    height: 325px;
  }
}

/*主页文章图片圆角*/
.article-list article {
  --card-border-radius: 24px;
}

/*文章标签圆角*/
.article-category a, .article-tags a {
  border-radius: 11px;
}


/*鼠标移动到文章图片放大*/
.article-list article .article-image {
  position: relative;
  overflow: hidden; //不显示超出的部分
}

.article-list article .article-image img:hover {
  transform: scale($image-scale); //放大尺寸
}

.article-list article .article-image img {
  transition: transform 0.85s ease-in-out;//持续时间
}

文章内部图片样式

在 hugo-theme-stack/assets/scss/custom.scss 加入

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

/*文章内部-页脚-相关文章图片圆角*/
.article-list--compact article .article-image img {
  border-radius: 17%;
}


/*文章内部-页脚-相关文章图片放大动画*/
.article-list--compact article > a {
  transition: .6s ease;
}

.article-list--compact article > a:hover {
  transform: scale(1.03, 1.03);
  overflow: visible;
}

首页右侧导航栏美化

在 hugo-theme-stack/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

/*------------------右侧导航栏--------------*/
/*搜索菜单动画*/
.search-form.widget {
  transition: transform 0.6s ease;
}

.search-form.widget:hover {
  transform: scale(1.1, 1.1);
}


/*归档小图标放大动画*/
.widget.archives .widget-archive--list {
  transition: transform .3s ease;
}

.widget.archives .widget-archive--list:hover {
  transform: scale(1.05, 1.05);
}


/*右侧标签放大动画*/
.tagCloud .tagCloud-tags a {
  border-radius: 10px;
  font-size: 1.4rem;
  transition: transform .3s ease;
}

.tagCloud .tagCloud-tags a:hover {
  transform: scale(1.1, 1.1);
}

首页左侧导航栏美化

在 hugo-theme-stack/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
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215


/*--------------------左侧导航栏---------------*/
.left-sidebar {
  --sidebar-avatar-size: 115px; //左侧头像大小
  --sidebar-element-separation: 15px; //头像下方间距
  --emoji-size: 40px; //emoji容器大小
  --emoji-font-size: 25px; //emoji字体大小
}



/*头像旋转动画*/
.sidebar header .site-avatar .site-logo {
  transition: transform 1.65s ease-in-out; //旋转时间

}

.sidebar header .site-avatar .site-logo:hover {
  transform: rotate(360deg); //旋转角度为360度
}


/*社交菜单居中*/
.social-menu svg {
  gap: 15px;
  justify-content: center;
  width: 30px;
  height: 30px; //社交菜单大小
  stroke: var(--body-text-color);
  stroke-width: 1.33;
}


/*暗色模式按钮距离上边按钮边距调整*/
.menu .menu-bottom-section {
  margin-top: 70px;
}

// #dark-mode-toggle {
//   gap: 30px; //暗色模式横向长度
// }


/*下拉菜单美化*/
.menu {
  list-style: none;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll; //搭配菜单滚动条美化使用
  flex-grow: 1;
  font-size: 1.7rem;
  // background-color: rgb(252, 252, 252);

  box-shadow: var(--shadow-l2); //改个阴影
  display: none;
  margin: 0; //改为0
  // border-radius: 20px; //加个圆角 	这个圆角看起来怪怪的，不适合，注释掉
  padding: 30px 30px;

  @include respond(xl) {
    padding: 15px 0;
  }

  &,
  .menu-bottom-section {
    gap: 30px;

    @include respond(xl) {
      gap: 25px;
    }
  }

  &.show {
    display: flex;
  }

  @include respond(md) {
    align-items: flex-end;
    display: flex;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    margin: 0;
  }

  li {
    position: relative;
    vertical-align: middle;
    padding: 0;

    @include respond(md) {
      width: 100%;
    }

    svg {
      stroke-width: 1.33;

      width: 20px;
      height: 20px;
    }

    a {
      height: 100%;
      display: inline-flex;
      align-items: center;
      color: var(--body-text-color);
      gap: var(--menu-icon-separation);
    }

    span {
      flex: 1;
    }

    &.current {
      a {
        color: var(--accent-color);
        font-weight: bold;
      }
    }
  }
}


/*手机模式下的菜单滚动条美化*/
.menu::-webkit-scrollbar {
  display: none; //防止大屏幕时出现滚动条
}

.sidebar header .site-name {
  margin: 8px;
  font-size: 2rem; //字体大小
}


// --------------------------------
// 菜单栏样式
// 下拉菜单改圆角样式
.menu {
  padding-left: 0;
  list-style: none;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  flex-grow: 1;
  font-size: 1.6rem;
  background-color: var(--card-background);

  box-shadow: var(--shadow-l2); //改个阴影
  display: none;
  margin: 0; //改为0
  border-radius: 10px; //加个圆角
  padding: 30px 30px;

  @include respond(xl) {
    padding: 15px 0;
  }

  &,
  .menu-bottom-section {
    gap: 30px;

    @include respond(xl) {
      gap: 25px;
    }
  }

  &.show {
    display: flex;
  }

  @include respond(md) {
    align-items: flex-end;
    display: flex;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    margin: 0;
  }

  li {
    position: relative;
    vertical-align: middle;
    padding: 0;

    @include respond(md) {
      width: 100%;
    }

    svg {
      stroke-width: 1.33;

      width: 20px;
      height: 20px;
    }

    a {
      height: 100%;
      display: inline-flex;
      align-items: center;
      color: var(--body-text-color);
      gap: var(--menu-icon-separation);
    }

    span {
      flex: 1;
    }

    &.current {
      a {
        color: var(--accent-color);
        font-weight: bold;
      }
    }
  }
}

归档页面双栏样式

在 hugo-theme-stack/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

/*----------------归档页面---------------*/
/*归档页面卡片缩放*/
.article-list--tile article {
  transition: .6s ease;
}

.article-list--tile article:hover {
  transform: scale(1.03, 1.03);
}

/* 归档页面两栏 */
@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;
      border-radius: 16px;
    }
  }
}

链接页面三栏样式

在 hugo-theme-stack/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

/*--------------*-链接页面-----------------*/
/*友情链接设置成三栏样式*/
@media (min-width: 1024px) {
  .article-list--compact.links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: none;
    box-shadow: none;
    gap: 1rem;

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

      &:nth-child(odd) {
        margin-right: 8px;
      }
    }
  }
}

首页显示文章

根据 【hugo.yaml 配置文件详解】，修改参数 mainSections

1
2
3

params:
    mainSections:
        - post # hugo/content/post/ 下的所有文章都能显示，不然首页不显示文章

单页文章数量设置

根据 【hugo.yaml 配置文件详解】，修改参数 pagerSize

1
2

pagination:
    pagerSize: 8	# 改这个

文章设置

文章生成模板

修改 hugo/archetypes/default.md

1
2
3
4
5
6
7

title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = false
categories = ["Category"]
tags = ["Tag"]
description = ["描述"]
keywords = ["关键词"]

然后使用 hugo new content/post/xxxx.md 命令时，生成的 .md 文件，就是根据这个模块生成的。

文章目录层级显示问题

如果我们在文章时，标题前喜欢带个数字，例如：

1
2
3

1.标题
1.1 标题
1.1.1 标题

如果 hugo.yaml 中，ordered: true

1
2
3
4

    tableOfContents:    # 侧边栏目录（右边），层级
        endLevel: 5
        ordered: true 
        startLevel: 2

网页渲染时，会变成这样

1
2
3

1 1.标题
1.1 1.1 标题
1.1.1 1.1.1 标题

1）一种是文章里自带数字标题，则 ordered: false

2）另一种是文章里标题不带数字，则 ordered: true

文章图片不显示问题

参考：图片类型 - 文档 - Hugo 图片模块 | HugoMods

我用的 Typora，其他应用写的 md 大概也是这样

做法：

1）我在 hugo/content/post/2024/10/ 创建一个文章目录：HugoStack主题美化

2）然后到里边，hugo/content/post/2024/10/HugoStack主题美化/ 创建 index.md （名字一定要叫 index ）

3）.md 里对图片进行设置，这样直接把图片贴进去就行了。

4）如果不是 Typora，则需要在 index.md 的同级目录创建一个目录，例如 hugo/content/post/2024/10/HugoStack主题美化/img/ ，图片放到 img 目录下，然后引用：

1

![图片描述可忽略](img/1727420925875.png)

[!NOTE]

Hugo 好像是只渲染 index.md 的图片，如果 .md 文件名不是 index ，则里边的图片是不显示的。

文章代码块样式

代码块高亮

在 hugo.yaml 中，添加 highlight 参数，我文章里的代码块配置是这样子的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

markup:
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
    #     lineNoStart: 1
        lineNos: true
    #     lineNumbersInTable: true
    #     tabWidth: 4
        style: github-dark

代码块样式

在 hugo-theme-stack/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

//为代码块顶部添加macos样式
.article-content {
  .highlight:before {
    content: "";
    display: block;
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    height: 12px;
    width: 12px;
    margin-bottom: 5px;
  }
}

// 代码块基础样式修改
.highlight {
  max-width: 102% !important;
  background-color: var(--pre-background-color);
  padding: var(--card-padding);
  position: relative;
  border-radius: 20px;
  margin-left: -7px !important;
  margin-right: -12px;
  box-shadow: var(--shadow-l1) !important;

  &:hover {
    .copyCodeButton {
      opacity: 1;
    }
  }

  // keep Codeblocks LTR
  [dir="rtl"] & {
    direction: ltr;
  }

  pre {
    margin: initial;
    padding: 0;
    margin: 0;
    width: auto;
    // background-color: #282c34 !important;
  }
}


// light模式下的代码块样式调整
[data-scheme="light"] .article-content .highlight {
  background-color: #fff9f3;
}

[data-scheme="light"] .chroma {
  color: #ff6f00;
  background-color: #fff9f3cc;
}

文章统计字数

参考：为 Hugo 博客添加字数统计 - Mogeko’s Blog

1）在 hugo-theme-stack/layouts/paritals/article/components/details.html 加入

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

<footer class="article-time">
    ...
    
        {{ if .WordCount }}
        <footer class="article-wordcount">
            <div>
                {{ partial "helper/字数.svg" }}
                <span class="article-wordcount--count">{{ T "article.wordCount" .WordCount }}</span>
            </div>
        </footer>
        {{ end }}
    
    ...
</footer>

注意：{{ partial "helper/字数.svg" }} 这里是把 .svg 图片放到 hugo-theme-stack/layouts/paritals/helper/字数.svg ，这里看代码前边的显示阅读时间引用了 helper 里的内容，所以我这里也放到这里。不用图片的话可以删掉。

2）在 hugo-theme-stack/i18n/zh-cn.yaml 中的 article 下，加入

1
2

    wordCount:
        other: "字数: {{ .Count }}"

3）这个时候，预览会发现，字数的字体相当大，与日期、阅读时间不协调，所以得更改它们的样式，保持统一。在 hugo-theme-stack/assets/scss/custom.scss 加入

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

// 阅读时间、字数样式
.article-time {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.article-time div {
  margin-right: 10px;
}

.article-time--count {
  font-size: 14px;
  color: #666;
}

效果：

如果需要在字数前边加个小图标，则需要把小图标放到这里 hugo-theme-stack/layouts/partials/helper/xxx.svg 下，然后需要把 .svg 文件里的前缀给删掉，这个前缀删掉才可以：

1

<?xml version="1.0" standalone="no"?>

效果：

致谢

美化过程中，参考了很多优秀的博主博客：

博客切换到STACK 主题 (skfwe.cn)

Hugo博客 | stack主题修改第一站 (munlelee.github.io)

Hugo-theme-Stack 魔改美化 | Naive Koala (xalaok.top)

基于 Hugo 的网站搭建日志 02 (lovir.cn)

不是从零开始的 Hugo 建站笔记 (fourxiajiao.github.io)

Hugo | Hugo-stack-theme 主题魔改版 (qjwhz.top)

（3）Stack主题的自定义 (linsnow.cn)

使用 Hugo 对博客的重建与 Stack 主题优化记录 (oxidane-uni.github.io)

HUGO+Stack 下的美化修改 (shimoko.com)

时隔半年，博客又有了那些新变化？！ (irithys.com)

END
Hugo
Licensed under CC BY-NC-SA 4.0
最后更新于 2024年10月15号 16:54