如何更换全局字体
好网站的阅读体验中字体是是非常关键的因素，无论是阅读的你还是吧唧吧唧敲字的我来说>w<！
找到合适的字体源 & 授权声明
Chinese Fonts CDN
目前网站使用的是猫啃糖圆 (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;
}
|
参考了友邻的分享
预览: