友情链接双栏
Stack主题默认为单栏，友链多一点点就很长长长长长，站点名称和头像之间空隙很长就很空。
在assets/scss/custom.scss中添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//友情链接双栏
@media (min-width: 1024px) {
.article-list--compact.links {
display: grid;
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 10px;
&:nth-child(odd) {
margin-right: 8px;
}
}
}
}
|
图标/自定义菜单
Stack主题默认提供了图标支持—Tabler Icons
选择自己想引用的图标，Stroke调至0.5px,单击图标即可复制，之后在assets/icons中新建".svg"文件即可调用。
如自定义左边栏菜单为例，在config.toml/.yaml中，可在170行中找到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
### 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:
- identifier: Music
name: Music
url: https://music.shimoko.com/
weight: -30
params:
icon: music
newTab: true
- identifier: status
name: 监控
url: https://status.shimoko.com/status/shimoko
weight: -20
params:
icon: server
newTab: true
|
在“main”后添加更多菜单，“icon处添加位于”assets/icons“中的图标文件，这里为我的站点为例
字体
字体配置直接照搬的山茶花舍的文章–时隔半年，博客又有了那些新变化？！，使用鸿蒙字体，托管到自己的CDN中了，尽管我唾弃鸿蒙的吃相，但这个字体感觉相比于之前站点使用的思源黑体不相上下。
1.修改字体加载优先级
在layouts/partials/head/custom.html中写入以下内容
1
2
3
4
5
6
7
8
|
<style>
:root {
/* 在style中优先调用HarmonyOS_Sans_SC_Medium */
--sys-font-family: "HarmonyOS_Sans_SC_Medium", Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
--code-font-family: "JetBrainsMono Regular", Menlo, Monaco, Consolas, "Courier New";
--article-font-family: "HarmonyOS_Sans_SC_Medium", var(--base-font-family);
}
</style>
|
2.在下方获取你部署的字体链接：
下方使用的是我的又拍云CDN，也可以将"customFont.href"处的链接修改成自己的字体和CSS，源文件可以在吕楪的 CDN-fonts看到，这里就不造轮子了。
1
2
3
4
5
6
7
8
9
|
<script>
(function () {
const customFont = document.createElement('link');
customFont.href = "https://img.shimoko.com/fonts/font.css";
customFont.type = "text/css";
customFont.rel = "stylesheet";
document.head.appendChild(customFont);
}());
</script>
|
汉语和英语之间自动添加空格
这个还是照搬的”“山茶花舍的文章–时隔半年，博客又有了那些新变化？！“，效果就像这里的English和中文自动加入空白了，非常Good，而且原文非常好了，这里就不复制黏贴了。
在主题目录中的“layouts/partials/footer/footer.html”中写入以下内容
1
2
3
4
5
6
7
8
9
10
11
|
<script>
(function(u, c) {
var d = document, t = 'script', o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = u;
if (c) { o.addEventListener('load', function(e) { c(e); }); }
s.parentNode.insertBefore(o, s);
})('//cdn.bootcss.com/pangu/4.0.7/pangu.min.js', function() {
pangu.spacingPage();
});
</script>
|
修改分类颜色
在”content\categories”创建与分类同名的文件夹，并且在文件夹中创建“_index.md”文件并添加下面的内容
1
2
3
4
5
6
7
8
|
----
title: 这里写分类名称
description: 分类简介，不需要可以删了
image: "categories.png" // 分类的题图
style:
background: "#80aba9" //分类标签底色
color: "#fff"
---
|
在config.toml/.yaml中找到params:-footer: custom中添加字段，支持H5。
修改站点背景颜色
在"assets\scss\variables.scss"中找到
1
|
--body-background: #f6f6f6;
|
参考自:Hugo | Hugo-stack-theme 主题魔改版
还有一个站点统计
换成静态站点还不想用谷歌统计，于是将目光移动至Umami，特点就是简洁够用，还蛮好看的。
同时Umami可以不需要自部署了，提供在线服务
