开设博客
一开始应该是看到了莱特雷的这一篇【Hugo】Hugo + Github 免费部署自己的博客，突然萌发出了想做个人博客的念头。
在搜索主题的时候，一眼就被D-Sketon的博丽灵梦主题迷住了。
实际上手后发现确实不难，折腾完一些文章和外观上的自定义后就可以使用了。
不过当时发现了一个未曾想到的问题：显示高度不够，在写“g“或者”y“这种下面会长出一截的文字时，下方会显示不全。 这个问题超出了我这个对代码一窍不通的人的能力范围，最后是找哥哥改好的。
记得一开始我连怎么带上本地图片都不会，本地路径也是乱得一塌糊涂。
目前采用的方式是在【post】文件夹放文章，在里面新建一个叫【图片】的文件夹，再在里面创建对应文章的文件夹存放相应的文件。才总算结束了这个混乱的局面。
最后搞得七七八八了就打算将网站上线……但是这部分一直受挫，最后也是哥哥帮我上线的，然后留了一些笔记告诉我要怎么将本地的更新推送上去。
评论功能上线&无法推送？！
2月份折腾完后因为忙着画同人本，中间歇了两个月。
等到一切都结束后我就写了一篇感想文章，并准备加上评论功能将它们一起推送上去。
评论功能用的是Waline，照着官方的快速上手指南来做还是很简单的。
因为灵梦主题本身就支持waline服务，所以一切准备就绪后在【paramas.yml】文件内将waline的enable值改成ture，再填上serverURL就大功告成……才怪啦！
立刻就出现了发送评论一直失败的问题，但是我在vercel上测试评论功能又是正常的。最后经过一番搜索后找到了答案——serverURL那一项应该填写的是在vercel后台的Domains下方的链接，解决掉这个问题后评论就可以顺利发送了。
但是接下来又遇到了一大难题：无法推送到线上了！
当时找哥哥帮忙排查了几个小时，甚至回溯后又回溯了回溯的回溯，最后找到的原因居然是——部署工具更新出现的问题？！
因为默认部署时会去获取最新版本的action-hugo，所以当时推送时用了v0.146.5这个版本。最后我们尝试将部署设定改为固定使用v0.143.1，也就是最后一次推送成功时使用的版本，就解决了这个问题。
评论通知功能
我想当然地以为有了新评论会有邮件通知，然后在翻友链页面时狼狈地发现下面有留言没发现(￣_￣|||)
立刻去查了Waline的评论通知指南，发现原来都是要自己去环境变量里设置。
其实最理想的状态是邮件通知，但是需要有邮件发送服务提供商，这部分触及我的知识盲区了。看了一眼选了个之前就用过的discord webhook的功能来实现。
实际上还是挺简单的，在discord频道创建一个webhook，把链接填到环境变量里，最后再去抄个模板即可。
不过目前还是遇到了一个问题无法解决——评论前后会有<p>和</p>这个字符，转换成html代码是<p> </p>，似乎是“一整行”的意思。
目前找不到什么解法，反正也不碍事，就这样吧……
实际画面
通知画面
制作宝箱页面
一直很馋别人的展柜页面，最近终于折腾成功了，虽然跟一开始想象中的不同，但也还不错。
我参照了木木木木木的《Hugo 创建「好物」页面》教程。
一开始对着教程折腾了半天都不对劲，后来让DeepSeek和chatGPT来回改才做到了现在的样子。
这次学到的一点是：如果怎么改都不对的话，有可能是你想改的元素采用了特殊的命名或者写法。
有以下两种方式可以处理：
1.在预览网页右键菜单中选择“检查”，查看要改的元素代码叫什么名字，再返回给AI助手。
2.在整个库里搜索关键词，找出有关联的文件，把相关内容返回给AI助手。
这样基本上就能解决七七八八的疑难杂症了。
另外，如果是关于博客的基础功能实现问题，可以直接去该主题的github上看。我在写这篇的时候发现代码块不起作用，查了一下github发布页就发现了解答。
这里直接记录一下有用的信息和代码，欢迎拿去使用。
goods.json
路径：\assets\goods
解说：要展示的内容全部都放在这里面。
注1：两个信息卡片之间的},要加逗号，最后一张卡片的结尾不需要加。
注2：两个标签之间记得加逗号
{
"good": [
{
"image": "/goods/苦涩巧克力豆.jpg",
"jiage": "幌山 あき",
"title": "苦涩巧克力豆",
"link": "https://www.amazon.co.jp/%E3%83%9E%E3%83%BC%E3%83%96%E3%83%AB%E3%83%93%E3%82%BF%E3%83%BC%E3%83%81%E3%83%A7%E3%82%B3%E3%83%AC%E3%83%BC%E3%83%88-%E3%83%93%E3%83%BC%E3%83%A0%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E5%B9%8C%E5%B1%B1-%E3%81%82%E3%81%8D/dp/4047367427",
"note": "消费自己也被社会所消费。<br>深入挖掘人性的严肃作品。<br>两个人在这浑浊不堪的世间用自己的方式拼命挣扎，却还是出淤泥而不染的样子真的非常耀眼。",
"tags": ["漫画","百合"]
},
{
"image": "/goods/注意安全哦大姐姐.png",
"jiage": "サスケ",
"title": "注意安全哦、大姐姐",
"link": "https://www.amazon.co.jp/%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%81%AA%E3%82%88%E3%80%81%E3%81%8A%E5%A7%89%E3%81%95%E3%82%93%E3%80%82-1%E3%80%90%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E7%89%B9%E5%85%B8%E4%BB%98%E3%80%91-4%E3%82%B3%E3%83%9EKINGS%E3%81%B1%E3%82%8C%E3%81%A3%E3%81%A8%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E3%82%B5%E3%82%B9%E3%82%B1-ebook/dp/B099JKGYQM/",
"note": "稚气未脱的OL × 成熟小学生。<br>很喜欢这两人真诚的相处。<br><br>我的手机壁纸是她们的看烟花合照。",
"tags": ["漫画","百合"]
}
]
}
goods.md
路径：\content
解说：页面，不可或缺，但也没什么内容。
注释：最下面原本还有一行禁用评论的代码，但是写上去的话这篇文章的评论区也会跟着消失……代码块里的内容居然是可以在文章页面执行的吗？吓人……
---
title: "我的百宝箱"
cover: /goods/cover.jpg
subtitle: "恭喜你打开了我的百宝箱，希望这里面也有你喜欢的宝物。"
layout: "goods" # 使用专用布局
params:
sidebar: false # 禁用侧边栏
---
goods.scss
路径：\assets\css
解说：一些自定义样式 ，改改字的颜色和位置。
.goods-filter {
margin: 1rem 0;
text-align: center;
.filter-btn {
background: #ffe4e4;
color: #ff5252;
border: 1px solid #ddd;
border-radius: 20px;
padding: 0.4rem 1rem;
margin: 0.3rem;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s ease-in-out;
&:hover {
background-color: #d33;
color: #fff;
}
}
}
.goods-page #subtitle-wrap {
margin: 0;
padding: 0;
position: relative;
top: -170px; // 调整为合适的负值，例如 -20px、-40px
text-align: center;
}
.goods-page #subtitle {
font-family: var(--title-font, 'Segoe UI', sans-serif);
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
}
#goods {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1rem;
}
.goods-bankuai {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
width: 220px;
padding: 1rem;
text-align: center;
transition: transform 0.2s ease;
word-break: break-word;
&:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.goods-duiqi img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 0.8rem;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.05);
cursor: zoom-in;
}
}
.goods-title {
font-weight: bold;
margin-bottom: 0.3rem;
a {
color: #222;
text-decoration: none;
&:hover {
color: #d33;
text-decoration: underline;
}
}
}
.goods-jiage {
color: #888;
font-size: 0.9rem;
margin-bottom: 0.3rem;
}
.goods-note {
font-size: 0.85rem;
color: #666;
line-height: 1.4;
}
}
@media (max-width: 600px) {
#goods {
justify-content: center;
}
.goods-bankuai {
width: 90%;
max-width: 360px;
}
}
图片文件夹
路径：\static\goods
解说：放图片用的，顺带一提我的图片路径是/goods/文件名.jpg
params.yml
路径：\config_default
解说：在主页添加大分页。具体的话是在menu:的最后加上以下内容：
- name: goods
url: "goods"
icon:
zh-CN.yml
路径：\i18n
解说：给大分页加上了中文名，有需要的话同目录下的en.yml ja.yml zh-TW.yml文件里也都可以加上对应的多语言分页名。具体是加在home:那一排的最后面。
goods: 宝箱
main.scss
路径：\assets\css
解说：如果不加上那句神奇的咒语的话卡片的白色背景和按钮的圆角就都不会生效了。我加在了最后，{{ end }}前面。
@import "goods";
baseof.html
路径：\layouts_default
解说：让宝箱页面可以读取自定义样式。加在开头 {{ if .Site.Params.dark_mode.enable }}data-theme="dark"{{ end }}下面。
<head>
{{ if eq .Layout "goods" }} <!-- 仅对好物页面加载 -->
{{ with resources.Get "css/goods.scss" }}
{{ $style := . | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{ else }}
{{ warnf "无法找到 assets/css/goods.scss" }}
{{ end }}
{{ end }}
{{ partial "head.html" . }}
</head>
<!-- 其余内容保持不变 -->
single.html
路径：\layouts\goods
解说：对宝物页面没影响，但是如果没有这个文件的话我这篇文章里面的评论区会消失。好像是因为包含了引用宝物页面布局，但是布局里提到了隐藏评论区，进而影响到了这篇文章。
{{ define "main" }}
<main class="no-sidebar">
{{ partial "goods-content" . }}
</main>
<!-- 添加评论区支持 -->
{{ if .Params.comments }}
<div class="wcomment" data-aos="fade-up"></div>
{{ end }}
{{ end }}