1 快速开始
1
2
3
4
5
|
hugo new site sitename && cd sitename
# 拉取stack主题
git init
git clone
|
2 头像
themes/hugo-theme-stack/assets/img/avatar.pngassets/img/avatar.png
1
2
3
4
5
6
7
8
9
|
params:
sidebar:
emoji: 🍥
subtitle: 忙里偷闲
avatar:
enabled: true
local: true
src: img/avatar.png
|
222
https://jinli.io/p/%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%E7%9A%84%E5%BB%BA%E7%AB%8B%E8%BF%87%E7%A8%8B%E4%B8%89hugo%E4%B8%BB%E9%A2%98stack%E7%9A%84%E4%BD%BF%E7%94%A8%E4%B8%8E%E4%BC%98%E5%8C%96/
1
|
http://localhost:1313/p/stack%E4%BD%BF%E7%94%A8/
|
3 滚动条
默认的滚动条太粗
在 themes/hugo-theme-stack/assets/scss/partials/base.scss 中，修改以下样式
1
2
3
4
5
6
7
8
|
* {
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
|
4 使用中文
- 代码复制
在 themes/hugo-theme-stack/assets/ts/main.ts 中，修改：
1
2
|
const copyText = `复制`,
copiedText = `已经复制`;
|
- 许可证
在
hugo.yaml 中，修改：
1
2
3
4
5
6
|
params:
article:
license:
enabled: true
default: '转载需要保留原始链接，未经明确许可，禁止商业使用。[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)'
|
5 修改字体
5.1 全局
谷歌字体
官方文档示例
霞鹜文楷
/layouts/partials/head/custom.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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>
<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>
|
5.2 导入字体
themes/hugo-theme-stack/assets/scss/style.scss
1
2
|
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cascadia-code@4.2.1/index.min.css');
|
- 修改字体
themes/hugo-theme-stack/assets/scss/variables.scss
1
2
3
4
5
|
:root {
--zh-font-family: 'LXGW WenKai Lite';
--base-font-family: var(--zh-font-family), sans-serif;
--code-font-family: 'Cascadia Code', var(--zh-font-family), monospace;
}
|
引用块
1
2
3
4
|
< notice notice-tip >
{{notice notice-info}}
这个标签太好看了，我忍不住分享。
</notice>
|
6 高亮
layouts/shortcodes/mark.html
1
|
<mark>{{ .Get "text" }}</mark>
|
彩虹背景
1
2
3
4
5
6
7
8
9
10
|
<!-- layouts/partials/footer/custom.html -->
<script
src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/ribbon.min.js"
integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
crossorigin="anonymous"
size="300"
alpha="0.6"
zindex="-1"
defer
></script>
|
7 背景颜色
assets/scss/varibales.scss
–body-background: #ffff;
修改分类颜色
在”content\categories” 创建与分类同名的文件夹，并且在文件夹中创建 “_index.md” 文件并添加下面的内容
1
2
3
4
5
6
7
8
|
----
title: 这里写分类名称
description: 分类简介，不需要可以删了
image: "categories.png" # 分类的题图
style:
background: "#80aba9" # 分类标签背景色
color: "#fff" # 字体色
---
|
9 目录间距
themes/hugo-theme-stack/assets/scss/partials/sidebar.scss找到right-siderbar
1
2
3
4
5
6
7
8
9
10
11
12
|
.widget--toc {
#TableOfContents {
li {
margin: 2px 0 2px 4px;
padding: 2px;
& > ul {
margin-top: 2px;
margin-bottom: -2px;
}
}
}
}
|
10 其它样式
themes/hugo-theme-stack/assets/scss/partials/article.scss
1
2
3
4
5
6
7
8
9
10
|
.article-title {
@include respond(xl) {
font-size: 2.8rem;
}
}
.article-subtitle {
@include respond(xl) {
font-size: 1.5rem;
}
}
|
页脚 themes/hugo-theme-stack/i18n/zh-cn.yaml
1
2
3
|
footer:
builtWith:
other: 使用 {{ .Generator }} 构建
|
hello world
dfhk
kdjfk
2^11^
短代码
