Hugo Stack装修小记

博客大体建好后，自己又做了一些零零碎碎的修改。

样式

修改标题字体

我挺喜欢matters的标题字体，截图给Gemini查了下字体，自己又去Adobe官网看了看，决定把标题改成了思源宋体，这个字体说是Hugo也支持。修改也简单，直接在assets/scss/custom.scss文件里加下列代码：

1
2
3
4
5
6
7
//更改标题字体为思源宋体
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&display=swap');
.article-details .article-title {
    font-family: "Noto Serif SC", "Noto Serif CJK SC", serif;
    font-weight: 700;
    line-height: 1.5;
}

第一句@improt是告诉Hugo引用哪里的字体。
article-details是定义使用的范围，接下来就是字体的名称，字体粗细和行高。数字可以自己调试，找个舒服的。

去掉TOC的数字

我主要写随笔居多，数字感觉不搭噶，而且占位长，所以把这个关掉了。 config/markup.toml里找到[tableOfContents]这行，把ordered改为false即可。改完看自动显示变成了圆点，这样我觉得也可以，就没有再弄。

ordered = false

取消文章页面的脚注全部大写

自动显示的英文部分全部是大写，想改成普通状态。

1
2
3
4
5
//assets/scss/custom.scss中添加下列代码
//取消文章脚注英文全部大写
.article-copyright span {
    text-transform: none;
}

内容

给每篇文章添加字数统计

因为已经有了阅读时间，想把字数统计放在一起。

layouts\partials\article\components\details.html里找到 footer class=“article-time” 板块，直接在{{ if $showReadingTime }}部分插入wordcount的line，没有单独写。全部显示如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<footer class="article-time">
     {{ if $showDate }}
            <div>
                {{ partial "helper/icon" "date" }}
                <time class="article-time--published">
                    {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </div>
    {{ end }}

    {{ if $showReadingTime }}
        <div>
            {{ partial "helper/icon" "clock" }}
            <span class="article-time--reading">
            <!-- 在此插入以下代码 -->    
                 {{ T "article.wordCount" .WordCount  }}
            <!-- 在此结束 -->    
                {{ T "article.readingTime" .ReadingTime }}
            </span>
        </div>
    {{ end }}
</footer>
{{ end }}

同时要把stack主题的i18n文件夹加到主目录下，我的默认语言是英语，所以只复制了en.toml，如果是中文就复制zh.toml。 注：网上搜的文章里有说要加wordcount语句，但本地看了下不加也正常显示，所以我又删掉了。这里只是留个当作备忘提醒，可能有需要的。 在[article.readingTime]下面加入字句。

1
2
3
    [article.wordCount]
        one   = "{{ .Count }} word"
        other = "{{ .Count }} words"

理论上不会有一个字的文章，所以只写other这句就可以。

这样出来的效果是 3270words，7 minutes read。我更想看千字统计，所以进一步调整成下面这样⬇，以及调整了图标和字之间的间距。

千字统计的code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 {{ if $showReadingTime }}
//缩小图标和字的空隙 
    <div style="gap: 0.7rem;">
        {{ partial "helper/icon" "clock" }}
        <time class="article-time--reading">
        
        <!-- 在此开始插入 -->
            {{- if ge .WordCount 1000 -}}
                本文总计约 {{ printf "%.2fK" (div .WordCount 1000.0) }}字
            {{- else -}}
                本文总计约 {{ .WordCount }} 字
                {{- end -}}, 
        <!-- 在此结束 -->   
            
            {{ T "article.readingTime" .ReadingTime }}
         </time>         
    </div>
{{ end }}

注意⚠️ 这里我把文字加在了detail里，试了下英文感觉不好看，最后还是改成了中文，阅读时间也调整成中文，具体是改en.toml。

1
2
3
[article.readingTime]
    one   = "阅读约需 {{ .Count }} 分钟"
    other = "阅读约需 {{ .Count }} 分钟"

推荐hugo server多运行几次看效果。有时需要ctrl+c关掉重新运行，电脑也需要nap。显示效果如下：