还没装完,我先换了主题。这篇是……年轻的尝试!
照抄作业
介绍 | Hugo 主题 Stack
Hugo | 看中 Stack 主题的归档功能,搬家并做修改
Hugo Stack主題修改記錄 (瘦身篇)
修改网站图标
从这个图标网站挑了一张,用这个网站转换图片格式为png,重命名为“favicon.png”,放在根目录的/static/img下。
打开config.yaml,改为:
favicon: /img/favicon.png
图标毫无变化。强颜欢笑。下一个。
默认夜间模式
打开config.yaml,改为:
colorScheme:
# Display toggle
toggle: false
# Available values: auto, light, dark
default: dark
改完发现还是白天好,default: light。
去掉首页头像
打开:layouts/partials/sidebar/left.html,删除下图段落,头像、站点名称、描述会全部被删除。
<header class="site-info">
{{ with .Site.Params.sidebar.avatar }}
<!-- <figure class="site-avatar">
...
</figure> -->
{{ end }}
<h1 class="site-name"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
</header>
保留下图段落,站点名称与描述会被保留。
<header class="site-info">
<h1 class="site-name"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
</header>
想要空白暂时先删干净了,反悔了再去示例文件取备份。
去掉小图标
打开config.yaml,改为:
menu:
main:
- identifier: home
name: Home
url: /
weight: -100
pre: #delete //"home"改为“#delete”
只能成功删除Home。其他几个需要在content\post单独设置。
保留小图标并居右
反复无常的我临时决定删字留标。打开config.yaml,改为:
menu:
main:
- identifier: Home
name: //删掉就行
url: /
weight: -100
pre: home
只能成功删除Home和Archives,Search会拉图标陪葬,About报错如下:
alias "../about-us" traverses outside the website root directory
Built in 11 ms
更换小图标
等我把文字删干净,找到可爱的就换。
改背景颜色
打开 assets\scss\variables.scss
--body-background: #f0f8ff; //改为f0f8ff
修改字体
其实我看上了筑紫明朝,但我看不懂示例代码的 customFont.href ,拿着ttf搞不了。暂时向思源宋体妥协。
新建文件 layouts\partials\head\custom.html ,输入如下代码
<style>
:root {
--article-font-family: "Noto Serif SC", var(--base-font-family);
}
</style>
<script>
(function () {
const customFont = document.createElement('link');
customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";
customFont.type = "text/css";
customFont.rel = "stylesheet";
document.head.appendChild(customFont);
}());
</script>
文章外标题仍然是微软雅黑。应该和字体大小一类问题。明天再说。
修改字体大小
修改全局字体大小
打开assets/scss/variables.scss,搜索“–article-font-size“
:root {
--article-font-family: var(--base-font-family);
--article-font-size: 1.6rem;
@include respond(md) {
--article-font-size: 1.6rem; //here!
}
--article-line-height: 1.85; //改了也好像没改
修改文章标题字体大小
打开 assets\scss\partials\article.scss
.article-title {
font-weight: 600;
margin: 10px 0;
color: var(--card-text-color-main);
font-size: 2.2rem; //改这个数好像等于没改
@include respond(xl) {
font-size: 2.0rem; #here!
}