为博客底部添加一排宠物

效果

宠物.png

教程

找到主题 themes/solitude/layout/includes/footer.pug 新增 pug

pug

1
2
3
4
5
6
7
8
9
div#footer-animal
        .animal-wall
        img.animal.entered.loaded(
            src="https://p.qjqq.cn/cover/202410191400045.png"
            onerror="this.onerror=null;this.src='/img/404.jpg';"
            data-lazy-src="https://p.qjqq.cn/cover/202410191400045.png"
            alt="动物"
            data-ll-status="loaded"
        )

css

在自定义 css 文件里新增 css

首先，在您的 Hexo 博客目录中创建 CSS 文件：

1
source/css/custom.css

然后，编辑主题配置文件 _config.anzhiyu.yml，添加以下内容：

1
2
3
4
inject:
head:
- <link rel="stylesheet" href="/css/custom.css">

custom.css内容如下

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
#footer-animal {
    position: relative;
    width: 100%;
}

#footer-animal .animal-wall {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36px;
    max-width: none;
    background: #bcb0a4 url(https://p.qjqq.cn/cover/202410191400532.png/color) repeat center;
    background-size: auto 100%;
    box-shadow: 0 4px 7px rgba(0,0,0,.15);
}

@media screen and (max-width: 1023px) {
    #footer-animal .animal-wall {
        height:4vw
    }
}

#footer-animal img.animal {
    position: relative;
    max-width: min(974px,100vw);
    margin: 0 auto;
    display: block;
}

#footer-bar {
    margin-top: 0 !important;
}
.animal {
    animation: sway 3s ease-in-out infinite;
    display: block;
    max-width: 100px;
    margin: 0 auto;
}

@keyframes sway {
    0%, 100% {
        transform: translateX(-10px); /* 向左偏移 */
    }
    50% {
        transform: translateX(10px); /* 向右偏移 */
    }
}

此时 如果出现图片不显示的情况，浏览器控制台查看发现图片链接在浏览器中被替换为 base64 占位符

在 Hexo 中添加自定义 CSS 文件：

1
img[src*="base64"] { content: url('https://p.qjqq.cn/cover/202410191400045.png/color') !important; }

最后一键三连结束战斗！

教程源自给你的博客底部添加一排宠物 | 青桔气球