本文最后更新于 92 天前，其中的信息可能已经有所发展或是发生改变。

整体代码

转载自鸦鸦的巢穴

页尾脚本（2023 年 7 月 27 日更新）

<!--回顶图标修改--><script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>

<!--卡片3D效果脚本--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper/vanilla3D/vanilla-tilt.min.js"></script>
<!--判断是否为Safari浏览器--><script>var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);</script>

<!--以下内容每次跳转新页面都执行，pjax额外处理--><script>
window.pjaxLoaded = function () {
    //站点概览点击头像或作者名跳转到关于页
    $("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
    $("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
    //说说标题替换为脑电波
    if (window.location.pathname == "/idea") {
        if ($("#content > div.page-information-card-container > div > div").length > 0) {
            var temp_str = document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g, "脑电波");
            document.querySelector("#content > div.page-information-card-container > div > div").innerHTML = temp_str;
            $("#content > div.page-information-card-container > div > div > p").append('<br>由<a href="https://t.me/yaquews" target="_blank">鸦雀无声</a>频道自动同步');
            $("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
            $("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-bolt");
        }
    }
    //卡片3D效果
    if (screen.width >= 768 && !isSafari) {
        VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container"), {
            reverse: true,  // reverse the tilt direction
            max: 8,     // max tilt rotation (degrees)
            startX: 0,      // the starting tilt on the X axis, in degrees.
            startY: 0,      // the starting tilt on the Y axis, in degrees.
            perspective: 1000,   // Transform perspective, the lower the more extreme the tilt gets.
            scale: 1.02,      // 2 = 200%, 1.5 = 150%, etc..
            speed: 600,    // Speed of the enter/exit transition
            transition: false,   // Set a transition on enter/exit.
            axis: "y",    // What axis should be banned. Can be "x", "y", or null
            reset: true,   // If the tilt effect has to be reset on exit.
            easing: "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
            glare: false,  // if it should have a "glare" effect
            "max-glare": 0.8,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
            "glare-prerender": false,  // false = VanillaTilt creates the glare elements for you, otherwise
            // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
            "mouse-event-element": null,   // css-selector or link to HTML-element what will be listen mouse events
            gyroscope: true,   // Boolean to enable/disable device orientation detection,
            gyroscopeMinAngleX: -45,    // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
            gyroscopeMaxAngleX: 45,     // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
            gyroscopeMinAngleY: -45,    // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
            gyroscopeMaxAngleY: 45,     // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
        })
    }
}
window.pjaxLoaded();
</script>

<!--根据滚动高度改变顶栏透明度--><script>
!function () {
    let toolbar = document.getElementById("navbar-main");
    let $bannerContainer = $("#banner_container");
    let $content = $("#content");

    let startTransitionHeight;
    let endTransitionHeight;
    let maxOpacity = 0.65;

    startTransitionHeight = $bannerContainer.offset().top - 75;
    endTransitionHeight = $content.offset().top - 75;

    $(window).resize(function () {
        startTransitionHeight = $bannerContainer.offset().top - 75;
        endTransitionHeight = $content.offset().top - 75;
    });

    function changeToolbarTransparency() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < startTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
            toolbar.style.setProperty('box-shadow', 'none');
            toolbar.style.setProperty('-webkit-box-shadow', 'none');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
            }
            toolbar.classList.add("navbar-ontop");
            return;
        }
        if (scrollTop > endTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
            toolbar.style.setProperty('box-shadow', '');
            toolbar.style.setProperty('-webkit-box-shadow', '');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
            }
            toolbar.classList.remove("navbar-ontop");
            return;
        }
        let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
        toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
        toolbar.style.setProperty('box-shadow', '');
        if (argonConfig.toolbar_blur) {
            toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
            toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
        }
        toolbar.classList.remove("navbar-ontop");
    }
    changeToolbarTransparency();
    document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>

<!--宠物播放器-->
<script>const live2d_path = "https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/";</script>
<meting-js server="tencent" type="playlist" id="8559460487" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
<script>
//封装异步加载资源的方法
function loadExternalResource(url, type) {
    return new Promise((resolve, reject) => {
        let tag;
        if (type === "css") {
            tag = document.createElement("link");
            tag.rel = "stylesheet";
            tag.href = url;
        }
        else if (type === "js") {
            tag = document.createElement("script");
            tag.src = url;
        }
        if (tag) {
            tag.onload = () => resolve(url);
            tag.onerror = () => reject(url);
            document.head.appendChild(tag);
        }
    });
}

if (screen.width >= 768) {
    Promise.all([
        loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu.min.css", "css"),
        loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/live2d.min.js", "js"),
        loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu-tips.min.js", "js"),
        loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
        loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
    ]).then(() => {
        loadExternalResource("https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js", "js");
    });
    ap = null;
    Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
        set: function(aplayer) {
                ap = aplayer;
                ap_init();
                initWidget();
        }
    });
}
</script>

CSS 样式（2023 年 7 月 27 日更新）

修改内容见注释，其中文章背景卡片毛玻璃效果引起较明显卡顿，已弃用。

关于毛玻璃效果再说一下，背景卡片的毛玻璃效果虽然很好看，但对比之下真的有肉眼可见的卡顿，但是只弄一个导航栏毛玻璃效果的话速度还是可以的。主要可能是由于文章背景卡片在页面滑动过程中对模糊效果的实时计算量比较大，而这个计算是由客户端浏览器完成的，用户体验就比较卡……

主题 - 自定义 - 额外 CSS，添加以下内容：

/*白天卡片背景透明*/
.card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter: blur(6px);
}

/*夜间透明*/
html.darkmode .bg-white,
html.darkmode .card,
html.darkmode #footer {
    background: rgba(66, 66, 66, 0.9) !important;
}

html.darkmode #fabtn_blog_settings_popup {
    background: rgba(66, 66, 66, 0.95) !important;
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,
.darkmode .card .widget,
#post_content>div>div>div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title,
#custom_html-2 {
    background-color: #ffffff00 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.emotion-keyboard,
#fabtn_blog_settings_popup {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/*分类卡片透明*/
.bg-gradient-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/*分类卡片文本居中*/
#content>div.page-information-card-container>div>div {
    text-align: center;
}

/*提示条背景透明*/
.admonition,.collapse-block{
    background-color: transparent !important;
    backdrop-filter: contrast(130%);
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item>a:hover,
.leftbar-menu-item.current>a {
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item {
    border-left: 1px solid #aaa;
}

.site-friend-links-title {
    border-top: 1px dotted #aaa;
}

#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: none;
}

html.darkmode #leftbar_tab_tools ul li {
    border-bottom: none;
}

/*左侧栏边距修改*/
.tab-content {
    padding: 10px 0px 0px 0px !important;
}

.site-author-links {
    padding: 0px 0px 0px 10px;
}

/*目录位置偏移修改*/
#leftbar_catalog {
    margin-left: 0px;
}

/*目录条目边距修改*/
#leftbar_catalog .index-link {
    padding: 4px 4px 4px 4px;
}

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools {
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {
    margin-top:0;
    margin-bottom: 1rem;
}
.wp-block-columns {
    margin-bottom:0;
}

/*正文表格样式修改*/
article table>tbody>tr>td,
article table>tbody>tr>th,
article table>tfoot>tr>td,
article table>tfoot>tr>th,
article table>thead>tr>td,
article table>thead>tr>th {
    padding: 8px 10px;
    border: 1px solid;
}

/*表格居中样式*/
.wp-block-table.aligncenter {
    margin: 10px auto;
}

/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
    font-weight: bold;
    color: #ffffff !important;
    text-shadow: 0px 0px 5px #000000 !important;
}

/*鼠标样式修改*/
body {
    cursor: url(https://img.crowya.com/wp-content/uploads/2023/05/mouse32.ico), auto;
}

/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before {
    background-size: 50%;
    background-position: 50% 45%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0MjM2MjAwNjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzYxLjY2ODMzMiAzMjMuNDM3NzEycTEwLjMxMzE0MyAxMS40MTAyODYgNC4wMjI4NTcgMjUuMTYxMTQzbC0zMDguNTg5NzEyIDY2MS4xMzgyODFxLTcuNDYwNTcxIDE0LjI2Mjg1Ny0yMy45OTA4NTcgMTQuMjYyODU3LTIuMjY3NDI5IDAtNy45NzI1NzEtMS4xNzAyODYtOS43MjgtMi44NTI1NzEtMTQuNTU1NDI4LTEwLjgyNTE0M3QtMi41Ni0xNy4xMTU0MjhsMTEyLjU2Njg1Ni00NjEuNjc3NzExLTIzMi4wMDkxNDEgNTcuNzA5NzE0cS0yLjI2NzQyOSAwLjU4NTE0My02Ljg3NTQyOSAwLjU4NTE0My0xMC4zMTMxNDMgMC0xNy43MDA1NzEtNi4yOTAyODYtMTAuMzEzMTQzLTguNTU3NzE0LTcuNDYwNTcxLTIyLjMwODU3MWwxMTQuODM0Mjg1LTQ3MS40MDU3MTFxMi4yNjc0MjktNy45NzI1NzEgOS4xNDI4NTctMTMuMTY1NzE0dDE2LjAxODI4Ni01LjEybDE4Ny40NjUxNDIgMHExMC44MjUxNDMgMCAxOC4yODU3MTQgNy4xNjh0Ny40NjA1NzEgMTYuODIyODU3cTAgNC41MzQ4NTctMi44NTI1NzEgMTAuMzEzMTQzbC05Ny43MTg4NTYgMjY0LjU1NzcxMiAyMjYuMzAzOTk4LTU2LjAyNzQyOHE0LjUzNDg1Ny0xLjE3MDI4NiA2Ljg3NTQyOS0xLjE3MDI4NiAxMC44MjUxNDMgMCAxOS40NTYgOC41NTc3MTR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyNTI0Ij48L3BhdGg+PC9zdmc+);
}

.shuoshuo-preview-container:hover:before {
    background-position: 50% 50%;
    background-size: 60%;
}

/*回顶图标放大*/
#fabtn_back_to_top,
#fabtn_go_to_comment,
#fabtn_toggle_blog_settings_popup,
#fabtn_toggle_sides,
#fabtn_open_sidebar,
#fabtn_toggle_darkmode {
    font-size: 1.2rem;
}

/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}

/*顶栏菜单放大*/
.navbar-nav .nav-link {
    font-size: 1rem;
}

.navbar-nav .nav-item {
    margin-right: 0;
}

.mr-lg-5,
.mx-lg-5 {
    margin-right: 1rem !important;
}

.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}

/*字体*/
@font-face {
    font-family: myFont;
    src:url(https://img.crowya.com/font/FZFWZZAY.woff2) format('woff2');
    font-display: swap;
}

body,
.nav-link-inner--text {
    font-family: myFont;
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 100;
    margin-right: 2rem;
    padding-bottom: .1rem;
}

/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
    transform: scale(1.2);
    filter: brightness(150%);
}

/*隐藏左侧栏搜索框*/
.leftbar-menu {display: none;}
.leftbar-search-button {display: none;}
#leftbar_part2_inner:before {display: none;}
@media screen and (min-width: 900px){
    .leftbar-banner {
    border-radius: var(--card-radius);
    }
}

/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
    border-radius: 10px;
    background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}

/*滚动条修改*/
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track{
    background-color:#272010;
}
::-webkit-scrollbar-thumb{
    background-color:#6f6558;
    border:none;
}
html.darkmode ::-webkit-scrollbar-track{
    background-color:#282828;
}

局部细节

回到顶部图标修改

PHP 方式：主题页眉 (header.php) 457 行左右 fa fa-angle-up 改为 fa fa-arrow-up。

JavaScript 方式：页尾脚本添加以下内容。（推荐，一劳永逸）

<!--回顶图标修改--><script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>

说说页面标题修改

PHP 方式：修改说说页面模板 (shuoshuo.php) 12、19、20 行。

JavaScript 方式：页尾脚本添加以下代码。（推荐，一劳永逸）

<!--以下内容每次跳转新页面都执行，pjax额外处理--><script>
window.pjaxLoaded = function(){
    //说说标题替换为脑电波
    if($("#content > div.page-information-card-container > div > div").length > 0){
        var temp_str=document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g,"脑电波");
        document.querySelector("#content > div.page-information-card-container > div > div").innerHTML=temp_str;
        $("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
        $("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-lightbulb-o");
    }
}
window.pjaxLoaded();
</script>

公告栏名称修改

边栏 (sidebar.php) 第 6 行。

<div class="leftbar-announcement-title text-white">一言</div>

如果需要文本居中：style="text-align:center"

点击头像或作者名跳转到关于页

这里只介绍 JavaScript 方式，和前面类似，页尾脚本添加以下代码。

$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');

页脚文字增加版权、备案号

以下为 PHP 代码方式，也可以直接用主题自带的页脚 HTML。

主题页脚 (footer.php) 第 5 行改为：

<div><?php echo '© '.date('Y').' <a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a>';if(get_option('zh_cn_l10n_icp_num')) {echo ' · '.'<a href="http://beian.miit.gov.cn" rel="external nofollow"  target="_blank">'.get_option('zh_cn_l10n_icp_num').'</a>'.' · ';}?>Theme <a href="https://github.com/solstice23/argon-theme">Argon</a><?php if (get_option('argon_hide_footer_author') != 'true') {echo " By solstice23"; }?></div>

HTML+JavaScript 方式：

<p class="my-footer">© <a id="this-year"><a> <a href="/">鸦鸦的巢穴</a></p>
<p class="my-footer"><a href="http://beian.miit.gov.cn">浙ICP备20005259号</a></p>

<style>
#footer, .my-footer{
line-height: 0.8;
font-weight: normal;
}</style>

<script>
var my_data = new Date();
var my_year = document.getElementById("this-year");
my_year.innerHTML=my_data.getFullYear();
</script>

顶部导航栏毛玻璃效果

方法一：在不启用 jsdellvr 的 CDN 的前提下，修改 argontheme.js，大约 24 行。

方法二：依然启用 CDN，在页头或页尾脚本中重定义函数。因为 JavaScript 允许重复定义函数，后定义的同名函数覆盖之前的。（推荐）

主要用到 backdrop-filter:blur(10px); 属性。

/*根据滚动高度改变顶栏透明度*/
!function(){
    let toolbar = document.getElementById("navbar-main");
    let $bannerContainer = $("#banner_container");
    let $content = $("#content");

    let startTransitionHeight;
    let endTransitionHeight;

    startTransitionHeight = $bannerContainer.offset().top - 75;
    endTransitionHeight = $content.offset().top - 75;

    $(window).resize(function(){
        startTransitionHeight = $bannerContainer.offset().top - 75;
        endTransitionHeight = $content.offset().top - 75;
    });

    function changeToolbarTransparency(){
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < startTransitionHeight){
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
            toolbar.style.setProperty('box-shadow', 'none');
            toolbar.style.setProperty('-webkit-box-shadow', 'none');
            toolbar.style.setProperty('backdrop-filter', '');
            toolbar.style.setProperty('-webkit-backdrop-filter', '');
            toolbar.classList.add("navbar-ontop");
            return;
        }
        if (scrollTop > endTransitionHeight){
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0.6)', 'important');
            toolbar.style.setProperty('box-shadow', '0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117)');
            toolbar.style.setProperty('-webkit-box-shadow', '0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117)');
            toolbar.style.setProperty('backdrop-filter', 'blur(20px)');
            toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(20px)');
            toolbar.classList.remove("navbar-ontop");
            return;
        }
        let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * 0.85;
        toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
        toolbar.style.setProperty('box-shadow', '');
        toolbar.classList.remove("navbar-ontop");
    }
    changeToolbarTransparency();
    document.addEventListener("scroll", changeToolbarTransparency, {passive: true});
}();