更改背景

替换背景图片

原本 404 界面长这样

原404界面

观察这个界面的 theme/layout.404.ejs，该界面定义背景图地址代码如下

var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg';
$('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');

上述代码可以实现背景图的轮换

变量定义：<%- theme.jsDelivr.url %>：这是模板引擎（如 EJS、Jade 等）中的语法，它会被替换为 theme.jsDelivr.url 变量的值。

<%- url_for('/medias/banner/') %>：url_for 是一个函数，通常在 Web 框架中使用（比如 Flask、Django 等），用于生成资源的 URL。这里它生成了 /medias/banner/ 路径的完整 URL

这样，第一个语句构建了图片地址变量
$('.test-cover')：使用 jQuery 选择类名为 bg-cover 的 HTML 元素。

.css('background-image', 'url(' + bannerUrl + ')')：为选择到的元素设置 background-image 样式，将 bannerUrl 作为背景图片的 URL

这样，将 <div> 标签的背景图片进行更换

因此，将这两行语句进行修改就好，替换成自己所需图片_{我选的蒙德}

var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + "<%- theme.notFound.background %>" + ".webp";
$('.test-cover').css('background-image', 'url(' + bannerUrl + ')');

加载派蒙 & 对话框

因为派蒙比较复杂，就直接选择的 png 图片

而对话框就简单多了，所以选择了 svg 图形，直接使用菜鸟在线 SVG 编辑工具简单画了一个

接着，就是布局几个元素，主要有三个元素：派蒙、对话框、文字，所以我们需要在 container 中划出三个格子

其中，派蒙应该在右下角，而对话框和文字应该同时在左上角，使用浮动和定位完成

.container_box {  /* 给 container 设置相对位置属性 */
    position: relative;
  }

  .chat_cloud_box {  /* 对话框其实没必要单独写 */
  }

  .paimeng_words_box { /* 文字框设置绝对位置并且置顶 */
    position: absolute;
    top: 0;
  }

  .paimeng_box {  /* 派蒙浮动到右下角 */
    float: right;

  }

划出类似区域后，最后对文字进行调整，设置对齐与大小

.paimeng_words_box {
   text-align: center;
   padding-top: 20%;
   font: bold 100% "SmileySans-Oblique";
}

派蒙上下移动

派蒙上下移动好说，但我作为一个学过三年动画的~~艺术生~~，自然得确保运动符合运动曲线，所以就用了三角函数

let img = document.getElementById('paimeng');
let amplitude = 38;  // 垂直移动的幅度
let frequency = 0.02; // 振动频率
let offset = 0;       // 初始偏移量

function moveImage() {
     offset += frequency;  // 逐渐增加偏移量，模拟时间变化
     let yPosition = amplitude * Math.sin(offset);  // 使用正弦函数来计算Y轴位置
     img.style.transform = `translateY(${yPosition}px)`;  // 更新图片的垂直位置
     requestAnimationFrame(moveImage);  // 循环调用自己，实现动画效果
}

moveImage();  // 启动动画

其实就是一个 $s_{当前}=s_0+offset$，而 $offset$ 随时间做三角函数运动

加载播放

加载完成执行

首先，需要在加载完成时候执行播放，因此 DOM 需要函数在网页执行完成时自动执行。有许多方法可以完成这一点，很多是对 <body> 标签添加 JS 函数，但是 ejs 文件中有可能就木有 <body> 标签，因此使用 DOMContentLoaded 事件——这种方法可以在 DOM 完全加载后执行函数，而不需要修改 HTML 结构。

<script>
    document.addEventListener("DOMContentLoaded", function() {
        alert("DOM结构加载完成，执行函数！");
        // 调用你的函数
    });
</script>

播放音频

使用 <audio> 标签即可播放音频

<audio id="noTravel" src="PaimengSound.mp3"></audio>

而且 <audio> 标签自带自动播放属性 autoplay ~~所以我为什么还要写自动播放~~

点击派蒙发声

但是！目前很多浏览器禁止了进入页面就放声音和视频。必须要求点一点什么才能播放。

function imageClicked() {
    var audio = document.getElementById("noTravel");
    audio.play();
}
// 为图片元素添加点击事件监听器
document.getElementById("paimeng").onclick = imageClicked;