装修笔记之感谢网络邻居们！

最近在听： XG的In The Rain 🎵

如何更换全局字体

好网站的阅读体验中字体是是非常关键的因素，无论是阅读的你还是吧唧吧唧敲字的我来说>w<！

找到合适的字体源 & 授权声明

目前网站使用的是猫啃糖圆 (MaoKenTangYuan beta)，感谢字体作者的无私分享！

在网站的`<head>`部分，添加以下代码来添加猫啃糖圆字体：

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


<!-- 添加猫啃糖圆字体 -->
<link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/mkwtyt/dist/MaoKenTangYuan/result.css' />
<style>
    :root {
        --article-font-family: "MaoKenTangYuan (beta)", var(--base-font-family);
    }
    
    article {
        font-family: "MaoKenTangYuan (beta)";
        font-weight: 400;
    }
</style>

修改Hugo主题的variable.scss文件

找到hugo-theme-stack/assets/scss/variable.scss文件，加入：

1
2
3
4
5
6
7
8
9


/**
*   Global font family
*/
:root {
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "MaoKenTangYuan (beta)", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
    --base-font-family: "MaoKenTangYuan (beta)", var(--sys-font-family), var(--zh-font-family), sans-serif;
    --code-font-family: Menlo, Monaco, Consolas, "Courier New", var(--zh-font-family), monospace;
}

这一步是为了改变了字体的优先级，确保猫啃糖圆成为网站的首选字体

如何优化相关文章板块

原本的相关文章部分试图在每篇文章下方显示图片，但我的post大多没有设置主题图片所以就有很不协调的视觉效果我下往修改后的设计是纯文本，只显示文章标题和发布日期

定位到需要修改的文件

Stack主题的相关文章功能主要是这两个文件控制： layouts/partials/article/components/related-contents.html layouts/partials/article-list/tile.html

我们来简化以下所有与图片相关的逻辑和HTML标记的部分然后增加发布日期

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


<article class="no-image">
    <a href="{{ .context.RelPermalink }}">
        <div class="article-details">
            <h2 class="article-title">
                {{- .context.Title -}}
            </h2>
            <!-- 添加文章发布日期 -->
            <footer class="article-time">
                <time datetime='{{ .context.Date.Format "2006-01-02T15:04:05Z07:00" }}'>
                    {{- .context.Date.Format (or .context.Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </footer>
        </div>
    </a>
</article>

优化显示

然后找到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


/* 相关文章无图片样式优化 */
.related-contents .article-list--tile article.no-image {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    padding: 15px;
    margin: 5px;
    transition: box-shadow 0.3s ease;
}

.related-contents .article-list--tile article.no-image:hover {
    box-shadow: var(--shadow-l2);
}

.related-contents .article-list--tile .article-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.related-contents .article-list--tile .article-time {
    font-size: 0.85rem;
    color: var(--card-text-color-tertiary);
}

/* 确保相关文章区域的布局正确 */
.related-contents .flex.article-list--tile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

参考了友邻的分享