本文最后更新于40 天前，其中的信息可能已经过时。
前言
本文为argon主题的美化代码，参考了几位大佬的文章，最终效果对我个人而言还算满意，不过由于结合了各种代码，元素的命名可能比较乱，以后有机会了再改进。
argon主题资源
Argon 主题 GitHub 地址：https://github.com/solstice23/argon-theme
整体代码
额外 CSS
外观-自定义-额外 CSS
/*=========字体设置============*/
/*网站字体*/
/*原则上可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face {
font-family: 'JapaneseFont'; /* 日文字体 */
src: url('/wp-admin/fonts/azuki.woff2') format('woff2');
unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+3000-303F; /* 平假名、片假名、汉字和日文标点的Unicode范围 */
}
@font-face {
font-family: 'ChineseFont'; /* 中文字体 */
src: url('/wp-admin/fonts/13.woff2') format('woff2');
unicode-range: U+4E00-9FFF; /* 中文的Unicode范围 */
}
@font-face {
font-family: 'EnglishFont'; /* 英文字体 */
src: url('/wp-admin/fonts/Monaco.woff2') format('woff2');
unicode-range: U+0020-007F; /* 英文字母和标点符号的Unicode范围 */
}
body,
.nav-link-inner--text {
font-family: 'EnglishFont', 'ChineseFont', 'JapaneseFont', sans-serif; /* 优先级：英文 -> 中文 -> 日文 */
}
/* 日文文本显示日文字体 */
:lang(jp) {
font-family: 'JapaneseFont', sans-serif;
}
.navbar-brand {
font-size: 1.25rem;
font-weight: 100;
margin-right: 2rem;
padding-bottom: .1rem;
}
/*设置加粗字体颜色*/
strong {
/*白天*/
color: ;
}
html.darkmode strong {
/*夜晚*/
color: #FAAB78;
}
/*说说预览模式的代码字体颜色*/
pre {
/*白天*/
color: ;
}
html.darkmode pre {
/*夜晚*/
color: #FAAB78;
}
/*横幅字体大小*/
.banner-title {
font-size: 2em;
}
.banner-subtitle{
font-size: 18px;
}
/*文章标题字体大小*/
.post-title {
font-size: 28x
}
/*文章发布时间，浏览量等字体大小*/
.post-meta-detail {
font-size: 16px;
line-height: 24px;
opacity: 0.8;
display: inline-block;
}
/*正文字体大小（不包含代码）*/
.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
}
/*========颜色设置===========*/
/*文章标题字体颜色、阴影*/
.post-title {
/*color: rgba(255, 255, 255, 0.95) !important;*/
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
filter: drop-shadow(0px 1px 5px #0005);
}
/*文章或页面的正文颜色*/
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.85) !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;
}
/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}
/*顶栏菜单*/
/*顶栏菜单放大*/
.navbar-nav .nav-link {
font-size: 1rem;
}
.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;
}
/*导航栏下方阴影*/
.headroom--not-top {
--shadow-opacity: .8;
box-shadow: 0 0 10px 0 rgb(0, 0, 0, var(--shadow-opacity));
}
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
transform: scale(1.2);
filter: brightness(150%);
}
/*隐藏左侧栏搜索框*/
/*
.leftbar-menu {display: none;}
.leftbar-search-button {display: none;}
#leftbar_part2_inner:before {display: none;}
@media screen and (min-width: 900px){
.leftbar-banner {
border-radius: var(--card-radius);
}
}
*/
.leftbar-search-button {display: none;}
/*滚动条修改
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track{
background-color:#272010;
}
::-webkit-scrollbar-thumb{
background-color:#6f6558;
border:none;
}
html.darkmode ::-webkit-scrollbar-track{
background-color:#282828;
}*/
/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
display: none;
}
/*标签边框颜色及鼠标悬停背景色改为主题色*/
html.immersion-color body {
--color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}主题文件
主题文件编辑器-主题文件-template-parts-content-preview-1.php，51行。在<div class="post-content">的"post-content"后添加代码onclick="pjaxNavigate('<?php the_permalink(); ?>')" style="cursor: pointer"，修改后如下。
<div class="post-content" onclick="pjaxNavigate('<?php the_permalink(); ?>')" style="cursor: pointer">页脚
Argon 主题选项-页脚-页脚内容
<div class=""><span class="my-face">Copyright ©2024 夜月なの 版权所有</span></div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span><span class="badge-value">
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">浙ICP备xxx号</a>
|
<img src="备案图标URL" alt="备案图标" style="width: 20px; height: 20px; vertical-align: middle;">
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=公安备案号" rel="noreferrer" target="_blank">浙公网安备xxx</a></span>
</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> 天
<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> 小时
<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> 分
<span id="blog_running_secs" class="odometer odometer-auto-theme"></span> 秒
</span>
</div>
<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(2024, 7, 28, 23, 33, 7); // 修改的日期
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>脚本
Argon 主题选项-脚本-页头脚本
<script>
// 使用 PJAX 进行页面跳转，
function pjaxNavigate(url) {
$.pjax({
url: url, // 要跳转的页面 URL
});
}
</script>Argon 主题选项-脚本-页尾脚本
<!--文字抖动特效-->
<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/myface.css" rel="stylesheet">
<!--鼠标指针特效2 开始-->
<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>
<!--鼠标指针特效2 结束-->
<!--全页特效开始-->
<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://bensz.onmicrosoft.cn/bloghelper/mouse/halo-dream/fairyDustCursor.min.js");
//
// 鼠标移动的仙女棒特效
$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");
// 鼠标移动的泡泡特效
// $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/joe/censor10.js");
}
}
</script>
<!--全页特效结束-->
<!--鼠标悬停卡片3D效果start-->
<!--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>
<!--鼠标悬停3D效果end-->
<!--站点概览点击头像或作者名跳转到关于页--><script>
window.pjaxLoaded = function(){
$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
}
window.pjaxLoaded();
</script>
<!--根据滚动高度改变顶栏透明度--><script>
!function () {
let toolbar = document.getElementById("navbar-main");
let $bannerContainer = $("#banner_container");
let $content = $("#content");
let startTransitionHeight;
let endTransitionHeight;
let maxOpacity = 0.65;
startTransitionHeight = $bannerContainer.offset().top - 75;
endTransitionHeight = $content.offset().top - 75;
$(window).resize(function () {
startTransitionHeight = $bannerContainer.offset().top - 75;
endTransitionHeight = $content.offset().top - 75;
});
function changeToolbarTransparency() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop < startTransitionHeight) {
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
toolbar.style.setProperty('box-shadow', 'none');
toolbar.style.setProperty('-webkit-box-shadow', 'none');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
}
toolbar.classList.add("navbar-ontop");
return;
}
if (scrollTop > endTransitionHeight) {
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
toolbar.style.setProperty('box-shadow', '');
toolbar.style.setProperty('-webkit-box-shadow', '');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
}
toolbar.classList.remove("navbar-ontop");
return;
}
let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
toolbar.style.setProperty('box-shadow', '');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
}
toolbar.classList.remove("navbar-ontop");
}
changeToolbarTransparency();
document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>
<!--滚动模糊
<script>
window.addEventListener("scroll", function (e) {
if (window.scrollY > window.innerHeight * 0.8) {
document.querySelector("#content").classList.add("scrolled");
} else {
document.querySelector("#content").classList.remove("scrolled");
}
});</script>
<style>
#content.scrolled::before, #content.scrolled::after {
filter: blur(2px); /*数字越大虚化越明显*/
transform: scale(1.02); /*数字越大背景放大越明显*/
}
#content::before, #content::after {
transition: filter .3s ease, transform .3s ease !important;
filter: blur(0px);
transform: scale(1.02);
}
</style>-->细节代码
额外CSS代码就不细说了，都是网页样式的代码，可以看注释。
字体
字体需要从.tff后缀转换为.woff2后缀，然后上传至云服务器的/opt/1panel/apps/openresty/openresty/www/sites/nightmoon.fun/index/wp-admin/fonts目录下，没有fonts文件夹自己新建一个，然后将以下代码放到WordPress后台 – 外观 – 自定义 – 额外 CSS
默认字体优先级：
- 英文将使用
EnglishFont。 - 汉字将使用
ChineseFont，因为中文字体优先于日文字体，因此默认情况下，所有汉字都会使用中文字体。 - 如果是日文（平假名、片假名、标点符号）部分，它们会使用
JapaneseFont，日文字体在ChineseFont之后，只会应用于没有中文字体的范围。
日文文本的特殊处理：
通过 :lang(jp) 伪类明确地为日文文本指定了 JapaneseFont，当 lang="jp" 被指定时，日文文本会自动切换到日文字体。
这段代码的效果：
默认情况下，所有汉字将使用中文字体，英文和日文的平假名、片假名以及标点符号会使用各自的字体。
如果遇到日文内容（比如包含汉字和假名的文本），只需要在 HTML 中为该部分文本添加 lang="jp"，以确保日文汉字和假名都使用日文字体。
/*网站字体*/
/*原则上可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face {
font-family: 'JapaneseFont'; /* 日文字体 */
src: url('/wp-admin/fonts/azuki.woff2') format('woff2');
unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+3000-303F; /* 平假名、片假名、汉字和日文标点的Unicode范围 */
}
@font-face {
font-family: 'ChineseFont'; /* 中文字体 */
src: url('/wp-admin/fonts/13.woff2') format('woff2');
unicode-range: U+4E00-9FFF; /* 中文的Unicode范围 */
}
@font-face {
font-family: 'EnglishFont'; /* 英文字体 */
src: url('/wp-admin/fonts/Monaco.woff2') format('woff2');
unicode-range: U+0020-007F; /* 英文字母和标点符号的Unicode范围 */
}
body,
.nav-link-inner--text {
font-family: 'EnglishFont', 'ChineseFont', 'JapaneseFont', sans-serif; /* 优先级：英文 -> 中文 -> 日文 */
}
/* 日文文本显示日文字体 */
:lang(jp) {
font-family: 'JapaneseFont', sans-serif;
}日文设置的方式（使用自定义HTML区块）：
<p>这是默认的中文字体。</p>
<p lang="jp">これは日本語のコンテンツです。</p>这是默认的中文字体。
これは日本語のコンテンツです。
点击文章概要也可以进入文章页面
（1）主题文件编辑器-主题文件-template-parts-content-preview-1.php，51行。在<div class="post-content">的"post-content"后添加代码onclick="pjaxNavigate('<?php the_permalink(); ?>')" style="cursor: pointer"，修改后如下。
<div class="post-content" onclick="pjaxNavigate('<?php the_permalink(); ?>')" style="cursor: pointer">（2）Argon 主题选项-脚本-页头脚本
<script>
// 使用 PJAX 进行页面跳转，
function pjaxNavigate(url) {
$.pjax({
url: url, // 要跳转的页面 URL
});
}
</script>网站底部信息
Argon 主题选项-页脚-页脚内容
（1）版权
<div class=""><span class="my-face">Copyright ©2024 夜月なの 版权所有</span></div>（2）备案号
备案编号图标需要上传至媒体库，将图片链接替换“备案图标URL”。
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span><span class="badge-value">
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">浙ICP备xxx号</a>
|
<img src="备案图标URL" alt="备案图标" style="width: 20px; height: 20px; vertical-align: middle;">
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=公安备案号" rel="noreferrer" target="_blank">浙公网安备xxx</a></span>
</div>（3）运行时长
<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> 天
<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> 小时
<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> 分
<span id="blog_running_secs" class="odometer odometer-auto-theme"></span> 秒
</span>
</div>
<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(2024, 7, 28, 23, 33, 7); // 修改的日期
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>版权文字抖动特效
Argon 主题选项-脚本-页尾脚本
<!--文字抖动特效-->
<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/myface.css" rel="stylesheet">更改鼠标指针样式
Argon 主题选项-脚本-页尾脚本
<!--鼠标指针特效2 开始-->
<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>
<!--鼠标指针特效2 结束-->网站页面特效及鼠标指针特效
Argon 主题选项-脚本-页尾脚本
<!--全页特效开始-->
<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://bensz.onmicrosoft.cn/bloghelper/mouse/halo-dream/fairyDustCursor.min.js");
//
// 鼠标移动的仙女棒特效
$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");
// 鼠标移动的泡泡特效
// $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/joe/censor10.js");
}
}
</script>
<!--全页特效结束-->文章卡片3D特效
Argon 主题选项-脚本-页尾脚本
<!--鼠标悬停卡片3D效果start-->
<!--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>
<!--鼠标悬停3D效果end-->点击头像跳转关于页
Argon 主题选项-脚本-页尾脚本
<!--站点概览点击头像或作者名跳转到关于页--><script>
window.pjaxLoaded = function(){
$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
}
window.pjaxLoaded();
</script>顶部导航栏根据滚动高度改变透明度
Argon 主题选项-脚本-页尾脚本
<!--根据滚动高度改变顶栏透明度--><script>
!function () {
let toolbar = document.getElementById("navbar-main");
let $bannerContainer = $("#banner_container");
let $content = $("#content");
let startTransitionHeight;
let endTransitionHeight;
let maxOpacity = 0.65;
startTransitionHeight = $bannerContainer.offset().top - 75;
endTransitionHeight = $content.offset().top - 75;
$(window).resize(function () {
startTransitionHeight = $bannerContainer.offset().top - 75;
endTransitionHeight = $content.offset().top - 75;
});
function changeToolbarTransparency() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop < startTransitionHeight) {
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
toolbar.style.setProperty('box-shadow', 'none');
toolbar.style.setProperty('-webkit-box-shadow', 'none');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
}
toolbar.classList.add("navbar-ontop");
return;
}
if (scrollTop > endTransitionHeight) {
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
toolbar.style.setProperty('box-shadow', '');
toolbar.style.setProperty('-webkit-box-shadow', '');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
}
toolbar.classList.remove("navbar-ontop");
return;
}
let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
toolbar.style.setProperty('box-shadow', '');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
}
toolbar.classList.remove("navbar-ontop");
}
changeToolbarTransparency();
document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>网站背景根据滚动高度改变透明度（夜间模式未生效，暂不使用）
Argon 主题选项-脚本-页尾脚本
<!--滚动模糊
<script>
window.addEventListener("scroll", function (e) {
if (window.scrollY > window.innerHeight * 0.8) {
document.querySelector("#content").classList.add("scrolled");
} else {
document.querySelector("#content").classList.remove("scrolled");
}
});</script>
<style>
#content.scrolled::before, #content.scrolled::after {
filter: blur(2px); /*数字越大虚化越明显*/
transform: scale(1.02); /*数字越大背景放大越明显*/
}
#content::before, #content::after {
transition: filter .3s ease, transform .3s ease !important;
filter: blur(0px);
transform: scale(1.02);
}
</style>-->年度倒计时小工具（未使用）
外观-小工具-左侧栏小工具-简码
<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>