博客切换到STACK 主题

由于 Even 没有暗色模式而且右侧的导航栏还不能单独滚动, 最近抽空试了一个新的主题
感觉很NICE, 不仅支持暗色模式, 右侧的文章导航栏还可以单独滚动, 还支持站内搜索

安装

1
2
3


cd ~/hugo_blog
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

切换主题

1
2
3


cd ~/hugo_blog
mv config.toml config.toml_bak    # 把原来的配置Even 的文件备份一下
cp themes/hugo-theme-stack/exampleSite/config.yaml .

配置主题

需要注意的是 Stack 使用的是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
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


baseURL: "https://www.skfwe.cn"    # ubuntu
# baseURL: "http://localhost:1313"     # debug
# baseURL: "https://skfwe.gitee.io/skfwe.io"     # gitee pages 上传上去后还要进到服务->Pages 里面点击更新重新布置才可生效

languageCode: zh-cn
theme: hugo-theme-stack
paginate: 5
title: 与其感慨路难行，不如马上出发

languages:
    en:
        languageName: English
        title: "WCQ's Blog"
        weight: 1
    zh-cn:
        languageName: 中文
        title: 一不留神的博客
        weight: 2
    ar:
        languageName: عربي
        languagedirection: rtl
        title: موقع تجريبي
        weight: 3

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

# GA Tracking ID
googleAnalytics: UA-232146632-1

# 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:

    footer:
        since: 2022
        customText:

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

    sidebar:
        emoji: 🍥
        subtitle: Guangdong University of Technology
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

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

    comments:
        enabled: true
        provider: utterances

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

        utterances:
            repo: wcq062821/blog_data
            issueTerm : pathname
            label: none

        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:
            lang:
            pageview:
            emoji:
                - https://unpkg.com/@waline/emojis@1.0.1/weibo
            requiredMeta:
                - name
                - email
                - url
            locale:
                admin: 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: 10
            - 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: github
          name: GitHub
          url: "https://github.com/wcq062821"
          params:
              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

:@ 注意: renderer: unsafe 那里一定要设成true 不然在markdown 插入的html 无效, 不能排版图片并列显示的效果

添加搜索栏

1
2
3


cd ~/hugo_blog
mkdir content/page
cp -rf themes/hugo-theme-stack/exampleSite/content/page/search/ content/page/

注意: 如果在网站上搜索出现

是因为网页中有http 的链接, 找到对应的代码把http 改成https 就可以了
一般来说Stack 主题都不出现这种不安全链接, 重点检查配置文件中的 baseURL
如: baseURL: "http://www.skfwe.cn" 就是不安全链接, 改成 baseURL: "https://www.skfwe.cn"
就可以愉快的搜索了

添加 Archive 栏

1
2


cd ~/hugo_blog
cp -rf themes/hugo-theme-stack/exampleSite/content/page/archives/ content/page/

添加 Links 栏

1
2


cd ~/hugo_blog
cp -rf themes/hugo-theme-stack/exampleSite/content/page/links/ content/page/

添加About 栏

如果 ~/hugo_blog/content/ 下面没有about 文件夹的话

1
2


cd ~/hugo_blog
cp -rf themes/hugo-theme-stack/exampleSite/content/page/about/ content/page/

否则直接修改about 文件夹下的 index.md 文件

修改或者添加 index.md 文件

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


---
title : "About"
lastmod : 2022-03-10T19:36:26+08:00
draft : false
menu:
    main: 
        weight: -90
        params:
            icon: user
---

Hellow, World!

:@ 注意: Even 主题中文件头部是用 +++ +++ 包起来的而Stack 主题中文件头部是用 --- --- 包起来的
而且在Stack 中 menu: 到时user 部分不能动, 哪怕是改了缩进都会导致识别不出About

添加评论插件

参考添加评论插件
使用Stack 主题时选用 utterances, 配置如下

1
2
3
4


        utterances:
            repo: wcq062821/blog_data
            issueTerm : pathname
            label: none

由于utterances 就是使用github 的仓库来存取评论信息的, 所以repo 中不需要完整的仓库路径

hugo 中使用emoji

首先需要hugo 主题打开emoji 功能

默认一般都会使能, 如果不行再看配置是不是关了

文章中插入emoji

确保已经安装了 Emojify

参考: Manual Install Emojify

SPC i e

插入Emoji

😠 注意

插入的ascii emoji 并不能在浏览器上渲染出来比如在org-mode 中 :@
是angry 的 emoji 并且可以正确渲染但是在浏览器上就不行

让hugo theme stack 渲染无序列表(ul)

修改 hugo-theme/stack/assets/scss/partials/layout/article.scss
修改 main-article 里的 article-content 的内容如下:

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


        .article-content {
            margin: var(--card-padding) 0;
            color: var(--card-text-color-main);

            img {
                max-width: 100%;
                height: auto;
            }
            ul {
                list-style-type: disc;
            }
        }

list-style-type 值

类型值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0 开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母 The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母 The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是： a, i, u, e, o, ka, ki,等。（日文平假名字符）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

添加彩虹背景

hugo-theme-stack/layouts/partials/footer/custom.html 中增加以下内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!-- layouts/partials/footer/custom.html -->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/ribbon.min.js"
    integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
    crossorigin="anonymous"
    size="300"
    alpha="0.6"
    zindex="-1"
    defer
></script>

效果:

增加加载进度条

hugo-theme-stack/layouts/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 的主页的描述文件在 hugo-theme-stack/layouts/_default/baseof.html 具体的布局描述在CSS 文件里
把 hugo-theme-stack/assets/scss/grid.scss 中的 left-sidebar 和 right-sidebar 的描述改成下面所示即可, 这样就把正文的占比改到了70%, 原来的只有50% 左右

 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


    .left-sidebar {
        order: -3;
        // max-width: var(--left-sidebar-max-width);
        max-width: 10%;
    }

    .right-sidebar {
        order: -1;
        // max-width: var(--right-sidebar-max-width);
        max-width: 20%;

        /// Display right sidebar when min-width: lg
        @include respond(lg) {
            display: flex;
        }
    }
    
    &.extended {
        @include respond(md) {
            max-width: 1024px;
            --left-sidebar-max-width: 25%;
            --right-sidebar-max-width: 30%;
        }

        @include respond(lg) {
            max-width: 1280px;
            --left-sidebar-max-width: 20%;
            --right-sidebar-max-width: 30%;
        }
        // 根据服务器上的分辨率来定
        @include respond(xl) {
            // max-width: 1536px;
            max-width: 1900px;
            --left-sidebar-max-width: 15%;
            --right-sidebar-max-width: 25%;
        }
    }

其中 respond 中的 max-width 根据你的服务器上的显示器的分辨率来调整, 如果是云服务器, 可以通过浏览器调试网页来确定
如果发现部署到服务器上的效果和本地 hugo server -D 的效果不一致, 才需要更改 respond 的max-width

如上图所示, body 的主区域的宽度为 1860, 但这还不是屏幕的宽度, 需要加上两边的margin 才是完整的屏幕宽度
由于一般在PC 的浏览器上看博客, 所以正常情况下改 respond(xl) 的max-width 就可以了, 如果没有效果, 则考虑改其他的 respond

添加备案号

查询备案号

打开腾讯云助手小程序, 控制台 => 更多云产品 => 域名与网站 => 网站备案即可查看备案号

hugo stack 添加备案号

在 config.yaml 中的 footer.customText 中添加<a> 标签即可
如下:

1
2
3
4


    footer:
        since: 2022
        customText: <a href="https://beian.miit.gov.cn/" target="_blank">备案号</a>
                    <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2022030313号-1</a>