WordPress · 我对Argon主题的修改

概述

我的博客会有一些特效!其实没有什么用途,主要是好看(~ ̄▽ ̄)~

关于主题的自定义,主要分为两个方面,修改样式和添加效果。在修改之前,建议关闭主题的自动更新,以免更新之后覆盖掉你对主题源文件的修改。

关闭Argon主题更新:“Argon主题选项 – 杂项 – 检查更新源”,调整为暂停更新。

自定义内容

页脚网站运行计时

在“外观 – 主题文件编辑器”里编辑footer.php,在</footer>之前添加以下内容:

<!--耗时及占用内存开始-->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2022-04-28");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->

另一方式(包含备案标识)

在“Argon主题选项 – 脚本 – 页头/页尾脚本”里添加以下内容:

JS里month的值域为0~11,所以输入月份需要为真正月份的前一个月

<!--备案及运行计时开始-->
<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">XICP备1234567890号</a>|
            <a href="https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank"
                one-link-mark="yes">
                X公网安备 00000000000000号</a>
        </span>
</div>

<div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i> CDN</span>
        <span class="badge-value bg-shallots">
            <!-- 又拍云链接 -->
            <a href="https://www.upyun.com/" target="_blank" one-link-mark="yes">Upyun</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"><i class="fa fa-copyright" aria-hidden="true">
</i>Copyright </span>
        <span class="badge-value bg-red">2024-2024</i>
            <a href="https://www.example.com/" target="_blank" one-link-mark="yes">@ Echo
        </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>
</div>

<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>

<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(2023, 12, 1, 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>
<!--结束-->

文字抖动特效

编辑footer.php,添加以下内容:

<!--文字抖动特效开始-->
<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/myface.css" rel="stylesheet">
<!--结束-->

然后在“Argon主题选项 – 页脚 – 页脚内容”里添加以下内容:

<div class=""><span class="my-face">Copyright ©2024 版权所有 Underline୧(๑•̀⌄•́๑)૭</span></div>

年度倒计时显示

在“外观 – 小工具”里选择左侧栏小工具进行添加,选择”简码“并添加以下内容:

<div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext"></span>
<span id="yearprogress_progresstext_full"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
</div>
<script no-pjax="">
function yearprogress_refresh() {
let year = new Date().getFullYear();
$("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let now = new Date();
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {
yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span {
transform: translateY(-45px);
}
</style>

另一方式(非工具)

  • 下载progress-wrapper.php。地址:Alist&Github
  • progress-wrapper.php保存在WordPress目录下。比如./specialEffects/progress-wrapper.php
  • 编辑sidebar.php:在<div id="leftbar_part2" class="widget widget_search card bg-white shadow-sm border-0">标签前引用命令:<?php require('./specialEffects/progress-wrapper.php'); ?>,其中./specialEffects/progress-wrapper.php请根据实际情况修改。

百分比有2种模式,一种是yearprogress_progresstext,另一种是yearprogress_progresstext_fullfull会返回一个更加精确的数字。

此时存在卡片重叠现象,按照以下方法修改:

给时间进度条添加leftbar_part1的标签,然后将sidebar.php中原来的left_part1对应的ID标签删除。

注意:会导致移动端的菜单栏不能自动隐藏。

时钟插件

HTML代码(右键另存为)

添加小工具,选择”自定义HTML代码“。可以定义<iframe src=”clock.html” height=”200″>设置高度。

一些好看的特效~

在页尾脚本里添加以下内容,或编辑footer.php,在</body>之前添加以下内容:

网站标题字符

注意:影响历史记录里网站标题显示

<!--网站标题字符开始-->
<script>
$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/onfocus.js");
</script>
<!--结束-->

指针移动仙女棒/雪花/樱花/大小烟花特效

自行取消对应特效注释//

<!--全页特效开始-->
<script src="https://cdn.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://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");
            // 樱花
$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");
            // 小烟花特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");

            // 大烟花特效
            // $.getScript("https://cdn.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://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");

            // 鼠标移动的泡泡特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/joe/censor10.js");
        }   
    }
</script>
<!--结束-->
泡泡特效Argon主题色自适应
//获取argon的主题色
const themeColorRgbStr = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-rgbstr');

//将其与 0.1 组合成一个 RGBA 颜色字符串
const rgbaColor = `rgba(${themeColorRgbStr}, 0.1)`;
const rgbaColor2 = `rgba(${themeColorRgbStr}, 0.9)`;
另一方式
<!--指针移动特效开始-->
<script type="text/javascript">
var system ={}; 
var p = navigator.platform; 
system.win = p.indexOf("Win") == 0; 
system.mac = p.indexOf("Mac") == 0; 
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
if(system.win||system.mac||system.xll){
$.getScript("https://cdn.jsdelivr.net/gh/ivampiresp/special-JavaScript/yinghua.js");
}
</script>
<!--结束-->

指针移动影相随

注意:影响选中文字复制粘贴

<!--指针特效开始-->
<style type="text/css">
#cursor{position:fixed;width:16px;height:16px;background:#009688;border-radius:8px;opacity:0.25;z-index:10086;pointer-events:none;transition:0.2s ease-in-out;transition-property:background,opacity,transform}
#cursor.hidden{opacity:0}
#cursor.hover{opacity:0.1;transform:scale(2.5)}
#cursor.active{opacity:0.5;transform:scale(0.5)}
#clickME{cursor:pointer;display:inline-block;border:1px solid #009688}
</style>
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/cursor_01.js"></script>
<!--结束-->

修改指针外观

<!--指针外观开始-->
<style type="text/css">
.main-content img,body{cursor:url(https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}
</style>
<!--结束-->

指针点击文字特效

注意:可能影响双击选中单词

<!--点击文字开始-->
<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>
<!--结束-->

文字输入撒花特效

<!--输入撒花开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>
<!--结束-->

春节灯笼挂件

<!--春节灯笼挂件开始-->
<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/deng.css" rel="stylesheet">
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">快乐</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!--结束-->
另一方式

可添加在之前的指针移动特效中,进行设备判断。

// 春节灯笼
document.write('<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/deng.css" rel="stylesheet">');
document.write('<div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春节</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div>');
document.write('<div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div>');
左右两端各两个灯笼
<style>
    .ct2 .mn {width:770px;}.ct2 .sd {width:218px;}
</style>
<div id="wp" class="wp">
    <div class="xnkl">
        <div class="deng-box2">
            <div class="deng">
                <div class="xian">
                </div>
                <div class="deng-a">
                    <div class="deng-b">
                        <div class="deng-t">
                            度
                        </div>
                    </div>
                </div>
                <div class="shui shui-a">
                    <div class="shui-c">
                    </div>
                    <div class="shui-b">
                    </div>
                </div>
            </div>
        </div>
        <div class="deng-box3">
            <div class="deng">
                <div class="xian">
                </div>
                <div class="deng-a">
                    <div class="deng-b">
                        <div class="deng-t">
                            欢
                        </div>
                    </div>
                </div>
                <div class="shui shui-a">
                    <div class="shui-c">
                    </div>
                    <div class="shui-b">
                    </div>
                </div>
            </div>
        </div>
        <div class="deng-box1">
            <div class="deng">
                <div class="xian">
                </div>
                <div class="deng-a">
                    <div class="deng-b">
                        <div class="deng-t">
                            春
                        </div>
                    </div>
                </div>
                <div class="shui shui-a">
                    <div class="shui-c">
                    </div>
                    <div class="shui-b">
                    </div>
                </div>
            </div>
        </div>
        <div class="deng-box">
            <div class="deng">
                <div class="xian">
                </div>
                <div class="deng-a">
                    <div class="deng-b">
                        <div class="deng-t">
                            新
                        </div>
                    </div>
                </div>
                <div class="shui shui-a">
                    <div class="shui-c">
                    </div>
                    <div class="shui-b">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        @media screen and (max-width: 768px) {.xnkl{display:none; }}.deng-box
        { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events:
        none;}.deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999;
        pointer-events: none}.deng-box2 { position: fixed; top: -40px; left: 150px;
        z-index: 9999; pointer-events: none}.deng-box3 { position: fixed; top:
        -30px; left: 10px; z-index: 9999; pointer-events: none}.deng-box1 .deng,.deng-box3
        .deng { position: relative; width: 120px; height: 90px; margin: 50px; background:
        #d8000f; background: rgba(216,0,15,.8); border-radius: 50% 50%; -webkit-transform-origin:
        50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow:
        -5px 5px 30px 4px #fc903d}.deng { position: relative; width: 120px; height:
        90px; margin: 50px; background: #d8000f; background: rgba(216,0,15,.8);
        border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation:
        swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00}.deng-a
        { width: 100px; height: 90px; background: #d8000f; background: rgba(216,0,15,.1);
        margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03}.deng-b
        { width: 45px; height: 90px; background: #d8000f; background: rgba(216,0,15,.1);
        margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03}.xian
        { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px;
        background: #dc8f03}.shui-a { position: relative; width: 5px; height: 20px;
        margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45px; background: orange; border-radius:
        0 0 5px 5px}.shui-b { position: absolute; top: 14px; left: -2px; width:
        10px; height: 10px; background: #dc8f03; border-radius: 50%}.shui-c { position:
        absolute; top: 18px; left: -2px; width: 10px; height: 35px; background:
        orange; border-radius: 0 0 0 5px}.deng:before { position: absolute; top:
        -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block;
        z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background:
        orange; background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng:after
        { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px;
        content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px
        5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to
        right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng-t { font-family: 黑体,Arial,Lucida
        Grande,Tahoma,sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight:
        700; line-height: 85px; text-align: center}.night .deng-box,.night .deng-box1,.night
        .deng-t { background: 0 0!important}@-moz-keyframes swing { 0% { -moz-transform:
        rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform:
        rotate(-10deg) }}@-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg)
        } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg)
        }}
    </style>

卡片3D特效

在Argon主题中,所有的卡片都来自.card类。所以,如果你使用VanillaTilt.init(document.querySelectorAll(".card"),那么所有的卡片都会动起来。这里仅定义了文章卡片article.post:not(.post-full)和说说卡片.shuoshuo-preview-container这两个,您也可以自定义其它对象。

卡片3D效果的两个选择器可以合并起来写,用逗号分隔:document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container")。感兴趣的小伙伴自己试试看。

<!--鼠标悬停3D效果开始-->
<!--1.定义对象属性(似乎没生效)-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<!--script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script--> <!--如果你没有引用过mobile-detect.js,请去除这里的注释以使其生效-->
<script type="text/javascript" src="https://cdn.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>
<!--结束-->

Argon点击概要进入文章

根据自己相对应文章列表卡片布局,编辑不同的preview.php,在class="post-content"后面添加:

注意:该代码将破坏Pjax的效果。如果开启了Pjax,最好不要使用,否则点击预览内容后会强制刷新。

onclick="window.location.href='<?php the_permalink(); ?>'" style="cursor: pointer"

Aplayer音乐播放器

编辑footer.php,在</body>之前添加以下内容:

官网 Github,其中<meting-js>内的详细参数可以参阅文档

<!--播放器开始-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<meting-js 
    server="netease" 
    type="playlist" 
    id="0000000000"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="true">
</meting-js>
<!--结束-->

在移动端/较窄窗口自动隐藏

进入“外观 – 自定义 – 额外CSS”,在左侧添加以下内容:

/*在移动端/较窄窗口自动隐藏*/
@media only screen and (max-width: 900px) {
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0px !important;
}
}

虚拟人物看板娘

Github

在页头/页尾脚本里添加以下内容,或编辑footer.php,在</body>之前添加以下内容,即可使用最基本的功能,添加代码的位置取决于你网站的构建方式:

<!--看板娘开始--><script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script><!--结束-->

如果网站启用了 PJAX,需要注意脚本将 PJAX 刷新区域排除。

但是!我们强烈建议自己进行配置,让看板娘更适合您的网站!其中jsonpath可按自己爱好更改链接。

<!--看板娘开始-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 75,
            "height": 150,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

   /* 小帅哥: https://unpkg.com/[email protected]/assets/chitose.model.json
      萌娘:https://unpkg.com/[email protected]/assets/shizuku.model.json
      白猫:https://unpkg.com/[email protected]/assets/tororo.model.json
      黑猫: https://unpkg.com/[email protected]/assets/hijiki.model.json
      小可爱(女):https://unpkg.com/[email protected]/assets/koharu.model.json
      小可爱(男):https://unpkg.com/[email protected]/assets/haruto.model.json
      初音:https://unpkg.com/[email protected]/assets/miku.model.json
      圣职者妹妹:https://unpkg.com/[email protected]/assets/z16.model.json
      茶杯犬:https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json
      绿毛妹妹:https://unpkg.com/[email protected]/assets/tsumiki.model.json
      金龟子妹妹:https://unpkg.com/[email protected]/assets/unitychan.model.json
      https://unpkg.com/[email protected]/assets/nito.model.json
      https://unpkg.com/[email protected]/assets/ni-j.model.json
      小阿狸: https://unpkg.com/[email protected]/assets/nico.model.json
      https://unpkg.com/[email protected]/assets/nietzche.model.json
      https://unpkg.com/[email protected]/assets/nipsilon.model.json
      女学生: https://unpkg.com/[email protected]/assets/hibiki.model.json */
<!--结束-->

视频背景

<!--视频背景开始-->
<video
src="https://xiaojingtonxue.com/images.mcxing.cn/video/index.mp4" /*日间*/
class="bg-video bg-video-day"
autoplay=""
loop="loop"
muted=""
></video>
<video
src="https://xiaojingtonxue.com/images.mcxing.cn/video/index1.mp4" /*夜间*/
class="bg-video bg-video-night"
autoplay=""
loop="loop"
muted=""
></video>
<style>
video.bg-video {
position: fixed;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
pointer-events: none;
}
html.darkmode video.bg-video.bg-video-day {
opacity: 0;
}
html.darkmode video.bg-video.bg-video-night {
opacity: 1;
}
video.bg-video.bg-video-day {
opacity: 1;
}
video.bg-video.bg-video-night {
opacity: 0;
}
#banner,
#banner .shape {
background: transparent !important;
}
* {
font-family: "Comfortaa", "Open Sans", -apple-system, system-ui,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
}
</style>
<script
src="https://api.gcxstudio.cn/odometer/odometer.min.js"
integrity="sha256-65R1G5irU1VT+k8L4coqgd3saSvO/Wufson/w+v2Idw="
crossorigin="anonymous"
></script>
<!--结束-->

滚动模糊

在页头脚本里添加以下内容,或编辑footer.php

<!--滚动模糊开始-->
<script>
window.addEventListener("scroll", function (e) {
  if (window.scrollY > window.innerHeight * 0.3) {
    document.querySelector("#content").classList.add("scrolled");
  } else {
    document.querySelector("#content").classList.remove("scrolled");
  }
});
</script>
<style>
#content.scrolled::before {
  filter: blur(13px);
  transform: scale(1.02);
}
#content::before {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}
</style>
<!--结束-->

彩色标签云

编辑functions.php,添加以下内容:

颜色代码可自行修改

//圆角背景色标签
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$colors = array('F99','C9C','F96','6CC','6C9','37A7FF','B0D686','E6CC6E');
$color=$colors[dechex(rand(0,7))];
$pattern = '/style=('|")(.*)('|")/i';
$text = preg_replace($pattern, "style="display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;"", $text);
$pattern = '/style=('|")(.*)('|")/i';
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

点击左侧栏头像/名称跳转指定页面

编辑sidebar.php,点击头像跳转在第 126 行左右:

添加<a>标签,即<a href="https://www.example.com/">,其中链接改为想要跳转的地方:

<div class="tab-pane fade text-center<?php if ($nowActiveTab == 1) { echo ' active show'; }?>" id="leftbar_tab_overview" role="tabpanel" aria-labelledby="leftbar_tab_overview_btn">
<a href="https://www.example.com/"><div id="leftbar_overview_author_image" style="background-image:
<a/>

点击姓名跳转在 130 行左右:

<a href="https://www.example.com/"><h6 id="leftbar_overview_author_name"><?php echo get_option('argon_sidebar_auther_name') == '' ? bloginfo('name') : get_option('argon_sidebar_auther_name'); ?> </h6>
<a/>

评论头像显示

编辑functions.php,添加以下内容:

if ( ! function_exists( 'get_cravatar_url' ) ) {
    /**
    *  把Gravatar头像服务替换为Cravatar
    * @param string $url
    * @return string
    */
    function get_cravatar_url( $url ) {
        $sources = array(
            'www.gravatar.com',
            '0.gravatar.com',
            '1.gravatar.com',
            '2.gravatar.com',
            'secure.gravatar.com',
            'cn.gravatar.com'
        );
        return str_replace( $sources, 'cravatar.cn', $url );
    }
    add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
    add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
    add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
}

Banner动态箭头

编辑header.php,在第 439 行找到:

<div class="cover-scroll-down">

将这个 div 代码块中的内容(也就是原本的 <i> 标签 )用下面的代码替换:

<i class="fa fa-angle-down" aria-hidden="true" id="pointer1"></i>
<i class="fa fa-angle-down" aria-hidden="true" id="pointer2"></i>
<i class="fa fa-angle-down" aria-hidden="true" id="pointer3"></i>

然后添加额外CSS:

/*Banner动态箭头*/
@keyframes up-down-move {
0% {
opacity:0;
transform:translate(-50%,-150px); 
}
50% {
opacity:1;
transform:translate(-50%,-130px); 
}
100% {
opacity:0;
transform:translate(-50%,-110px); 
}
}
.cover-scroll-down .fa-angle-down{
font-size: 3rem;
text-shadow: 0px 0px 8px #dc1111;
position:absolute;
transform: translate(-50%,-80px);
opacity:0;
}
.cover-scroll-down #pointer1{
animation: up-down-move 3s linear infinite;
}
.cover-scroll-down #pointer2{
animation: up-down-move 3s 1s linear infinite;
}
.cover-scroll-down #pointer3{
animation: up-down-move 3s 2s linear infinite;
}

CSS修改

额外CSS一般用于增加一些自定义样式,改动某处字体的属性。如果你想自定义CSS,最好通过F12探索一下。

进入“外观 – 自定义 – 额外CSS”,在左侧自定义以下内容,可以即时预览:

网站黑白色(悼念)

遇到国家重要人物逝世、抗战纪念日等重大时点,为了表示悲悼,很多网站会选择全黑白的配色。此效果适用于任何WordPress主题。

注意:需要添加在最底部,否则容易和其它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);
}

字体

从网络上下载你喜欢的字体文件,然后前往TTF to WOFF2 Converter将其转换为WOFF2格式。

这里所用的13.woff2汉唐仪美人体,它不是免费商用字体。个人博客最好还是使用免费商用字体,以免有版权纠纷。

之后,把它放入你的网站目录或CDN目录下,并在额外CSS里添加以下内容:

/*设置网站字体*/
@font-face{
    font-family:btfFont;
    src: url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

导航栏

顶栏菜单
/*顶栏菜单*/
.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;
}
子菜单对齐及样式调整
/*子菜单对齐及样式调整*/
.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;
}
顶栏图标
/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 0rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
/*左上角图片大小*/
.navbar-brand img { 
    height: 24px;
}

Banner

标题彩虹效果
/*标题彩虹效果*/
@keyframes ColdLight {
0%{
background-position: 0%;
}
100%{
background-position: 200%;
}
}
.banner-title{
position: absolute;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size:200%;
animation: ColdLight 3s linear infinite;
color:transparent !important;
-webkit-background-clip: text;
}
.banner-title::before {
content: '';
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
transform:translatex(-50%);
max-width:500px;
z-index: -100;
background:white;
filter: blur(30px);
opacity: 0.5;
}
.banner-title .banner-title-inner{
position:relative;
background:inherit;
}
.banner-title .banner-subtitle{
position:relative;
background:inherit;
}
副标题彩虹效果
/*副标题彩虹效果*/
.banner-subtitle{
font-size: 20px;
-webkit-text-fill-color: transparent;
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);
-webkit-background-clip: text;
}
标题白云效果
/*白云效果*/
.banner-title::before {
content: '';
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
transform:translatex(-50%);
max-width:500px;
z-index: -100;
background:white;
filter: blur(30px);
opacity: 0.5;
}
标题加粗
/*标题加粗*/
.banner-title .banner-title-inner{
font-size: 35px;
    position:relative;
background:inherit;
}
.banner-title{
position: absolute;
background: #5E72E4;
background-size:200%;
animation: ColdLight 3s linear infinite;
color:transparent !important;
-webkit-background-clip: text;
font-weight: bold;
}
.banner-subtitle{
  font-size: 20px;
}

左侧栏

居中
/*左侧栏公告居中*/
.leftbar-announcement-title {
    font-size: 20px;
/*  text-align: center; */
    color: #00FFFF
}
.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.8;
/*  text-align: center; */
    color:#00FFFF;
}
/*左侧栏一言居中*/
.leftbar-banner-title {
    font-size: 20px;
    display: block;
    text-align: center;
    opacity: 0.8;
}
/*左侧栏个性签名居中*/
.leftbar-banner-subtitle {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.8;
    display: block;
    text-align: center;
}
边距
/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
层级置于上层
/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}
搜索框颜色
/*左侧栏搜索框颜色*/
button#leftbar_search_container {
    background-color: transparent;
}
目录
/*左侧栏目录位置偏移*/
#leftbar_catalog{
    margin-left: 0px;
}
/*左侧栏目录条目边距*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}
菜单栏突出颜色
/*左侧菜单栏突出颜色*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}
作者名称简介、标题链接
/*左侧栏作者名称*/
#leftbar_overview_author_name {
margin-top: 15px;
font-size: 18px;align-content;
color:#FFA500;
/* color:#FA92B5; */
}
/*简介*/
#leftbar_overview_author_description {
font-size: 14px;
margin-top: -4px;
opacity: 0.8;
color:#7E79E2;
}
自动缩放&高亮
/*自动缩放&高亮*/
/*左侧栏名称*/
#leftbar_overview_author_name {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    transition: transform 0.3s ease; /*变化速度*/
}
#leftbar_overview_author_name:hover {
    transform: scale(1.2); /*缩放大小*/
    filter: brightness(110%); /*调节亮度*/
}
/*左侧栏头像*/
#leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);
    transition: transform 0.3s ease; /*变化速度*/
}
#leftbar_overview_author_image:hover {
    transform: scale(1.2); /*缩放大小*/
    filter: brightness(110%); /*调节亮度*/
}
站点概览分隔线颜色
/*站点概览分隔线颜色*/
.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;
}
小工具栏字体大小
/*小工具栏字体大小*/
#leftbar_tab_tools{
    font-size: 14px;
}

正文

文章标题大小
/*文章标题字体大小*/
.post-title {
    font-size: 24px
}
正文大小
/*正文字体大小(不包含代码)*/
.post-content p{
    font-size: 1.1rem;
}
li{
    font-size: 1.0rem;
}
正文颜色
/*文章或页面的正文颜色*/
body{
    color:#000000
}
标题、链接颜色
/*标题、链接颜色*/
a, .btn-neutral {
color:#AF7AC5;
}
加粗字体颜色
/*设置加粗字体颜色*/
strong {
    /*白天*/
    color: #A7727D;
}
html.darkmode strong {
    /*夜晚*/
    color: #FAAB78;
}
代码高亮大小
/*代码高亮文字大小*/
td.hljs-ln-line.hljs-ln-code {
    font-size: 0.6rem !important;
}
Github卡片
/*正文Github卡片*/
.github-info-card-header a {
    /*抬头颜色*/
    color: black !important;
    font-size: 1.5rem;
}
html.darkmode .github-info-card-header a {
    /*抬头颜色——夜间*/
    color: #FAAB78 !important;
    font-size: 1.5rem;
}
.github-info-card {
    /*文字(非链接)*/
    font-size: 1rem;
    color: black !important;
}
html.darkmode .github-info-card {
    /*文字(非链接)——夜间*/
    font-size: 1rem;
    color: #FAAB78 !important;
}
.github-info-card.github-info-card-full.card.shadow-sm {
    /*Github卡片背景色*/
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
}
图片边距、居中
/*正文图片边距修改*/
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;}
评论区大小
/*评论字体大小*/
p {
    font-size: 1.0rem
}
/*评论发送区字体大小*/
.form-control{
    font-size: 1.0rem
}
/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.0rem
}
/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}
尾注大小
/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}
说说大小颜色
/*说说字体大小颜色*/
.shuoshuo-title {
    font-size: 14px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}
说说预览模式代码颜色
/*说说预览模式代码颜色*/
pre {
    /*白天*/
    color: #A7727D;
}
html.darkmode pre {
    /*夜晚*/
    color: #FAAB78;
}
引文颜色
/*引文背景色*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.13) !important;
    width: 100%
}
/*引文栏颜色*/
:root {
    /*也可用--color-border-on-foreground-deeper: #009688;*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

修改此项需要在style.css中第 141 行注释掉以下内容:

html.immersion-color body {
    --color-background: rgb(var(--color-tint-86));
    --color-foreground: rgb(var(--color-tint-92));
    --color-widgets: rgb(var(--color-tint-95));
    --color-widgets-disabled: rgb(var(--color-tint-86));
    --color-border: rgb(var(--color-tint-78));
    --color-border-on-foreground: rgb(var(--color-tint-86));
/*  --color-border-on-foreground-deeper: rgb(var(--color-tint-80)); */
    --color-text-deeper: rgb(var(--color-shade-82));
    --color-selection: rgb(var(--color-tint-70));
}

杂项

/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}
/*回顶图标放大*/
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;
}
d-clip: text;
}
/*隐藏wp-SEO插件带来的线条阴影*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}
卡片背景主题色透明
#leftbar_announcement {
background: var(--themecolor-gradient) !important;
}
#footer{
background: var(--themecolor-gradient) !important
}

在页尾脚本里添加以下内容,其中变量说明:

  • op1——“白天”状态主题色透明度
  • op2——“白天”状态卡片颜色透明度
  • op3——“夜间”状态卡片颜色透明度
  • op4——“夜间”状态主题色透明度
<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 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>
白天卡片背景透明
/*白天卡片背景透明*/
.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;
}*/
页脚透明
/*页脚透明*/
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}

参考资料:

Argon主题美化

Argon主题博客美化

Docker系列 WordPress系列 特效

版权声明:此篇文章《WordPress · 我对Argon主题的修改》作者:湙凇。未经许可严禁转载,转载与引用请首先注明作者(湙凇)、出处(https://blog.yisrime.xyz/02/20/wordpress-%c2%b7-%e6%88%91%e5%af%b9argon%e4%b8%bb%e9%a2%98%e7%9a%84%e4%bf%ae%e6%94%b9.html)以及此段内容。
暂无评论

发送评论 编辑评论

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

版权所有 严禁复制