想到啥写啥,可以看左侧的目录或者使用Ctrl+F来找自己想要的内容

随机Banner标题

在argon主题的设置选项中有一个自定义banner标题的选项,如果想要每天换一个或者随机使用不同的标题,手动修改很麻烦,我们可以通过修改主题文件来实现。首先在网站根目录下新建一个txt文件用于存储句子,每个句子占一行,之后从后台进入外观->主题文件编辑器->header.php,通过Ctrl+F搜索class名为banner-title-inner的标签,我们修改text=""中的内容即可,这里给出一个例子

将<?php echo $banner\_title;?>替换为以下内容

<?php
$poetry = file("./poetry.txt",FILE_IGNORE_NEW_LINES);
echo $poetry[rand(0, count($poetry) - 1)];
?>

这里我在网站根目录下新建了一个名为poetry.txt的文件,如果你的网站使用的是云储存,这里也可以填写目标url,file()方法将文件按行读入数组中,所以文件内容必须以行来分隔,再通过rand()方法随机取一个句子,如果不想使用文件,也可以直接创建数组,使用以下语法

<?php
$arr = array("str1", "str2");
echo $arr[rand(0, count($arr) - 1)];
?>

今年过去百分比

将sidebar.php中if ($sidebar\_subtitle != '')表达式之后的内容替换即可

<span id="percentage-text" class="leftbar-banner-subtitle text-white"></span>
<script type="text/javascript">
    function percentageOfYear() {
        const today = new Date();
        const startOfYear = new Date(today.getFullYear(), 0, 1);
        const endOfYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59);
        const diff = today.getTime() - startOfYear.getTime();
        const yearDiff = endOfYear.getTime() - startOfYear.getTime();
        const percentage = ((diff / yearDiff) * 100).toFixed(6);
        const percentageStr = `今年已经过去 ${percentage}%`;
        document.getElementById("percentage-text").innerHTML = today;
        setTimeout(percentageOfYear, 1000);
    }
    percentageOfYear();
</script>

左侧菜单栏动画

在额外css中添加以下代码

@media screen and (min-width: 900px) {
  .leftbar-menu-item a {
    transition: all 0.3s ease-out;
  }
  .leftbar-menu-item a:hover {
    padding-left: calc(50% - 30px);
    font-weight:bold;
  }
}

卡片背景透明

在后台进入外观->自定义->额外CSS,添加如下代码

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.9) !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.8) !important;
/*     backdrop-filter: blur(6px);
    -webkit-backdrop-filter:blur(6px); */
}

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

关于backdrop-filter属性,就是类似于毛玻璃的模糊效果,个人建议不要开,开启之后虽然会有一个比较好的观感,但是对性能的影响非常大,访客访问你的网页会占用大量的资源,直观的影响就是耗电和卡顿,如果非要开启的话,建议只打开分类卡片的模糊效果,另外如果开启了主题色沉浸,夜间模式下的透明效果可能需要修改颜色,可以尝试自己调整来达到最佳效果

分类卡片文字居中

在后台进入外观->自定义->额外CSS,添加如下代码

#content > div.page-information-card-container > div > div{
    text-align:center;
}

网站底部信息

备案号以及版权

这里是本站使用的静态内容,也就是备案号,版权等内容,将其中的文字或者链接替换成自己的即可,代码可以放在Argon主题选项->页脚内容中,也可以放在外观->主题文件编辑器->footer.php中的

标签之下

<div style="width: fit-content;margin: 0 auto;text-overflow:ellipsis; white-space:nowrap; overflow:hidden">
    <div style="font-size: 12px">
        <span style="display: inline-block;">
        <img src="https://www.zhujinghua.com/usr/uploads/img/2023/01/备案图标-1.png"
             style="width: 12px;height: auto;"/>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36068102000121">赣公网安备36068102000121号</a>
        <span>丨</span>
        <a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2022010939号-2</a>
    </span>
    </div>
</div>
<span style="font-size: 12px;">Copyright © 2022 住京华 WordPress <a href="https://github.com/solstice23/argon-theme" target="_blank">Argon</a></span>

如果想要放置网站运行时间,可以参照如下的代码,添加到外观->主题文件编辑器->footer.php,中的

标签之下,注意,要修改new Date()中的参数为你想要的日期

<span id="footTimer" style="font-size:12px"></span>
<script type="text/javascript">
function sinceTime() {
  const birthDay = new Date("2023-01-19");
  const today = new Date();
  const diff = today.getTime() - birthDay.getTime();
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  const timeStr = `本站已安全运行 ${days}天${hours%24}时${minutes%60}分${seconds%60}秒<br>`;
  document.getElementById("footTimer").innerHTML = timeStr;
  setTimeout(sinceTime, 1000);
}
sinceTime();
</script>

资源消耗

如果想要放置内存消耗,查询数据库的次数,以及php进程的内存占用等等,可以添加如下代码,位置在

之前,也就是代码最后执行的位置,这样得到的数据更加可靠,不过需要注意的是,其中所要的函数由wordpress提供,计算出的时间是服务器处理所花费的时间,并不是实际加载的时间

<?php printf('<span style="font-size: 12px;">耗时 %.3f 秒丨查询 %d 次丨内存 %.2f MB</span>', timer_stop(0, 3), get_num_queries(), memory_get_peak_usage() / 1024 / 1024);?>

文章末尾添加打赏

argon主题自带了一个添加打赏按钮的功能,但是在某些内核的情况下,尤其是wx内置的浏览器中,这个按钮是无效的,所以这里利用argon自带的可折叠区块来添加一个赞赏区域

首先在Argon主题选项->文末附加内容中添加以下代码,其中图片路径和文字自行更换

<div class="collapse-block shadow-sm collapse-block-transparent collapsed hide-border-left"><div class="collapse-block-title"><span class="collapse-block-title-inner">₍ᐢ..ᐢ₎♡求打赏补贴VPS费用</span><i class="collapse-icon fa fa-angle-down"></i></div><div class="collapse-block-body" style="display:none;"><img src="https://www.zhujinghua.com/usr/uploads/img/2023/03/IMG_148720230311-201154.jpg"></div></div>

 在后台进入外观->自定义->额外CSS,添加如下代码,使其更加美观

.additional-content-after-post{
    font-size:14px;
    padding:0px;
}
.collapse-block{
    background-color:rgba(var(--themecolor-rgbstr),0.15)!important;
    margin-bottom:0px;
}

美化折叠代码块

添加如下CSS

.post-content .collapse-block{
    border:2px solid rgba(var(--themecolor-rgbstr),0.6);
    border-radius:6px;
}

修改字体

中文字体不同于英文字体,中文字体就算最基本都有上千个字,所以说字体文件是很大的(5mb-10mb),也有些精简的字体文件大小也在3mb左右,并且因为浏览器兼容问题需要准备多种格式的字体,比如woff2以及ttf,考虑到服务器带宽问题,不建议将字体文件放在本地,如果带宽很大那无所谓,建议将字体文件使用CDN加速,也可以只使用woff2格式,加快速度,不过会牺牲一定的兼容性

将以下代码添加到外观->自定义->额外CSS中即可,其中url()中的参数为字体文件的路径,第一条url存放woff2格式,第二条url存放ttf格式,font-display属性建议设置为swap或者auto,可以自行修改尝试最佳效果

@font-face {
    font-family: myfont;
    src: url("/myfont.woff2") format("woff2"),
    url("/myfont.ttf") format("ttf");
    font-display: auto;
}

:not(i) {
    font-family: myfont;
}

免费商用字体推荐

字体版权问题应当被重视,这里我给出几个个人比较喜欢的开源字体给大家下载

霞骛文楷GB 密码 39ms12

鸿蒙黑体 密码 1db9ej

阿里巴巴普惠体2.0 密码 04ch3f

颜色

我不是一个配色专家,我不能给出一个好的建议,这里是本站点用过的一些颜色代码。

  • e76f51 日落橙
  • 2a9d8f 海蓝绿
  • d5896f 砖红
  • a88976 驼色
  • e9c46a 鹅黄
  • 219ebc 海蓝
  • ffb703 柚黄