【Hexo】给博客添加宠物挂件

适配安知鱼主题和Solitude主题，我采用的是安知鱼主题，Solitude主题可参考教程

{% link 给你的博客底部添加一排宠物,@青桔气球,https://blog.qjqq.cn/posts/f69c.html %}

同时感谢@梦爱吃鱼 大佬的耐心指导和帮助，原文可参考

{% link 给你的博客添加一个宠物挂件,@梦爱吃鱼,https://blog.bsgun.cn/posts/55b29cdb/ %}

顶部挂件

页面左上角随机动物挂件

仅针对安知鱼主题，其他主题自行修改

可直接替换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);

页脚挂件

页脚挂件如下所示

1、开启主题配置footerBar功能

footerBar:
    enable: true

2、创建footer-animal.js

此处我的存放路径为：blog\themes\anzhiyu\source\js\custom\footer-animal.js，粘贴以下内容：

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);

3、引入自定义js

inject:
  bottom:
    # 自定义js
    - <script src="/js/custom/footer-animal.js" defer></script>

4、执行命令三连

hexo cl && hexo g && hexo s