基础配置
设置RSS地址
经过好心象友提醒，在config.yaml中填写baseurl。
页面样式
更换背景图片
参考作业：关于我用ChatGPT修改博客主题那些事
发现切换其他页面时，图片会被放大显示模糊，chatgpt老师说需要多写一行：background-attachment: fixed。
总之，在/assets/scss/custom.scss中填写如下内容：
body {
background-image: url('https://res.cloudinary.com/xpihxb/image/upload/v1705496820/chihiro032_g6voto.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
友链插入图片
没有技术含量只是加了图片喊大家看啦hhh
友链图片与背景图片均来自：今月から、スタジオジブリ作品の場面写真の提供を開始します - スタジオジブリ｜STUDIO GHIBLI
修改鼠标指针
直接让chatgpt老师写的。主要困难来自于，使用外部链接的鼠标指针巨大啊！巨大！我最后使用了30*30的图片大小，在/assets/scss/style.scss插入，终于可以了。
不知道错在哪，成了就行T_T。
图标来自：免费矢量图标——下载1,328,700个图标（SVG、PNG）
/* 默认时的鼠标样式 */
body {
cursor: url('tupian.png'), default;
}
/* 指向链接时的鼠标样式 */
a:hover {
cursor: url('tupian.png'), pointer;
}
代码块限高与COPY按钮
26/08/04更新。
在/assets/scss/partials/layout/article.scss中的pre下塞入代码：
pre {
display: block;
background-color: var(--pre-background-color);
color: var(--pre-text-color);
font-family: var(--code-font-family);
line-height: 1.428571429;
word-break: break-all;
padding: var(--card-padding);
white-space: pre-wrap; //长代码自动换行适应页面
word-wrap: break-word; //允许长单词或 URL 地址换行到下一行
/* 1. 核心关键：给伪元素提供定位原点 */
position: relative;
code {
color: unset;
border: none;
background: none;
padding: 0;
/* 2. 把限高和滚动条加在 code 身上，绝不干扰外围按钮 */
display: block;
max-height: 230px;
overflow-y: auto;
}
/* 3. 完美的伪元素 Copy 按钮（优雅放大版） */
&::after {
content: 'Copy';
position: absolute;
top: 12px; /* 稍微往下挪一点点，看起来更舒展 */
right: 32px; /* 【关键修改】加大右侧距离，完美躲开滚动条 */
padding: 9px 18px; /* 【关键修改】加大内边距，让按钮整体变大 */
font-size: 1.75rem; /* 【关键修改】字号调大，更清晰 */
border-radius: 6px; /* 圆角稍微大一点更现代 */
/* 颜色自动适配主题的深浅模式 */
background: var(--card-background);
color: var(--body-text-color);
border: 1px solid var(--card-border-color);
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
}
/* 鼠标悬浮在整个代码块时，显示按钮 */
&:hover::after {
opacity: 1;
}
/* 复制成功后的文字切换 */
&.copied::after {
content: 'Copied! ✓';
opacity: 1;
}
}
打开 assets/ts/main. ts，在顶部加
import "./copyCode";
在 assets/ts 新建 copyCode. ts，复制粘贴以下内容
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".article-content pre").forEach((pre) => {
// 点击整个代码块区域触发复制
pre.addEventListener("click", async () => {
const code = pre.querySelector("code") || pre;
try {
await navigator.clipboard.writeText(code.innerText);
// 加上 .copied，让 CSS 把字换成 Copied!
pre.classList.add("copied");
// 1秒后恢复原样
setTimeout(() => {
pre.classList.remove("copied");
}, 1000);
} catch (err) {
console.error("复制失败", err);
}
});
});
});
Shortcodes
参考作业：Hugo | 在 Stack 主题上可行的短代码们
感谢鹤辞！完全照抄！
卡片样式
照抄鹤辞。
引用neodb
在layouts/shortcodes中新建新建neodb.html，内容如下：
{{ $dbUrl := .Get 0 }}
{{ $dbApiUrl := "https://neodb.social/api/" }}
{{ $dbType := "" }}
{{ if ( findRE `^.*neodb\.social\/.*` $dbUrl ) }}
{{ $dbType = replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}
{{ else }}
{{ $dbType = $dbUrl }}
{{ $dbApiUrl = "https://neodb.social/api/catalog/fetch?url=" }}
{{ end }}
{{ $dbFetch := getJSON $dbApiUrl $dbType }}
{{ if $dbFetch }}
{{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
<div class="db-card">
<div class="db-card-subject">
<div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
<div class="db-card-content">
<div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
<div class="rating"><span class="allstardark"><span class="allstarlight" style="width:{{mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</span></div>
<div class="db-card-abstract">{{ $dbFetch.brief }}</div>
</div>
<div class="db-card-cate">{{ $dbFetch.category }}</div>
</div>
</div>
{{else}}
<p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
{{end}}
在/assets/scss/custom.scss中填入css的样式代码，内容如下：
/* db-card -------- start*/
.db-card{margin:2.5rem 3rem;background:var(--card-background);border-radius: 7px;box-shadow: 0 6px 10px 0 #00000053;}
.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
.dark .db-card{background:var(--card-background);}
.db-card-content {flex:1 1 auto;}
.db-card-post {width: 100px;margin-right: 15px;display: flex;flex: 0 0 auto;}
.db-card-title {margin-bottom: 3px;font-size: 14px;color: var(--card-text-color-main);;}
.db-card-title a{text-decoration: none!important}
.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:5rem;color: var(--card-text-color-main);;}
.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 8px 0 8px;text-transform:capitalize;}
.db-card-post img{width: 100px!important;height: 150px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
}
.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
@media (max-width:550px) {
.db-card{margin:0.8rem 1rem;}
.db-card-comment{display: none;}
}
/* db-card -------- end */
使用时出现过卡片显示文字不完全，卡片底部留白过多的情况，调整css样式代码中max-height的值后显示正常。
我暂时不知道输入时怎么让它好好显示为代码，而不生效样式。
就，看看示例吧：
