查看“︁微件:SideBarPic”︁的源代码

<noinclude>用来给{{tl|替换侧边栏底图}}更好的体验效果的，作者[[User:AnnAngela]]</noinclude><includeonly><!--{if !isset($wgSideBarPic) || !$wgSideBarPic}--><!--{assign var="wgSideBarPic" value=true scope="global"}--><script>
"use strict";
window.RLQ = window.RLQ || [];
window.RLQ.push(async function loop() {
    await mw.loader.using("mediawiki.Uri");
    if ($("html > body > #content + #mw-navigation").children("#mw-head, #mw-panel").length !== 2) {
        setTimeout(loop, 100);
        return;
    }
    const sidebarCharacter = $(".sidebar-character").slice(0, 3);
    if (!sidebarCharacter.length) { return; }
    await Promise.all(sidebarCharacter.find("img").toArray().map((img) => new Promise((res) => {
        const lazyload = new Image();
        lazyload.addEventListener("load", () => {
            img.src = img.dataset.src;
            res();
        });
        lazyload.addEventListener("error", () => {
            const url = new mw.Uri(lazyload.src);
            url.query._ = Math.random();
            lazyload.src = url;
        });
        lazyload.src = img.dataset.src;
    })));
    $("body").addClass("sideBarPic");
    sidebarCharacter.addClass("active").each((_, ele) => {
        const self = $(ele);
        self.appendTo("html > body > #content + #mw-navigation").fadeIn().addClass(ele.dataset.align === "top" ? "top" : "bottom").css("user-select", "none");
        self.find("img").removeAttr("width").removeAttr("height");
    });
    $(window).on("resize", () => {
        sidebarCharacter.each((_, ele) => {
            const self = $(ele);
            self.find("img").width(self.width());
        });
    }).resize();
    if (sidebarCharacter.is('[data-displaylogo="yes"]')) {
        $("body").addClass("show-logo");
    }
});</script><style>
/* 侧边栏logo或左下角图片添加 */
.sidebar-character {
    position: fixed;
    left: -3px;
    z-index: -2;
}
.sidebar-character.top {
    top: 0;
}
.sidebar-character.bottom {
    bottom: 0;
}
#wglogo {
    display: none;
}
@media screen and (max-width: 600px) {
    /* 低像素设备隐藏 */
    .sidebar-character {
        display: none!important;
    }
}
.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel div.portal {
    background-color: rgba(246, 246, 246, 0.9);
    /*padding-top: 0;
    top: 212px*/
    margin-left: -0.75em;
    margin-right: 0;
    padding-left: 1.5em;
    padding-right: .95em;
}
.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel #p-logo + div.portal{
    padding-top: 1.1em;
    margin-top: 0;
}
.sideBarPic.skin-vector:not(.DeceasedPerson) #mw-panel div#p-logo {
    /*background: rgba(246, 246, 246, 0.73);
    left: 0;
    padding: 0 .5em;
    top: -212px*/
}
.sideBarPic:not(.DeceasedPerson) .sidebar-character.active {
    display: block;
}
.sidebar-character {
    display: none;
}
body.show-logo:not(.DeceasedPerson) #mw-panel #p-logo {
    height: 160px;
}
body.show-logo:not(.DeceasedPerson) #mw-panel #p-logo .mw-wiki-logo {
    background-image: url(https://img.moegirl.org/logo/zhMoegirl15.2.png);
    height: 160px;
}
.sideBarPic:not(.DeceasedPerson) #footer {
    background-color: rgba(255,255,255,.7);
}
.sideBarPic:not(.DeceasedPerson) #footer #footer-moegirl .copyright {
    color: #2f2f2f;
}
</style>
<!--{/if}--></includeonly>