WordPress 特效
|
前端,美化
|
295

2237 字
|
1.5 小时
本文最后更新于179 天前，其中的信息可能已经过时，如有错误请发送邮件到sherry.rain@qq.com

前言

如果你编辑了某主题的footer.php，最好将该主题设置为手动更新。不然自动更新会将以前的设置覆盖掉！切记，切记！

下文部分信息源自友链朋友：浮云翩迁之间、Echo’s blog

我的footer.php代码

Latest: 2023-04-15

这里备份一下现在我使用的footer.php以免主题更新导致代码丢失。建议将自定义的的特效代码另起一个文件封装，在footer.php引用。分开托管逻辑比较清晰。

修改代码的我建议使用vsode，看着比较清晰，也比较方便。如果本地没有什么好用的编辑器的话可以使用vim。

image-20230415193441096

代码

在</body>标签之前的代码，即common.php的内容。

<!--全页特效开始-->
<script src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script>
<script type="text/javascript">
    // 设备检测
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone()){
        if(!md.tablet()){
            // 雪花
            // $.getScript("https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");

            // 樱花
            // $.getScript("https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");

            // 小烟花特效
            // $.getScript("https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");

            // 大烟花特效
            // $.getScript("https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js");
            // document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')

            // 鼠标移动的仙女棒特效。
            // $.getScript("https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");

        }   
    }
</script>
<!--全页特效结束-->

<!--鼠标名单开始-->
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
    $("body").click(function(e) {
    //        var a = new Array("❤腿堡-苯苯❤","❤ALSO STARRING-榕榕❤","❤腿堡-亚伯❤","❤腿堡-银露❤","❤腿堡-枫叶❤","❤腿堡-培根❤","❤腿堡-老丘❤","❤腿堡-倩倩❤","❤腿堡-小o❤","❤腿堡-蛇蛇❤","❤腿堡-培根❤","❤腿堡-十九❤","❤腿堡-萝卜卜❤","❤腿堡-千泓❤","❤腿堡-萌波❤","❤腿堡-经历❤","❤letter-韩露❤","❤腿堡-记忆❤","❤叛徒-绝恋❤","❤腿堡-小离❤","❤腿堡-七秒❤","❤腿堡/剑花-U哥❤","❤大佬-幕哥❤","❤退谷-糕糕❤","❤退谷-肥鸡❤","❤退谷-气气❤","❤退谷-小幻❤","❤退谷-狂总❤","❤剑花-君故-会刷buff❤","❤剑花-肥少❤","❤剑花-太阳❤","❤剑花-我腿❤","❤剑花-笙哥❤","❤剑花-零点夫妇❤","❤还有很多小伙伴记不太清了❤");     
        // var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        // var a = new Array("❤为汝祈福❤", "❤早日康复❤");
        var a = new Array("❤身体健康❤", "❤万事如意❤", "❤心想事成❤", "❤笑口常开❤", "❤年年有余❤", "❤金榜题名❤", "❤前程似锦❤", "❤一帆风顺❤");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            // "z-index": -1,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
    });
</script>
<!--鼠标名单结束-->
<!--鼠标指针外观 开始-->
<style type="text/css">
.main-content img,body{cursor:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}
</style>
<!--鼠标指针外观 结束-->

<!--看板娘-->
<!-- <script src="https://fastly.jsdelivr.net/gh/huangwb8/live2d_bensz@latest/front/autoload.js"></script> -->

<script type="text/javascript">
//代码收集自网络
        window.onload = function(){
            //屏蔽键盘事件
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            //屏蔽鼠标右键
            document.oncontextmenu = function (){
                return false;
            }
        }

    </script>

<!-- 屏蔽F12 开始 -->
<script type="text/javascript">
//代码收集自网络
        window.onload = function(){
            //屏蔽键盘事件
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            //屏蔽鼠标右键
            document.oncontextmenu = function (){
                return false;
            }
        }

    </script>
<!-- 屏蔽F12 结束 -->

<!--鼠标悬停3D效果start-->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<script type="text/javascript" src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/vanilla3D/vanilla-tilt.js"></script>
<!--3.动作-->
<script type="text/javascript">
    // 设备检测。依赖前述mobile-detect项目。
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone() && !md.tablet()){
        window.pjaxLoaded = function(){
            // 正文卡片
            VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })

            // 说说卡片
            VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
        }
        $(window.pjaxLoaded);
        $(document).on('pjax:end', window.pjaxLoaded); 
    }
</script>
<!--鼠标悬停3D效果end-->

耗时、占用内存

编辑footer.php文件，在</footer>之前插入以下代码。

<!--耗时及占用内存开始-->
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->

添加代码之后，保存文件。看下实际效果：

image-20230415194036000

这里还有一些其他效果的文字、备案号，这块会在后面说明。

卡片3D特效

来自中秋明月的个人博客。源项目地址：vanilla-tilt.js

卡片的3D特效可以试一下本博客的3D特效，将鼠标悬浮在文章卡片上。

基本原理大概是定义一个函数，它有多个参数可以调整某个对象的位置、角度等属性，然后通过JS调用。在Argon主题中，所有的卡片都来自.card类。所以，如果你使用VanillaTilt.init(document.querySelectorAll(".card")，那么所有的卡片都会动起来。不过，我只需要让文章卡片article.post:not(.post-full)和说说卡片.shuoshuo-preview-container动起来，所以仅定义了这两个对象的运作。您也可以自定义其它对象，这个就不展开说明了。

具体脚本我已经搬过来了：

<!--鼠标悬停3D效果start-->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<script type="text/javascript" src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/vanilla3D/vanilla-tilt.js"></script>
<!--3.动作-->
<script type="text/javascript">
    // 设备检测。依赖前述mobile-detect项目。
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone() && !md.tablet()){
        window.pjaxLoaded = function(){
            // 正文卡片
            VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })

            // 说说卡片
            VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
        }
        $(window.pjaxLoaded);
        $(document).on('pjax:end', window.pjaxLoaded); 
    }
</script>
<!--鼠标悬停3D效果end-->

对于Argon主题的使用者，这样就可以了！在Argon主题中，window.pjaxLoaded函数内的命令会避免使用Pjax并在切换页面时强制刷新，这个必须要用才可以保证特效的完美运行。如果是其它主题的话，你改一下控制对象的名字即可，具体情况具体分析。你也可以自己改动一下参数，看看效果如何。蛮有趣的一个特效！

鼠标文字特效

在末尾</body>上方加入。a变量中的文字可以自定义！你可以改成自己喜欢的文字。

<!--鼠标特效开始-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
   $("body").click(function(e) {
       var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
       var $i = $("<span/>").text(a[a_idx]);
       a_idx = (a_idx + 1) % a.length;
       var x = e.pageX,
       y = e.pageY;
       $i.css({
           "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
           "top": y - 20,
           "left": x,
           "position": "absolute",
           "font-weight": "bold",
           "color": "#ff6651"
       });
       $("body").append($i);
       $i.animate({
           "top": y - 180,
           "opacity": 0
       },
       1500,
       function() {
           $i.remove();
       });
   });
});
</script>
<!--鼠标特效结束-->

鼠标指针外观

<!--鼠标指针外观 开始-->
<style type="text/css">
.main-content img,body{cursor:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}
</style>
<!--鼠标指针外观 结束-->

看板娘

本博客的看板娘默认不常规营业！

看板娘看上去很炫，但其实只有一段简单的代码。也是加在</body>之前，类似于：

<!--看板娘-->
<script src="https://fastly.jsdelivr.net/gh/huangwb8/live2d_bensz@latest/front/autoload.js"></script>

字体

字体可以在字体天下、100font等网站里免费下载。通过转换网站获得woff2格式文件。你可以上传到网站根目录或者某个CDN里，然后添加下列额外CSS（具体方法见下）：

/*设置网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体*/
@font-face{
    font-family:btfFont;
    src:
    url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

这里展示所用的13.woff2是汉唐仪美人体，它并不是免费商用字体。个人博客毕竟是公开的，最好还是使用免费商用字体，以免未来有版权纠纷。

额外CSS

额外CSS一般用于增加一些自定义样式，比较改大某些字体的属性（大小、颜色）。这里修改的好处就是主题切换、升级时，该设置也不会丢失。

如果你想自定义CSS，最好通过Chrome/Edge浏览器+F12键探索一下。下面的内容部分参考了鸦鸦的Argon 主题修改记录，我还进行了一些增删。有这些CSS加持，整个主题视觉效果好得多！

我们可以从后台左侧栏的外观——自定义，找到额外CSS：

image-20230415195134081

/*=========字体设置============*/

/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:btfFont;
    src:
    url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

/*横幅字体大小*/
.banner-title {
  font-size: 2.5em;
}
.banner-subtitle{
  font-size: 20px;
}

/*文章标题字体大小*/
.post-title {
    font-size: 30px
}

/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;
}

/*评论区字体大小*/
p {
    font-size: 1.2rem
}

/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}

/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}
/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}

/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}

/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}

/*========颜色设置===========*/

/*文章或页面的正文颜色*/
body{
    color:#364863
}

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}

/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

/*左侧菜单栏突出颜色修改*/
.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;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*========透明设置===========*/

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

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    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);
}

/*夜间透明*/
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;
}

/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/

/*========排版设置===========*/

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

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

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.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:0;}
/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}
/*正文表格样式修改*/
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;}

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

/*顶栏菜单*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/
.navbar-nav .nav-link {
    font-size: 1.2rem;
    font-family: 'btfFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1.2rem;
}
.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;
}

/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 0rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 24px;
}

/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

font awesome v6

Beta版本。未正式投入使用。

v6有一些特别的图标。在footer.php里添加以下css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/fontawesome.min.css">

在这里搜索图标：https://fontawesome.com/search。与v4版本相比有很多新的图标。

悼念色

遇到国家重要人物逝世、抗战纪念日等重大时点，为了表示悲悼，很多网站会选择全黑白的配色。只需要在额外CSS的最底部（否则容易和其它CSS代码冲突）添加下列代码即可：

/*网站黑白色（悼念）*/
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

网站底部信息

CSS (样式表)

<style>
    /* 核心样式 */
    .github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 13.1px;
    color: #fff;
    line-height: 15px;
    margin-bottom: 5px;
    font-family: "Open Sans", sans-serif;
    }
    .github-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-family: "Open Sans", sans-serif;
    }
    .github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-family: "Open Sans", sans-serif;
    }
    .github-badge-big {
    display: inline-block;
    border-radius: 6px;
    text-shadow: none;
    font-size: 14.1px;
    color: #fff;
    line-height: 18px;
    margin-bottom: 7px;
    }
    .github-badge-big .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }
    .github-badge-big .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    }
    .bg-orange {
    background-color: #ec8a64 !important;
    }
    .bg-red {
    background-color: #cb7574 !important;
    }
    .bg-apricots {
    background-color: #f7c280 !important;
    }
    .bg-casein {
    background-color: #dfe291 !important;
    }
    .bg-shallots {
    background-color: #97c3c6 !important;
    }
    .bg-ogling {
    background-color: #95c7e0 !important;
    }
    .bg-haze {
    background-color: #9aaec7 !important;
    }
    .bg-mountain-terrier {
    background-color: #99a5cd !important;
    }

    </style>

    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
        <i></i>
        <span class="badge-value bg-orange">
            <a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes"> 湘ICP备2022026088号-1</a>
            |
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode= 32072202010255" target="_blank"
                one-link-mark="yes">湘公网安备 43010302001716号</a></span>
    </div>

    <div class="github-badge-big">
            <!-- 七牛云图标 -->
            <span class="badge-subject"><img src="https://qiniu.staticfile.org/favicon.ico?v=2" height="20" width="20" /> CDN</span>
            <span class="badge-value bg-shallots">
                <a href="" target="_blank" one-link-mark="yes"></a>
                <!-- 七牛云链接 -->
                <a href="https://portal.qiniu.com/" target="_blank"
                    one-link-mark="yes">Qiniuyun</a>
            </span>

            <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
            <span class="badge-value bg-green">
                <!-- wordpress链接 -->
                <a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
                    WordPress</a></span>
        </div>

    <div class="github-badge-big">
        <span class="badge-subject"> Copyright</span>
        <i></i>
        <span class="badge-value bg-red"> 2022-2022
            <i class="fa fa-copyright"></i><a href="https://www.sry0.top/">Sry0</a></span>
        </script>
    </div>
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span>
        <i></i>
        <span
            class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
            days
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>
            S</span>
        <script no-pjax="">
            var blog_running_days = document.getElementById("blog_running_days");
            var blog_running_hours = document.getElementById("blog_running_hours");
            var blog_running_mins = document.getElementById("blog_running_mins");
            var blog_running_secs = document.getElementById("blog_running_secs");
            function refresh_blog_running_time() {
                var time = new Date() - new Date(2022, 11, 11, 0, 0, 0);
                var d = parseInt(time / 24 / 60 / 60 / 1000);
                var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
                var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
                var s = parseInt((time % (60 * 1000)) / 1000);
                blog_running_days.innerHTML = d;
                blog_running_hours.innerHTML = h;
                blog_running_mins.innerHTML = m;
                blog_running_secs.innerHTML = s;
            }
            refresh_blog_running_time();
            if (typeof bottomTimeIntervalHasSet == "undefined") {
                var bottomTimeIntervalHasSet = true;
                setInterval(function () {
                    refresh_blog_running_time();
                }, 500);
            }
        </script>
    </div>

HTML (底部信息)

<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span><span class="badge-value bg-orange">
        <a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">湘ICP备2022026088号-1</a>
        |
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode= 32072202010255" target="_blank"
            one-link-mark="yes">湘公网安备 43010302001716号</a></span>
</div>

<div class="github-badge-big">
    <!-- 七牛云图标 -->
    <span class="badge-subject"><img src="https://qiniu.staticfile.org/favicon.ico" height="20" width="20" /></i>
        CDN</span>
    <span class="badge-value bg-shallots">
        <a href="" target="_blank" one-link-mark="yes"></a>
        <!-- 七牛云链接 -->
        <a href="https://portal.qiniu.com/" target="_blank" one-link-mark="yes">Qiniuyun</a>
    </span>

    <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
    <span class="badge-value bg-green">
        <!-- wordpress链接 -->
        <a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
            WordPress</a></span>
</div>

<div class="github-badge-big">
    <span class="badge-subject">Copyright </span><span class="badge-value bg-red">
        2022-2022
        <i class="fa fa-copyright"></i> Sry0</span>
    </script>
</div>
<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span><span
        class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
        days
        <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
        <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
        <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>
        S</span>

JavaScript（网站运行时间脚本）

注意：new Date (year, month, date, hrs, min, sec) 按给定的参数创建 日期对象

其中 month 的值域为 0～11，0 代表 1 月，11 表代表 12 月；所以你输入的月份需要为自己真正月份的前一个月

<script no-pjax="">
        var blog_running_days = document.getElementById("blog_running_days");
        var blog_running_hours = document.getElementById("blog_running_hours");
        var blog_running_mins = document.getElementById("blog_running_mins");
        var blog_running_secs = document.getElementById("blog_running_secs");
        function refresh_blog_running_time() {
            var time = new Date() - new Date(2022, 11, 11, 0, 0, 0);
            var d = parseInt(time / 24 / 60 / 60 / 1000);
            var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
            var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
            var s = parseInt((time % (60 * 1000)) / 1000);
            blog_running_days.innerHTML = d;
            blog_running_hours.innerHTML = h;
            blog_running_mins.innerHTML = m;
            blog_running_secs.innerHTML = s;
        }
        refresh_blog_running_time();
        if (typeof bottomTimeIntervalHasSet == "undefined") {
            var bottomTimeIntervalHasSet = true;
            setInterval(function () {
                refresh_blog_running_time();
            }, 500);
        }
    </script>
</div>

博客透明 (根据主题自动)

添加到 页尾脚本 里，根据主题色自动透明，透明度可以在 op1、op2、op3….. 那里设置

<script>
  function hexToRgb(hex,op){
    let str = hex.slice(1);
    let arr;
    if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
    else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
    return  `rgb(${arr.join(', ')}, ${op})`;
};

  let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
  let op1 = 0.6
  let themeColorRgb = hexToRgb(themeColorHex,op1);
  let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')*
  document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)

  let op2 = 0.8
  // 方法一：
  let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
  colorTint92 += ', '+op2;
  document.documentElement.style.setProperty('--color-tint-92',colorTint92)
  // 方法二：（无效）
  // let colorForegroundHex = getComputedStyle(document.documentElement).getPropertyValue('--color-foreground').trim();
  // let colorForeground = hexToRgb(colorForegroundHex,op2)
  // 无效的原因是博客里的--color-fpreground是局部变量，不是:root里的全局变量，所以最好的办法是修改--color-tint-92，这个是全局的
  // document.documentElement.style.setPrope。rty('--color-fpreground',colorForeground)
   // 不要用下面这种cssText这种写法，会导致上面--themecolor-gradient的样式修改失效！
   // document.documentElement.style.cssText = '--color-tint-92:'+colorTint92

  let op3 = 0.65
  let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
  colorShade90 += ', ' + op3;
  document.documentElement.style.setProperty('--color-shade-90',colorShade90)

  let op4 = 0.8
  let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
  colorShade86 += ', ' + op4;
  document.documentElement.style.setProperty('--color-shade-86',colorShade86)
</script>

来自：北冥红烧鱼 (hongshaoyv.com)

小结

每个人对自己网站的需求效果都不一样，自己可以多借鉴一些其他博主的文章，无非就是粘贴一些js/css在footer.php/额外CSS里。

下次见！

作者：Sry0
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0协议。转载请注明文章地址及作者
Tools前端美化
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
															
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
centos7 利用crontab执行定时计划任务

							
							

							
Windows 查看端口占用问题

							
							

							
一键麦克风降噪和音量增强，Equalizer APO搭配实施降噪VST插件

							
							

							
基于Spring AOP实现自定义注解记录接口日志

							
							

							
vscode & windows terminal实现远程服务器免密登录