左下动态GIT

参考地址：调皮的猫猫虫

添加动态图片

[Blogroot]\public\img\top-img\gif\Capoo.gif

你可以复制你喜欢的gif动态图
这个网站有很多可自行挑选
https://www.aigei.com/s?type=design&q=%E5%BD%A9%E8%99%B9&dim=is_vip_false&term=gif&page=2#resContainer

添加js文件

在 [Blogroot]\themes\butterfly\source\js\gif.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 创建一个新的图片元素并添加到页面中
function createGifElement() {
    var gifContainer = document.createElement('div');
    gifContainer.classList.add('gif-container');

    var gifImage = document.createElement('img');
    gifImage.src = '../img/top-img/gif/Capoo.gif'; // 修改为你的GIF图像路径
    gifImage.alt = 'Capoo GIF Image'; // 修改为你的GIF图像的alt文本

    gifContainer.appendChild(gifImage);
    document.body.appendChild(gifContainer);

    return gifContainer;
}

// 检测设备类型并在移动设备上隐藏 GIF 图像
function checkDeviceType() {
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    var gifContainer = createGifElement();
    if (isMobile) {
        gifContainer.classList.add('gif-hidden');
    }
}

// 当页面加载完成时检测设备类型
document.addEventListener('DOMContentLoaded', function () {
    checkDeviceType();
});

添加css文件

在 [Blogroot]\themes\butterfly\source\cs\capoo.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* CSS样式用于设置 GIF 容器的位置和样式 */
.gif-container {
  position: fixed;
  bottom: 10px;
  /* 调整 GIF 在底部的距离 */
  left: 10px;
  /* 调整 GIF 在左侧的距离 */
  z-index: 9999;
  /* 确保 GIF 显示在其他内容的上方 */
}

.gif-container img {
  max-width: 130px;
  /* 设置 GIF 最大宽度 */
  height: auto;
  /* 自动调整高度 */
}

.gif-hidden {
  display: none;
  /* 在移动设备上隐藏 GIF */
}

配置文件引入js和css

[Blogroot]\_config.butterfly.yml 找到 inject,引入 js和 css:

1
2
3
4
5
6
7
inject:
  head:
  - <link rel="stylesheet" type="text/css" href="/css/capoo.css"> # GIF动态

  bottom: 
  - <script data-pjax src="/js/gif.js"></script> # GIF动态

最后三连

执行 hexo cl,hexo g,hexo s 三连即可看到效果.

踩坑

按照参考博主配置发现就主页面可正常加载git动画 其它页面报告找不到路径

image-20240806165545084

1
2
3
4
5
主页面正常预览gif
路径是为http://IP地址/img/top-img/gif/Capoo.gif

其它子页面的gif全部报错 找不到路径
我查看发现路径是“http://IP地址/2023/07/03/img/top-img/gif/Capoo.gif”

解决办法是将

[Blogroot]\themes\butterfly\source\js\gif.js中的

1
2
3
gifImage.src = '../img/top-img/gif/Capoo.gif'; // 修改为你的GIF图像路径
改为
gifImage.src = '/img/top-img/gif/Capoo.gif'; // 修改为你的GIF图像路径

成功解决

image-20240806172819749