给你的博客添加一个宠物挂件

1.在source/js/custom/目录下创建一个pet.js文件

// 宠物挂件
(function() {
  const petContainer = document.createElement('div');
  petContainer.id = 'pet-container';
  petContainer.style.cssText = `
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    width: 100px;
    height: 100px;
    pointer-events: none;
  `;
  
  const petImage = document.createElement('img');
  petImage.id = 'pet-image';
  petImage.style.cssText = `
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
  `;
  
  // 宠物图片数组，可以自行修改为您喜欢的图片
  const petImages = [
    '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'
  ];
  
  // 随机选择一个宠物图片
  petImage.src = petImages[Math.floor(Math.random() * petImages.length)];
  
  petContainer.appendChild(petImage);
  document.body.appendChild(petContainer);
  
  // 拖拽功能
  let isDragging = false;
  let dragOffsetX = 0;
  let dragOffsetY = 0;
  
  petImage.addEventListener('mousedown', (e) => {
    isDragging = true;
    dragOffsetX = e.clientX - petContainer.offsetLeft;
    dragOffsetY = e.clientY - petContainer.offsetTop;
    petContainer.style.pointerEvents = 'auto';
  });
  
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      const left = e.clientX - dragOffsetX;
      const top = e.clientY - dragOffsetY;
      
      // 限制在窗口内
      const maxLeft = window.innerWidth - petContainer.offsetWidth;
      const maxTop = window.innerHeight - petContainer.offsetHeight;
      
      petContainer.style.left = `${Math.min(Math.max(0, left), maxLeft)}px`;
      petContainer.style.bottom = `${Math.min(Math.max(0, window.innerHeight - top - petContainer.offsetHeight), maxTop)}px`;
    }
  });
  
  document.addEventListener('mouseup', () => {
    isDragging = false;
    petContainer.style.pointerEvents = 'none';
    // 保存位置到本地存储
    localStorage.setItem('petPosition', JSON.stringify({
      left: petContainer.style.left,
      bottom: petContainer.style.bottom
    }));
  });
  
  // 点击宠物切换图片
  petImage.addEventListener('click', () => {
    if (!isDragging) {
      const currentIndex = petImages.indexOf(petImage.src);
      const nextIndex = (currentIndex + 1) % petImages.length;
      petImage.src = petImages[nextIndex];
    }
  });
  
  // 从本地存储恢复位置
  const savedPosition = localStorage.getItem('petPosition');
  if (savedPosition) {
    const position = JSON.parse(savedPosition);
    petContainer.style.left = position.left;
    petContainer.style.bottom = position.bottom;
  }
  
  // 适配pjax
  document.addEventListener('pjax:complete', () => {
    if (!document.getElementById('pet-container')) {
      document.body.appendChild(petContainer);
    }
  });
})();

2.在主题配置文件_config.anzhiyu.yml中添加引用在inject的bottom部分添加对我们刚刚创建的pet.js文件的引用：

bottom:
    - <script src="/js/custom/pet.js" defer></script>

3.重新启动博客查看效果

4.如果您想要修改宠物图片，可以编辑source/js/custom/pet.js文件中的petImages数组，将其替换为您喜欢的图片URL。

5.您也可以调整宠物的大小，只需修改petContainer.style.cssText中的width和height值即可。