看见了石头大佬博客的这个宠物挂件有点心动，于是乎，我也来搞一个。
顶部挂件
如果是其它主题，可以按照下面方法，进行一定修改。。。
如果是安知鱼主题，那么直接替换themes\anzhiyu\layout\includes\bbTimeList.pug文件就行了，代码放下面了
if site.data.essay
each i in site.data.essay
if i.home_essay
- let onclick_value = theme.pjax.enable ? `pjax.loadUrl("/essay/");` : '';
- let href_value = theme.pjax.enable ? 'javascript:void(0);' : `/essay/`;
#bbTimeList.bbTimeList.container
i.anzhiyufont.anzhiyu-icon-jike.bber-logo.fontbold(onclick=onclick_value, title="即刻短文", href=href_value, aria-hidden="true")
#bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex="-1")
#bber-talk.swiper-wrapper(onclick=onclick_value)
each i in site.data.essay
each item, index in i.essay_list
if index < 10
- var contentText = item.image ? item.content + ' [图片]' : (item.video ? item.content + ' [视频]' : item.content)
a.li-style.swiper-slide(href=href_value)= contentText
a.bber-gotobb.anzhiyufont.anzhiyu-icon-circle-arrow-right(onclick=onclick_value, href=href_value, title="查看全文")
img.con-animals.entered.loaded(id="new-con-animals" src="")
script(src=url_for(theme.home_top.swiper.swiper_js))
style.
#bbTimeList {
position: relative;
}
.con-animals {
display: block;
position: absolute;
max-width: 260px;
top: -85px;
z-index: 2;
}
@media screen and (max-width: 1200px) {
.con-animals {
display: none;
}
}
script.
// 将lastImageUrl移到全局作用域
window.lastImageUrl = window.lastImageUrl || '';
function setRandomImage() {
const img = document.getElementById('new-con-animals');
const imageUrls = [
"https://i1.wp.com/ruom.wuaze.com/i/2024/10/18/901216.webp",
"https://i1.wp.com/ruom.wuaze.com/i/2024/10/18/074167.webp",
"https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/759434.webp",
"https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/526748.webp",
"https://i1.wp.com/ruom.wuaze.com/i/2024/10/18/429029.webp"
];
let randomImage;
do {
randomImage = imageUrls[Math.floor(Math.random() * imageUrls.length)];
} while (randomImage === window.lastImageUrl);
window.lastImageUrl = randomImage;
if (img) {
img.src = randomImage;
}
}
function initializeDragImage() {
const img = document.getElementById('new-con-animals');
const container = document.getElementById('bbTimeList');
if (!img || !container) return;
if (!window.lastImageUrl) {
setRandomImage();
} else {
img.src = window.lastImageUrl;
}
let isDragging = false, wasDragged = false, startX, startLeft;
const containerWidth = container.clientWidth;
const imgWidth = img.clientWidth;
const maxLeft = containerWidth - imgWidth;
const edgeThreshold = 20;
let lastLeft = parseInt(localStorage.getItem('imgPositionLeft')) || 0;
lastLeft = Math.min(maxLeft, Math.max(0, lastLeft));
img.style.left = `${lastLeft}px`;
const savePosition = (left) => localStorage.setItem('imgPositionLeft', left);
img.addEventListener('click', () => {
if (!wasDragged) {
let currentLeft = lastLeft;
let newLeft;
if (currentLeft <= edgeThreshold) {
newLeft = Math.min(currentLeft + 200, maxLeft);
} else if (currentLeft >= maxLeft - edgeThreshold) {
newLeft = Math.max(currentLeft - 200, 0);
} else {
newLeft = currentLeft + (Math.random() < 0.5 ? -200 : 200);
newLeft = Math.max(0, Math.min(newLeft, maxLeft));
}
if (newLeft !== lastLeft) {
lastLeft = newLeft;
img.style.left = `${newLeft}px`;
savePosition(newLeft);
}
}
});
img.addEventListener('mousedown', (e) => {
isDragging = true;
wasDragged = false;
startX = e.clientX;
startLeft = lastLeft;
img.style.transition = 'none';
const onMouseMove = (e) => {
if (!isDragging) return;
wasDragged = true;
const offsetX = e.clientX - startX;
lastLeft = Math.max(0, Math.min(startLeft + offsetX, maxLeft));
requestAnimationFrame(() => {
img.style.left = `${lastLeft}px`;
});
};
const onMouseUp = () => {
isDragging = false;
img.style.transition = 'left 0.5s ease-in-out';
savePosition(lastLeft);
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
}
document.addEventListener('DOMContentLoaded', initializeDragImage);
document.addEventListener('pjax:success', initializeDragImage);
如果你发现夜间模式会被遮挡一部分可以添加下这段css试试，暂且不知道会不会影响其它部分
/* 小动物夜间显示优化 */
[data-theme='dark'] #page-header.nav-fixed #nav {
background: var(--anzhiyu-black)!important;
}
[data-theme='dark'] #page-header #nav {
background: 0 !important;
}
页脚挂件
挂件基于青桔气球的教程进行修改，适配安知鱼主题。只需在主题中引入以下JavaScript代码，即可在页脚动态插入一个动物挂件。
需要开启 主题配置文件中的
footer_bar选项，设置为true
将以下代码直接插入到主题的JavaScript文件中，其他主题可能需要调整插入位置。
1.新建一个footer-animal.js文件，将以下代码粘贴进去。
2.然后在_config.anzhiyu.yml中inject选项的bottom中添加<script src="/static/footer-animal.js" defer></script>。 根据你文件位置，自行调整。
function initFooterAnimal() {
const footerBar = document.querySelector('#footer-bar');
if (!footerBar)
return console.error('找不到指定元素');
const footerAnimal = document.createElement('div');
footerAnimal.id = 'footer-animal';
footerAnimal.innerHTML = `
<img class="animal entered loaded"
src="https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/473503.webp"
alt="动物" />
`;
footerBar.insertAdjacentElement('beforebegin', footerAnimal);
const style = document.createElement('style');
style.textContent = `
#footer-animal {
position: relative;
}
#footer-animal::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 36px;
background: url(https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/351933.webp) repeat center / auto 100%;
box-shadow: 0 4px 7px rgba(0,0,0,.15);
}
.animal {
position: relative;
max-width: min(974px, 100vw);
margin: 0 auto;
display: block;
}
#footer-bar {
margin-top: 0 !important;
}
@media screen and (max-width: 1023px) {
#footer-animal::before {
height: 4vw;
}
}
[data-theme=dark] #footer-animal {
filter: brightness(.8);
}
`;
document.head.appendChild(style);
}
document.addEventListener('DOMContentLoaded', initFooterAnimal);
document.addEventListener('pjax:success', initFooterAnimal);
结束
魔改需注意备份！当前文章主为记录本站修改的过程，不保证一定有效。
评论区