想到啥写啥,可以看左侧的目录或者使用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://yooss.cn/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,中的
<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://yooss.cn/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
鸿蒙黑体
阿里巴巴普惠体2.0
颜色
我不是一个配色专家,我不能给出一个好的建议,这里是本站点用过的一些颜色代码。
- e76f51 日落橙
- 2a9d8f 海蓝绿
- d5896f 砖红
- a88976 驼色
- e9c46a 鹅黄
- 219ebc 海蓝
- ffb703 柚黄