博客底部添加动物图片

1、在js目录中创建footer-animal.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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://pic.paperturn.us.kg/img/202412081820604.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://pic.paperturn.us.kg/img/202412081819703.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);

2、在主题配置文件中，在inject的bottom中添加<script src="/js/footer-animal.js" defer></script>

参考：
给你的博客添加一个宠物挂件 | 梦爱吃鱼