文章摘要
青桔 GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉

已经适配Solitude主题

效果

底部图片

教程

找到主题 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

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
#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;
}

最后一键三连结束战斗！