Loading... 想到啥写啥，可以看左侧的目录或者使用Ctrl+F来找自己想要的内容 ## 随机Banner标题 在argon主题的设置选项中有一个自定义banner标题的选项，如果想要每天换一个或者随机使用不同的标题，手动修改很麻烦，我们可以通过修改主题文件来实现。首先在网站根目录下新建一个txt文件用于存储句子，每个句子占一行，之后从后台进入外观->主题文件编辑器->header.php，通过Ctrl+F搜索class名为banner-title-inner的<span>标签，我们修改text=""中的内容即可，这里给出一个例子 将<?php echo $banner\_title;?>替换为以下内容 ```php <?php $poetry = file("./poetry.txt",FILE_IGNORE_NEW_LINES); echo $poetry[rand(0, count($poetry) - 1)]; ?> ``` 这里我在网站根目录下新建了一个名为poetry.txt的文件，如果你的网站使用的是云储存，这里也可以填写目标url，file()方法将文件按行读入数组中，所以文件内容必须以行来分隔，再通过rand()方法随机取一个句子，如果不想使用文件，也可以直接创建数组，使用以下语法 ```php <?php $arr = array("str1", "str2"); echo $arr[rand(0, count($arr) - 1)]; ?> ``` ## 今年过去百分比 将sidebar.php中if ($sidebar\_subtitle != '')表达式之后的内容替换即可 ```html <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中添加以下代码 ```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，添加如下代码 ```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，添加如下代码 ```css #content > div.page-information-card-container > div > div{ text-align:center; } ``` ## 网站底部信息 ### 备案号以及版权 这里是本站使用的静态内容，也就是备案号，版权等内容，将其中的文字或者链接替换成自己的即可，代码可以放在Argon主题选项->页脚内容中，也可以放在外观->主题文件编辑器->footer.php中的<footer>标签之下 ```html <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，中的<footer>标签之下，注意，要修改new Date()中的参数为你想要的日期 ```html <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进程的内存占用等等，可以添加如下代码，位置在</footer>之前，也就是代码最后执行的位置，这样得到的数据更加可靠，不过需要注意的是，其中所要的函数由wordpress提供，计算出的时间是服务器处理所花费的时间，并不是实际加载的时间 ```php <?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主题选项->文末附加内容中添加以下代码，其中图片路径和文字自行更换 ```html <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，添加如下代码，使其更加美观 ```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 ```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，可以自行修改尝试最佳效果 ```css @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 [](https://yooss.cn/usr/uploads/img/2023/03/微信图片_20230313134114.jpg) 鸿蒙黑体  阿里巴巴普惠体2.0  ## 颜色 我不是一个配色专家，我不能给出一个好的建议，这里是本站点用过的一些颜色代码。 + e76f51 日落橙 + 2a9d8f 海蓝绿 + d5896f 砖红 + a88976 驼色 + e9c46a 鹅黄 + 219ebc 海蓝 + ffb703 柚黄 © 允许规范转载 打赏 赞赏作者 微信 赞
