从开始搭建博客到现在已经过了很久了，但一直没有专门写一篇博客记录装修什么的，主要还是觉得自己东写一点，西抄一点，北求GPT，南问fedi友，实在是很难总结出自己装修博客的内容。但现在我觉得还是得写装修日记啊！！！随着写的东西越来越多好多东西已经有点找不着了（记性就这么差……）而且好多功能写着写着就没效果也不知道是那被覆盖还是啥，反正也找不到，先记下来，有机会再做做看！ （ps.装修基于blosfish主题，但我觉得应该都能用，感觉css代码的适配度挺高的）

页面的粉色边框与上下装饰物

#

其实只是想给文章部分加上粉色边框与装饰，但是！首页居然也会有粉色边框，好像是因为都是同一个article元素，在/assest/css/custom.css文件中加入以下代码：

article {
  border-radius: 15px; /* 圆角 */
  border: 3px solid #f3b2c8; /* 草莓粉边框 */
  box-shadow: 0 8px 15px rgba(103, 99, 103, 0.2); /* 强化阴影 */
  margin: 2em auto;
  padding: 1.5em;
  max-width: 1000px;
  position: relative; /* 用于装饰 */
}

/* 文章顶部添加小装饰 */
article::before {
  content: "✨";
  position: absolute;
  top: -13px;
  left: 20px;
  font-size: 1.7em;
  color: #f3b2c8;
}
article::after {
  content: "🍓";
  position: absolute;
  bottom: -10px;
  right: 20px;
  font-size: 1.8em;
  color: #d8648d;
}

具体内容和意义都直接写在代码里了，这样改也比较好改。然后通过article::before 和 article::after 添加伪元素，加上了可爱的小emoji！之后想试试能不能随着刷新随机不同的emoji……下次试试！！估计会涉及JavaScript，好难啊代码！搞不懂！！！

偷懒的方式加上背景格纹

#

很喜欢格纹，加上我主图是绣球花，感觉这样搭配很田园很可爱！但第一次加的时候十分失败（至今不知道为什么）。 但是我这次就很快速并且使用十分偷懒的方式加上了格纹！

body {
background-color: #e0e5ff9f;
background-image: url("https://www.transparenttextures.com/patterns/ps-neutral.png");
}

从url里引用的网址能快速生成我要的颜色和格纹，还有一些别的花纹也很好看，不过数量有点少也不太适合我，果然还是格纹好看。不过我有看到fedi友蛋卷王大人分享了booth的无料素材图，我之后要好好寻找有没有可以用的！！！

顺便一说，我因为直接加上这个格纹，导致**夜间模式适配大失败！！！**之后抽空修复一下、修复一下（擦汗）

随着鼠标点击随机漂浮颜文字

#

突然想加上这个功能是因为我在逛别人博客的时候发现点击会出现小礼花，好喜欢，就想着自己能不能做一个类似的效果。然后想加上自己喜欢的颜文字，对不起二次元遗民就这样深刻爱着“old fashion”。 大致思路就是在我设定的一堆合集里面随机抽取并加上随机颜色，点击触发后再消失，接下来就靠GPT老师了！在layouts/partials/footer.html文件中加入代码（GPT说在head.html里面也可以，但我没试过，我直接加在footer里面的。代码如下：

<script>
 // static/js/click-effect.js
document.addEventListener("click", function (e) {
    const phrases = ["(*≧▽≦)", "(๑>◡<๑)", "💖", "✨", "(*ﾟ∀ﾟ*)", "🌟", "(≧ω≦)", "♡", "｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡", "☆彡","(´▽`ʃ♡ƪ)","(｡•ㅅ•｡)♡","☁","❤","❀","(*´∀`)~♥","ヽ(・×・´)ゞ","⁽⁽ଘ( ˙꒳˙ )ଓ⁾⁾","(〃∀〃)"];
    const phrase = phrases[Math.floor(Math.random() * phrases.length)];

    const span = document.createElement("span");
    span.textContent = phrase;
    span.style.position = "fixed";
    span.style.zIndex = 9999;
    span.style.left = e.clientX + "px";
    span.style.top = e.clientY + "px";
    span.style.fontSize = "16px";
    span.style.fontWeight = "bold";
    span.style.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
    span.style.pointerEvents = "none";
    span.style.userSelect = "none";
    span.style.transition = "transform 1s ease-out, opacity 1s ease-out";

    document.body.appendChild(span);

    // 强制触发 reflow 才能让 transition 生效
    requestAnimationFrame(() => {
        span.style.transform = "translateY(-60px)";
        span.style.opacity = "0";
    });

    // 动画结束后移除
    setTimeout(() => {
        document.body.removeChild(span);
    }, 1000);
});

</script>

在这里面加入好像就不需要额外的js设置balabala的，不懂。但是效果很好，实现之后鼠标点击量迅速上升！！！颜文字飘出来好可爱啊，好喜欢……♥suki！

按钮样式

#

说实话……我真的不知道到底哪些部分算按钮啊！！！总之是实现了部分按钮的样式！ 在/assest/css/custom.css中加入以下代码，其中button:hover是指当鼠标悬停在button按钮上时”的样式。

/* 按钮样式 */
button {
  background: linear-gradient(135deg, #f3b2c8, #d8648d); /* 渐变按钮 */
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55em 1.1em;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

button:hover {
  background: linear-gradient(135deg, #f797b8, #ffccf7);
  transform: translateY(-3px); /* 悬浮感 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

在角落加入漂浮的卡比

#

思路是加入一个伪元素添加一只小小的卡比（图片），然后伪元素引入气球漂浮的动画效果。 所以在custom.css文件里加入

@keyframes floatBalloon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 向上浮动10px */
  }
  100% {
    transform: translateY(0);
  }
}

body::after {
  content: ""; /* 伪元素需要内容 */
  position: fixed; /* 固定位置 */
  bottom: 20px; /* 离底部 20px */
  right: 20px; /* 离右侧 20px */
  width: 100px; /* 动图宽度 */
  height: 85px; /* 动图高度 */
  background-image: url("https://res.stelpolva.moe/stpv/0cf7f154-59d8-4dd1-8d18-a8f8120b66fe.gif"); /* 动图 URL */
  background-size: contain; /* 保持比例，但不裁剪 */
  background-position: center; /* 图片居中 */
  z-index: 9999; /* 确保在页面最上层 */
  animation: floatBalloon 5s infinite ease-in-out; /* 添加动画 */
}

但我不知道为什么我的卡比不能循环动画……不过静静地睡觉也很可爱，卡比怎么这么萌啊！！！

最后，这一次是真的写了（复制粘贴了）好多！干货（？）满满！！！如果有好盆友能真的用上我就太开心了！！！！