前言

教大家在solitude主题的页脚添加一排宠物,本教程来源于青桔气球。

效果

宠物效果图

教程

找到主题themes/solitude/layout/includes/footer.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"
        )

Pug需要缩进正确,如下是附近的代码,你们可以复制粘贴进行替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        if theme.footer && theme.footer.randomlink
            div.footer-group
                div.footer-title-group
                    h3.footer-title= _p('footer.randomlink')
                    button.random-friends-btn(onclick='randomLinksList()', title=_p('footer.randomlink'))
                        i.solitude.fas.fa-arrows-rotate
                div.footer-links#friend-links-in-footer

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"
    )
div#footer-bar

然后就是CSS了,我们可以将CSS放到自定义的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
#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;
}

最后一键三连就可以看到效果了