Featured image of post 拥抱最好用的hugo之stack
blog

拥抱最好用的hugo之stack

你值得拥有世界上最快的网站构建框架-hugo

🙃缘起:

*进坑Hugo这么久了,是时候也开一篇记录一下建站过程了.*本教程是面向小白而写的,所以可能有些东西写的很罗嗦,所以大佬手下留情.本文稍微有点长,所以请保持耐心.😅

写这篇的一个主要原因有三:

  1. 记录并回顾此站从新建文件夹到诞生的主要过程
  2. 帮助一些小白入坑hugo
  3. 使文章数加一(doge

📢声明:

由于本人人菜瘾大,技术十分之有限,写的代码非常之烂,都是本着能用就行写的,所以请大佬手下留情.

📑本篇教程编写环境:

操作系统: Windows 11 专业版 22H2

Microsoft Edge版本 107.0.1418.62 (正式版本) (64 位)

Markdown编辑器: Typora

博客配置编辑器: VS Code

命令行工具:Git、Terminal

Hugo版本:hugo extended0.107.0_windows-amd64

Hugo主题:hugo-theme-stack

使用的主要路径: 桌面、D盘

基本上就这些了….

🧀Hugo环境搭建

使用hugo之前,必须配置hugo环境,这跟hexo要安装node和npm差不多. 下载的操作建议按照先安装VScode再安装GIt的顺序操作,因为后面的Git有个设置选项需要先有VScode编辑器

🎈安装VScode

  1. 从官网获取VScode的安装包

    VScode官网: https://code.visualstudio.com/Download

  2. 打开安装包并安装,选择I accept the agreement,然后选择Next

  3. 全部打勾勾后选择下一步,这个很重要!

  4. 选择install开始安装,等待安装完成后选择Finish

  5. 至此,VScode就安装完成了,接下来安装Git

🎈安装Git

  1. 从官网下载Git的安装包

    Git官网下载地址: https://git-scm.com/download/win

  2. 打开下载好的安装包进行安装

  3. 直接默认安装路径然后选中下一步

  4. 直接下一步

  5. 这里很重要,如果之前没有安装vscode,这里就选不了该选项

  6. 后面的就全部默认就行,一直选next直到完成安装

  7. 至此,git安装完成,接下来进行hugo的安装

🎈安装hugo

  1. 从hugo官方github仓库下载hugo,记得必须使用带有extended的版本

    hugo官方下载地址: https://github.com/gohugoio/hugo/releases

  2. 在D盘下创建文件夹名为hugo,进入hugo文件夹下并创建名为bin的文件夹,将下载下来的zip文件解压到bin里面

    完整的路径即为: D:\hugo\bin

  3. 接下来设置hugo环境变量,依次打开设置,然后选择系统,滑到下面选择系统信息,打开高级系统设置

  4. 打开环境变量

  5. 分别进入一下选项中进行添加D:\hugo\bin\

  6. 检查一下hugo是否安装成功,打开cmd或终端输入hugo version,如果输出一下内容则证明配置成功

🎈小结

恭喜!到这里,基本就都配置完毕了,现在可以开始博客的搭建了

🎊Hugo博客搭建

🎈初始化博客

在桌面右键,选择在终端打开,然后输入以下命令

1

hugo new site blog

然后桌面会出现一个名为blog的文件夹,可以用VScode打开文件夹并打开终端进行后续操作

🎈hugo-theme-stack安装

  1. 删掉默认的配置文件config.toml

  2. 打开终端输入以下命令

    1
2
3

    git init
#获取主题文件
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

  3. 将获取到的主题文件中的exampleSite中的config.yaml拷贝到blog根目录中

    并进行配置,根据自己需要进行配置,这里我贴出自己的配置图共参考

    官方配置文档: https://stack.jimmycai.com/config/

      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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254

    baseurl: /
languageCode: zh-cn
theme: hugo-theme-stack
paginate: 5
title: L1nSn0w's Blog

languages:
    # en:
    #     languageName: English
    #     title: Example Site
    #     description: Example description
    #     weight: 2
    zh-cn:
        languageName: 中文
        title: L1nSn0w's Blog
        description: 演示说明
        weight: 1
    # ar:
    #     languageName: عربي
    #     languagedirection: rtl
    #     title: موقع تجريبي
    #     description: وصف تجريبي
    #     weight: 3

# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack

# GA Tracking ID
googleAnalytics: 

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon: /img/favicon.ico # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)

    footer:
        since: 2020
        customText: 

    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        emoji: 🍥
        subtitle: 无限进步.✍️
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

    article:
        math: false
        toc: true
        readingTime: true
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: true
        provider: waline

        disqusjs:
            shortname:
            apiUrl:
            apiKey:
            admin:
            adminLabel:

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/component.html
        waline:
            serverURL: xxx
            lang:
            pageview: true
            emoji:
                - https://cdn.jsdelivr.net/npm/sticker-heo@2022.7.5/Sticker-100/
            requiredMeta:
                - name
                - email
            locale:
                admin: 👻屑博主
                placeholder: 🎉留下你的脚印.

        twikoo:
            envId: 
            region:
            path:
            lang:

        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
        cactus:
            defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
            serverName: "cactus.chat"
            siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)

        giscus:
            repo:
            repoID:
            category:
            categoryID:
            mapping:
            lightTheme:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0

        gitalk:
            owner:
            admin:
            repo:
            clientID:
            clientSecret:

        cusdis:
            host:
            id:
    widgets:
        homepage:
            - type: search
            - type: archives
              params:
                  limit: 3
            - type: categories
              params:
                  limit: 10
            - type: tag-cloud
              params:
                  limit: 10
        page:
            - type: toc

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main: []

    social:
        - identifier: Travelling
          name: aTravelling
          url: https://travellings.link/
          params:
            newTab: false
            icon: train  

        - identifier: Wormhole
          name: aWormhole
          url: https://www.foreverblog.cn/go.html
          params:
            newTab: false
            icon: wormhole  

        - identifier: rss
          name: cRSS
          url: /index.xml
          params:
            newTab: true
            icon: rss

        - identifier: github
          name: dGitHub
          url: https://github.com/lin-snow
          params:
            newTab: true
            icon: brand-github

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    goldmark:
        renderer:
            ## Set to true if you have HTML content inside Markdown
            unsafe: true
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
        lineNos: true
        lineNumbersInTable: true
        tabWidth: 4

将~themes/hugo-theme-stack/exampleSite里的content整个文件夹复制到根目录中,然后即可在根目录的content中创建md文件进行blog了

🎈配置博客各个页面

这部分的配置在官方文档中很详细,就不重复造轮子了,直接给出官方文档

https://stack.jimmycai.com/config/menu

🎈开始创作

博客文章主要都存放在content中,这里可以参考一下我的content文件夹布局,例如我现在想要创建一篇文章,我们可以在blog根目录下打开终端输入hugo new post/2022/XXXX.md这条命令的意思是在conent/post/2022里创建一个名为XXXX.md的文件

官方写作文档: https://stack.jimmycai.com/writing/markdown

 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

├───categories
│   ├───blog
│   ├───css
│   ├───html
│   ├───ios
│   ├───jailbreak
│   ├───javascript
│   ├───软件
│   └───随笔
├───page
│   ├───about
│   ├───archives
│   ├───home
│   ├───links
│   ├───log
│   └───search
└───post
    ├───2021
    ├───2022
    │   ├───android-tv
    │   ├───app-store-good-things
    │   ├───join-hugo-and-stack
    │   ├───keykey
    │   ├───m73-hackintosh
    │   ├───send-file
    │   └───setup-apple-books

差不多就这些了,自己摸索一下还是能搞懂的….

🏐Hugo博客配合Action部署到Github

🎈注册GitHub

打开https://github.com/,(打不开的可能需要魔法,或者换个时间点打开,具体怎么操作就不细说了,懂得都懂😶),注册一个GitHub账号,如果不会注册那你还来看这篇文章干嘛.

🎈创建Github仓库

为了使用GitHub Action自动部署,加上便于管理,所以创建两个仓库,虽然一个也行.

  1. 我们先创建一个名字为blog的仓库用于存放hugo生成的文件,打开右上角的+号,然后选择New repository以新建仓库

  2. 跟着图片里的步骤操作,先给仓库取个名字,叫做blog(小白最好将仓库名字跟我起一样的),然后勾选public,接着勾选Add a REAMME file,最后点击Create repository完成创建.

  3. 接下来我们按照刚才那样依葫芦画瓢,再创建一个名为blog-file的仓库

🎈获取SSH Key密钥

ssh密钥可以是我们推送文件到仓库时不需要每次都输入密码,大大的提高我们的效率.所以我们首先需要在我们的电脑生成ssh密钥

1.在git bash执行以下指令,配置邮箱和用户名

1
2

git config --global user.email "you@example.com"   #you@example.com替换为你的邮箱并回车
git config --global user.name "Your Name"          #Your Name替换为你的名字并回车

2.生成shh key,在git bash中 输入以下命令

1

ssh-keygen -t rsa

一路回车就行

默认会生成在如下目录

1

C:\Users\用户名\.ssh

用记事本打开生成目录下id_rsa.pub,其中的内容即为公钥,id_rsa即为私钥.这两个待会要用到.

3.将将公钥配置到GitHub账户中,先打开设置,即Settings

进入SSH and GPG key配置项里,点击SSH keys下的New SHH key进行添加

4.然后随便在Title项里随便起一个名字,在Key里填入刚才得到的id_rsa.pub里的内容,然后点击Add SSH key就添加好了.

5.接下来我们需要往刚才创建的名为blog-file的仓库里添加id_rsa密钥,点击Settings,然后找到Secrets and variables,点击Actions,然后点击New repository secret

🎈部署hugo博客

1.接下来我们在我们的博客根目录下创建一个名为.github的文件夹,然后在文件夹里新建一个新的文件夹,名字为workflows,接着进入workflows文件夹里新建一个名为deploy.xml的文件,再在deploy.xml里填入如下内容,最终目录为~\blog\.github\workflows\deploy.xml,将deploy.xml中的external_repository项里的lin-snow改为你GitHub注册时的名字即可

 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

name: GitHub Page

on:
    push:
        branches:
            - main # master 更新触发

jobs:
    deploy:
        runs-on: ubuntu-18.04
        steps:
            - uses: actions/checkout@v2
              with:
                  submodules: true # clone submodules
                  fetch-depth: 0 # 克隆所有历史信息

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "0.104.1" # Hugo 版本
                  extended: true # hugo插件版 Stack主题 必须启用

            - name: Cache resources # 缓存 resource 文件加快生成速度
              uses: actions/cache@v2
              with:
                  path: resources
                  # 检查照片文件变化
                  key: ${{ runner.os }}-hugocache-${{ hashFiles('content/**/*') }}
                  restore-keys: ${{ runner.os }}-hugocache-

            - name: Build # 生成网页 删除无用 resource 文件 削减空行
              run: hugo --minify --gc

            - name: Deploy # 部署到 GitHub Page
              uses: peaceiris/actions-gh-pages@v3
              with:
                  # 如果在同一个仓库下使用请使用 github_token 并注释 deploy_key
                  # github_token: ${{ secrets.GITHUB_TOKEN }}
                  deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}

                  # 如果在同一个仓库请注释
                  external_repository: lin-snow/blog # 你的 GitHub page 仓库 example/example.github.io

                  publish_dir: ./public
                  user_name: "github-actions[bot]"
                  user_email: "github-actions[bot]@users.noreply.github.com"
                  full_commit_message: Deploy from ${{ github.repository }}@${{ github.sha }} 🚀

2.然后在博客根目录文件夹下新建一个名为deploy.sh的文件用于一键部署博客,在deploy.sh中填入如下内容,其中最后一行代码里的git@github.com:lin-snow/blog-file.git需要更改为你自己仓库的地址,可以通过如下图片中的操作获得该地址

1
2
3
4
5
6
7
8
9

hugo #构造你的blog

git init #初始化git

git add -A

git commit -m 'deploy'

git push -f git@github.com:lin-snow/blog-file.git main#向存储库推送

然后双击打开运行deploy.sh即可自动推送文件到仓库,以后写完博客或修改博客后都需要运行一下deploy.sh,才能部署到云端

3.接下来我们先运行deploy.sh推送一下文件到仓库,等推送上去之后,我们才能完成接下来的操作.

注意,第一次运行deploy.sh可能会出现如图这种情况,直接输入yes回车即可,如果仓库里没发现上传的文件可以再运行一次deploy.sh

这里贴出我的GitHub Action运行状况

🎈开启Github Page

等待Github Action完成后,我们需要开启GitHub page,首先进入blog这个仓库,然后打开设置,找到page项,根据如下设置即可.

到这里我们就成功上线我们的博客了.至于自定义域名可以在网上找到很多教程,这里就不写了,毕竟我比较懒.

🍥Hugo主题魔改

由于之前魔改部分写的很慢,又考虑过出个魔改好的主题直接给人们用,后来想想了还是算了,毕竟博客怎么能缺少折腾的乐趣呢,于是乎我花了点时间把魔改内容进行了一些休整,以内容呈现为核心,放弃了很多花哨的东西,加上考虑到魔改的难易程度与网页加载快慢,最后精简成一个custom.scss文件,并做了注释,直接使用即可完成一些个性化调整.由于本人纯小白,所以可能还有可以优化的地方,如果你有更好的方案欢迎在下方探讨交流.🤔

首先在博客根目录下的assets下创建一个名为scss的文件夹,然后在scss文件夹里创建一个名为custom.scss的文件,最终效果为~blog/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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346

// 页面基本配色
:root {

    // 文章内容图片圆角阴影
    .article-page .main-article .article-content {
        img {
            max-width: 96% !important;
            height: auto !important;
            box-shadow: 0 0px 14px 2px #aeaeae85;
            border-radius: 8px;
        }
    }

    // 文章内容引用块左边样式
    .article-content {
        blockquote {
            border-left: 6px solid #358b9a1f !important;
            background: #3a97431f;
        }
    }

    //light模式下的背景色
    --body-background: #f6f9fd;
    // light模式下的文章卡片配色
    --card-background: #ffffff;
    //文章卡片标题字体
    ----card-text-color-main: rgb(36 41 46);
    // 标题左栏小白条调整
    --heading-border-size: 8px;
    // 全局顶部边距
    --main-top-padding: 30px;
    // 全局卡片圆角
    --card-border-radius: 25px;
    //标签云卡片圆角
    --tag-border-radius: 14px;
    // 卡片间距
    --section-separation: 32px;
    // 行内代码背景色
    --code-background-color: #f8f8f8;
    // 行内代码前景色
    --code-text-color: #e96900;
    // 表格配色样式
    --tr-even-background-color: #eff0fa54 !important;
    // 全局字体大小
    --article-font-size: 2rem;

    &[data-scheme="dark"] {
        //dark模式下的背景色
        --body-background: #000;
        //dark模式下文章卡片背景色
        --card-background: #191c24;
        //文章卡片标题字体
        ----card-text-color-main: rgb(36 41 46);
        // 表格配色样式
        --tr-even-background-color: #1e242ecf !important;
        // 行内代码背景色
        --code-background-color: #ff6d1b17;
        // 行内代码前景色
        --code-text-color: #e96900;
    }
}

// ---------------------------------------

// 设置选中字体的区域背景颜色
//修改选中颜色
::selection {
    color: #fff;
    background: #34495e;
}

a {
    text-decoration: none;
    color: var(--accent-color);

    &:hover {
        color: var(--accent-color-darker);
    }

    &.link {
        color: #4288b9ad;
        font-weight: 600;
        padding: 0 2px;
        text-decoration: none;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}

// --------------------------------
// 菜单栏样式
// 下拉菜单改圆角样式
.menu {
    padding-left: 0;
    list-style: none;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    flex-grow: 1;
    font-size: 1.8rem;
    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;
            }
        }
    }
}

// 社交菜单居中
.social-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;

    #设置居中 svg {
        width: 24px;
        height: 24px;
        stroke: var(--body-text-color);
        stroke-width: 1.33;
    }
}

//---------------------------------------

// 目录滚动条美化
.widget--toc {
    #TableOfContents {
        max-height: 65vh;

        ol,
        ul {
            list-style-type: none;
        }

        li {
            margin: 10px 10px;

            &>ol,
            &>ul {
                margin-top: 10px;
                padding-left: 10px;
                margin-bottom: -5px;

                &>li:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

//菜单滚动条美化 
.menu::-webkit-scrollbar {
    display: none;
}

// 全局滚动条美化
html {
    ::-webkit-scrollbar {
        width: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }
}

//------------------------------------------------

//友情链接三栏
@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;
            }
        }
    }
}

//----------------------------------------

//----------------------------------------------

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

//---------------------------------------

// 页面引入字体
// body {
//     /* Screen version */
//     font-family: "LXGW WenKai Screen", sans-serif;
//   }

//----------------------------------------------

//文章封面高度更改
.article-list article .article-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;

    @include respond(md) {
        height: 200px;
    }

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

//-----------------------------------------------

//全局页面布局间距调整
.main-container {
    min-height: 100vh;
    align-items: flex-start;
    padding: 0 15px;
    gap: var(--section-separation);
    padding-top: var(--main-top-padding);

    @include respond(md) {
        padding: 0 80px;
    }
}

//-----------------------------------------------

// 修复引用块内容
a {
    word-break: break-all;
}

code {
    word-break: break-all;
}


//-----------------------------------------------------

//全局页面小图片样式微调
.article-list--compact article .article-image img {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover;
    border-radius: 27%;
}

大家可以根据需要调试更改和增删一些参数,后续的魔改内容也会更新在这个文件里.😀如果你有什么好的想法欢迎在评论区留言交流.

🍀参考及鸣谢

主题文档:https://stack.jimmycai.com/

hugo文档:https://gohugo.io/

github action参考:Stack主题 + GitHub Action (zhixuan.dev)

魔改参考自:

Hugo Stack主题更新小记 (xrg.fj.cn)

Hugo Stack 主题配置与使用 | Bore’s Notes

墨纹 (munlelee.github.io)

SSpiritsの秘密基地 (lv5.moe)

『Hugo』Hugo Styles (echosec.top)

….

blog
Licensed under CC BY-NC-SA 4.0