效果展示
上一手来源：conoha的旧版博客
Sakurairo美化，Sakurairo 主题挂件
速通教程
引入以下脚本内容以兼容pjax
// 游泳
const swimmingChara = `
<div id="swimmingChara" class="kankore-bath hidden-sm hidden-xs">
<div style="animation: 10s linear 0s normal none infinite waves-r2l;" class="water"></div>
<div class="shiro kan" href="javascript:;">
<img src="/mods/kan/shiro.png">
</div>
</div>
`;
// 判断是否首页
function isHomepage() {
return window.location.pathname === '/' && !window.location.search;
}
function toggleswimmingChara() {
const contentContainer = document.getElementById('swimmingChara');
if (isHomepage()) {
// 如果在首页并且内容不存在，则插入内容
if (!contentContainer) {
document.body.insertAdjacentHTML('beforeend', swimmingChara);
// 执行脚本
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/mods/kan/kancolleconf.js';
document.body.appendChild(script);
}
} else {
// 非首页移除
if (contentContainer) {
contentContainer.remove();
}
}
}
// 刷新内容
function refreshswimmingChara() {
const contentContainer = document.getElementById('swimmingChara');
if (contentContainer) {
// 移除旧的载入脚本并重新载入
const oldScript = document.querySelector('script[src="/mods/kan/kancolleconf.js"]');
if (oldScript) {
oldScript.remove();
}
// 移除旧的内容
contentContainer.remove();
// 插入新的内容
document.body.insertAdjacentHTML('beforeend', swimmingChara);
// 重新载入
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/mods/kan/kancolleconf.js';
document.body.appendChild(script);
}
}
// 首页初始化
toggleswimmingChara();
// 每6秒刷新一次
setInterval(refreshswimmingChara, 60000);
// 监听pjax事件
document.addEventListener('pjax:complete', () => {
toggleswimmingChara();
refreshswimmingChara();
});
未开启pjax的站点可以直接下载并引入以下内容：
样式已针对sakurairo的封面波浪纹饰进行修改
https://wp.moecat.cc/mods/kan/kancolle.css
https://wp.moecat.cc/mods/kan/kancolle.js
接着在页尾嵌入以下内容：
<div id="swimmingChara" class="kankore-bath hidden-sm hidden-xs">
<div style="animation: 10s linear 0s normal none infinite waves-r2l;" class="water"></div>
<div class="shiro kan" href="javascript:;">
<img src="/mods/kan/shiro.png">
</div>
</div>最后再引入载入脚本即可：
https://wp.moecat.cc/mods/kan/kancolleconf.js
内容
允许
说什么好呢？
不知道哎