主题色 #
配色方案直接用的参考文章里面的颜色，在 assets/css/custom.css 中添加：
/* 主题色 */
:root {
--color-neutral: 255, 255, 255;
--color-neutral-50: 255, 255, 255;
--color-neutral-100: 255, 255, 255;
--color-neutral-200: 214, 219, 222;
--color-neutral-300: 172, 183, 188;
--color-neutral-400: 129, 146, 154;
--color-neutral-500: 92, 107, 115;
--color-neutral-600: 74, 86, 92;
--color-neutral-700: 56, 65, 70;
--color-neutral-800: 38, 44, 47;
--color-neutral-900: 19, 23, 24;
--color-primary-50: 255, 255, 255;
--color-primary-100: 255, 255, 255;
--color-primary-200: 255, 255, 255;
--color-primary-300: 242, 211, 223;
--color-primary-400: 225, 151, 181;
--color-primary-500: 208, 92, 138;
--color-primary-600: 199, 60, 115;
--color-primary-700: 170, 49, 97;
--color-primary-800: 138, 40, 79;
--color-primary-900: 106, 31, 61;
--color-secondary-50: 255, 255, 255;
--color-secondary-100: 255, 255, 255;
--color-secondary-200: 255, 255, 255;
--color-secondary-300: 255, 242, 219;
--color-secondary-400: 255, 215, 143;
--color-secondary-500: 255, 188, 66;
--color-secondary-600: 255, 174, 25;
--color-secondary-700: 239, 155, 0;
--color-secondary-800: 199, 128, 0;
--color-secondary-900: 158, 102, 0;
}
字体颜色 #
也是参考文章，修改主题色后夜间模式下字体颜色比较暗，一起做了调整，在 assets/css/custom.css 中添加：
/* 调整正文字体颜色，使其更白更易读 */
.dark .prose {
color: #d1d5db;
/* 稍微降低亮度，拉开与加粗的对比 */
}
.dark .prose strong,
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
color: #f2f2f2;
}
顶部阅读进度条 #
在 assets/css/custom.css 中添加：
/* 顶部阅读进度条 */
.top-scroll-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
width: 0;
height: 3px;
background: #d05c8a;
}
然后在 layouts/partials/ 下创建 extend-footer.html，内容为：
<!-- 进度条逻辑 -->
<script>
window.addEventListener('scroll', () => {
const bar = document.querySelector('.top-scroll-bar');
if (!bar) return;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const width = (scrollTop / scrollHeight) * 100;
bar.style.width = width + '%';
bar.style.display = 'block';
});
</script>
最后在layouts/partials/ 下创建 extend-head.html来使用这个进度条：
<!-- 进度条 -->
<div class="top-scroll-bar"></div>
文字模糊效果 #
用来写一些可能剧透的文字还是挺有用的，在layouts/shortcodes下创建blur.html：
<span class="blur">{{.Inner | markdownify}}</span>
<style>
/* 文本高斯模糊 */
.blur {
filter: blur(4px);
transition: filter 0.3s ease;
}
.blur:hover {
filter: blur(0);
}
</style>
使用方法是：
{{< blur >}}想要高斯模糊的文本{{< /blur >}}
效果如下：这就是模糊的效果