教程hexo博客魔改给你的博客添加一个宠物挂件梦爱吃鱼2024-10-192024-12-15看见了石头大佬博客的这个宠物挂件有点心动，于是乎，我也来搞一个。
顶部挂件如果是其它主题，可以按照下面方法，进行一定修改。。。
如果是安知鱼主题，那么直接替换themes\anzhiyu\layout\includes\bbTimeList.pug文件就行了，代码放下面了
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140if 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试试，暂且不知道会不会影响其它部分
12345678/* 小动物夜间显示优化 */[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中添加。 根据你文件位置，自行调整。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051function initFooterAnimal() { const footerBar = document.querySelector('#footer-bar'); if (!footerBar) return console.error('找不到指定元素'); const footerAnimal = document.createElement('div'); footerAnimal.id = 'footer-animal'; footerAnimal.innerHTML = ` 
`; 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);结束魔改需注意备份！当前文章主为记录本站修改的过程，不保证一定有效。