Table of contents
注：博主使用的主题为stack。
官方文档参考： https://stack.jimmycai.com/guide/getting-started
后期博客的改动，一般都是在theme文件夹的\assets\scss里的costum.css文件改动
修改字体
参考教程：
补充：
修改背景色及布局
参考教程： 使用 Hugo 对博客的重建与 Stack 主题优化记录
一些配色设计&工具网站：
https://www.happyhues.co/palettes/17
https://www.magicpattern.design/tools/css-backgrounds
滚动条样式修改
参考：https://xrg.fj.cn/p/hugo-stack主题更新小记/#主页布局
修改社交icon
用到的网站：
修改网站图标
参考文章: Hugo博客 | stack主题修改第一站 (munlelee.github.io)
我的做法
先在免费图标模板Free logo maker 里找合适的模板，修改好后download，不需要多清晰的
把模板图上传至这个**Favicon Generator**网站 里生成.ico等文件包，下载到
解压后保存在网站根目录 /static/ 文件夹中，重命名为 favicon.ico，修改主题配置文件config.toml
[params]
mainSections = 'post'
featuredImageField = "image"
rssFullContent = true
enableimgloop = true
favicon = "/favicon.ico "
隐藏主页按钮
参考： Hugo｜自定义 hugo-theme-Stack (ponder.lol)
在 /themes/hugo-theme-stack/assets/scss/custom.scss添加
/* 隐藏主页按钮 */
.menu {
li:first-child {
display: none;
}
}
添加相册
参考教程：
添加动画
参考教程：
添加打字动画
参考教程：
https://shishuochen.gitee.io/2020/uffick8u1/#8-subtitle打字机显示
我的改法： 在D:\blog\myblog\themes\hugo-theme-stack\layouts的index.html开头贴上
{{ define "main" }}
<!-- index.html or home.html -->
<div id="text">
<p style="font-size: 3rem; text-align: center; font-weight: bold;"></p> // 设置想打的字的样式，3rem是大小
</div>
<!-- ... other HTML content ... -->
<script>
let divTyping = document.querySelector('#text p');
let i = 0,
timer = 50, // 修改为适当的时间间隔，以控制打字速度
str = 'Humo sum, humani nihil ame alienum puton.'; // 修改为自己想打的字
function typing() {
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++) + '_';
timer = setTimeout(typing, timer);
} else {
divTyping.innerHTML = str; // 结束打字，移除 _ 光标
clearTimeout(timer);
}
}
typing();
</script>
发现暗色模式下文字不会跟着变色，因此还需要再改
{{ define "main" }}
<!-- index.html or home.html -->
<div id="text">
<p style="font-size: 3rem; text-align: center; font-weight: bold; color: var(--card-text-color-secondary);"></p> <!-- 在这里替换为你想要的颜色变量 -->
</div>
<!-- ... other HTML content ... -->
<script>
let divTyping = document.querySelector('#text p');
let i = 0,
timer = 50, // 修改为适当的时间间隔，以控制打字速度
str = 'Humo sum, humani nihil ame alienum puton.'; // 修改为自己想打的字
function typing() {
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++) + '_';
timer = setTimeout(typing, timer);
} else {
divTyping.innerHTML = str; // 结束打字，移除 _ 光标
clearTimeout(timer);
}
}
typing();
</script>
添加返回到顶部插件
参考教程：
https://ponder.lol/2023/custom-hugo-theme-stack/#返回顶部按钮
显示/统计文章发布数量
参考教程：
https://thirdshire.com/hugo-stack-renovation/#总字数统计发表了x篇文章共计x字
添加文章加密功能
目前只成功实现一种网页前端加密的方法，不过对我来说够了。
参考天堂错误文件-Loading：《hugo 装修日志 03》 操作后，在要加密的文章头部添加
password: "xxxx"
password_hint: "xxxxx"
即可对显示的网页加密。
外部链接后显示图标
短代码应用
参考：
在博客进行一些实施成功的样式：
文本效果语法
文本折叠
折叠↓
实际使用时别忘了换成双括号！文本模糊
手动打码效果
文本黑幕
数据删除！数据删除！
文本位置
文字居左
文字居中
文字居右
摘录引用
There is no possibility that any perceptible change will happen within our own lifetime. We are the dead. Our only true life is in the future. We shall take part in it ashandfuls of dust and splinters of bone. But how far away that future may be, there is no knowing.
插入图片
调整大小：
轮播图功能
前提是准备好图床。
短代码教程参考：
https://www.sleepymoon.cyou/2023/hugo-shortcodes/#图片轮播
neodb引用
书籍：
插入网易云音乐外链
在文章里输入 {< netease XXXXXXXXX 0 >} //歌曲的id;是否自动播放(1为自动播放，0为手动播放)，输入时加两个{}
效果：
插入B站视频外链
{< bilibili XXXXXXXXXXX 0 >} //BV号，分p数，0/1为是否自动播放；输入时加两个{}
效果：
添加热力图
参考教程：https://yelleis.top/p/hugo-theme-stack-beautification-2/
魔法区项目
添加Channel.io私信插件
参考： 给 Hugo 加一点好玩的功能
好看，花里胡哨，但是存在感不强。
添加ko-fi打赏功能
参考Ko-fi官网 一步步做，链接直接复制在left.html里就行
好看，但是实用性不强，撤了。
添加Waline评论
参考：
结果：因vercel被墙需要额外解析dns，不魔法好像加载不出来，算了就这样吧。
添加Arititalk说说界面
有些代餐诗不打算单独在博客里弄成文章发，所以给博客添加一个类似空间说说的分区。
注：
LeanCloud用的是国际版，在自己原来建waline评论区的那个应用里做上述教程就好了，不要单独新建应用，不然后期会出现冲突。
编辑eki.html文件时，国际版的LeanCloud不需要填serverurl
头像要url链接，把图转存到某个图床，然后在LeanCloud设置里添加url。
结果：本地预览模式加载不出，但网页模式可以加载。
暂时就优化到这个地步，发现有些浏览器可能界面显示有差异，但大多数都是正常的。
可以愉快地开启新的赛博魂器地的存档了！