前言

吐槽一下自己的呆瓜操作：
（一周目）
在第一次接触 WordPress 的时候，使用的就是 Argon 主题，初期博客还没有内容，就想着学习并尝试一下其它建站平台和主题，就换了 Halo 和 Typecho 体验了一会，感觉没有 WordPress 用的这么顺手便捷，兜兜转转又用回 WordPress，但是在换平台的时候采用的是直接在阿里云重置系统再搭建面板建站，回想起来没备份就重置系统就导致了我 WordPress 以前配置的 Argon 主题全没了，想着既然没都没了，考虑到 Argon 主题已经停更了，想换一个还在持续更新维护的主题，于是就尝鲜了一下 Sakurairo 主题，感觉不太适合我，于是兜兜转转用回了 WordPress+Argon 主题。
真的是一次惨痛的经历。
（二周目）
服务器退费直接回收没备份，直接清空，啥也没留，又换服务器从头来过，由于不想再配置 Argon 主题里的 CSS 和 Script，索性直接换用 Sakurairo 主题省事。
真的又是一次惨痛的经历。感觉像我这样迟早都得来三周目🥲🥲🥲
宇宙级安全说明：没有拉踩任何主题，两款主题都非常好，只是吐槽一下自己的呆瓜操作，要勤备份，对各位对自己起警示作用⚠️。
Argon 主题的配置和设置参考了其它使用 Argon 主题的小伙伴:
Bensz-苯苯：Docker系列 WordPress系列 特效 - Bensz
鸦鸦的巢穴：Argon 主题修改记录 - 鸦鸦的巢穴
Echo：Argon主题博客美化 - Echo
以下修改都来自于各位大佬的教程，感谢各位大佬的分享
该文章只是我作为笔记记录于此

footer.php文件修改

只采用各位大佬的部分 footer.php 修改代码（需要完整的修改代码请查看各位大佬的博客主题修改文章）
在 WordPress 外观 - 主题文件编辑器 - 右边的主题文件找到 footer.php
在文件最后</body>前添加代码

<!--滚动模糊-->
<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, #content.scrolled::after {
  filter: blur(6px); /*数字越大虚化越明显*/
  transform: scale(1.02); /*数字越大背景放大越明显*/
}
#content::before, #content::after {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}
</style>

<!--网站输入效果开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>

<!--使用 PJAX 进行页面跳转-->
<script>
function pjaxNavigate(url) {
    $.pjax({
      url: url,       // 要跳转的页面 URL
    });
}
</script>

<!--点击文章简介进行文章跳转-->
<script>
document.addEventListener("click",function(e){
  var c=e.target.closest(".post-content");
  if(!c)return;
  if(c.id==="post_content")return;
  if(e.target.closest("a")||e.target.closest("button"))return;
  var el=c.parentElement;
  while(el&&el!==document){
    var a=el.querySelector(".post-title a,h2 a,h3 a,header a");
    if(a&&a.href){e.preventDefault();location.href=a.href;return;}
    el=el.parentElement;
  }
},true);
document.addEventListener("mouseover",function(e){
  var c=e.target.closest(".post-content");
  if(!c||c.id==="post_content")return;
  c.style.cursor="pointer";
},true);
</script>

额外CSS样式

也是只采用各位大佬的部分 CSS 样式修改代码（需要完整的修改代码请查看各位大佬的博客主题修改文章）
在 WordPress 外观 - 自定义 - 额外 CSS

/*白天卡片背景透明*/
.card {
	background-color: 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(66, 66, 66, 0.9) !important;
}
 
html.darkmode #fabtn_blog_settings_popup {
	background: rgba(66, 66, 66, 0.95) !important;
}
 
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,
.darkmode .card .widget,
#post_content>div>div>div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title,
#custom_html-2 {
	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);
}
 
/*分类卡片文本居中*/
#content>div.page-information-card-container>div>div {
	text-align: center;
}
 
/*提示条背景透明*/
.admonition,.collapse-block{
	background-color: transparent !important;
	backdrop-filter: contrast(130%);
}
 
/*左侧菜单栏突出颜色修改*/
.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;
}
 
/*左侧栏边距修改*/
.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-top:0;
	margin-bottom: 1rem;
}
.wp-block-columns {
	margin-bottom:0;
}
 
/*正文表格样式修改*/
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;
}
 
/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
	font-weight: bold;
	color: #ffffff !important;
	text-shadow: 0px 0px 5px #000000 !important;
}
 
/*回顶图标放大*/
#fabtn_back_to_top,
#fabtn_go_to_comment,
#fabtn_toggle_blog_settings_popup,
#fabtn_toggle_sides,
#fabtn_open_sidebar,
#fabtn_toggle_darkmode {
	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;
}
 
/*字体使用的是本地字体*/
@font-face {
	font-family:'MiSans-Demibold';
	src:url('/External-Expansion/fonts/woff2/MiSans-Demibold.woff2') format('woff2');
	font-display: swap;
}

body{
    font-family:'MiSans-Demibold' !important
}

body,
.nav-link-inner--text {
    font-family:'MiSans-Demibold' !important
}
 
.navbar-brand {
	font-size: 1.25rem;
	font-weight: 100;
	margin-right: 2rem;
	padding-bottom: .1rem;
}
 
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
	transform: scale(1.2);
}
 
/*隐藏左侧栏搜索框*/
.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);
	}
}

/*滚动条修改*/
::-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;
}

以下部分是对以上部分的代码修改做的详解，可以选择性挑选自己感兴趣的部分添加在博客网站里

文字输入撒花特效

在评论框输入删除文字会出现撒花效果
在 WordPress 的 footer.php 文件最后</body>前添加代码

<!--网站输入效果开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>

背景虚化

在网站内容下划的时候，使背景出现虚化
在 WordPress 的 footer.php 文件最后</body>前添加代码

<!--滚动模糊-->
<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, #content.scrolled::after {
  filter: blur(6px); /*数字越大虚化越明显*/
  transform: scale(1.02); /*数字越大背景放大越明显*/
}
#content::before, #content::after {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}
</style>

点击文章概要也可以跳转文章

默认的 Argon 主题只能通过点击标题进入到文章，修改之后无论是点击标题还是概要都可以进入到文章里
这里有两种方法

方法1：

采用的是 Bensz - 苯苯的修改方法
在 WordPress 外观 - 主题文件编辑器修改一行代码
在 post-content 对象后面添加

onclick="pjaxNavigate('<?php the_permalink(); ?>')" style="cursor: pointer"

修改完成之后复制以下代码到 WordPress 的 footer.php 文件最后</body>前添加代码

// 使用 PJAX 进行页面跳转，
function pjaxNavigate(url) {
    $.pjax({
      url: url,       // 要跳转的页面 URL
    });
}

方法2：

可能会有 BUG，但目前暂时未遇到
这个方法源于我使用 Bensz - 苯苯大佬给的方法使用不了，修改了不生效，我也不知道哪里有问题，有点社恐也不想麻烦大佬，索性就问 AI 怎么解决，在 AI 一通操作下得出了以下代码，也可以做到点击概要后就可以跳转到文章
也是在 footer.php 文件最后</body>前添加代码

<script>
document.addEventListener("click",function(e){
  var c=e.target.closest(".post-content");
  if(!c)return;
  if(c.id==="post_content")return;
  if(e.target.closest("a")||e.target.closest("button"))return;
  var el=c.parentElement;
  while(el&&el!==document){
    var a=el.querySelector(".post-title a,h2 a,h3 a,header a");
    if(a&&a.href){e.preventDefault();location.href=a.href;return;}
    el=el.parentElement;
  }
},true);
document.addEventListener("mouseover",function(e){
  var c=e.target.closest(".post-content");
  if(!c||c.id==="post_content")return;
  c.style.cursor="pointer";
},true);
</script>

博客字体修改

需要 woff 2 格式的字体文件，可以将字体上传到网站根目录或者 CDN，然后把链接添加到以下代码
代码里面的'/External-Expansion/fonts/woff 2/MiSans-Demibold.woff 2'位置，要换成你字体 CDN 链接或者上传到网站根目录的地址，代码里面的'MiSans-Demibold'字体名也要改成对应字体的名字，不要直接照抄此处代码，否则网站会无法加载字体

/*字体使用的是本地字体*/
@font-face {
	font-family:'MiSans-Demibold';
	src:url('/External-Expansion/fonts/woff2/MiSans-Demibold.woff2') format('woff2');
	font-display: swap;
}

body{
    font-family:'MiSans-Demibold' !important
}

body,
.nav-link-inner--text {
    font-family:'MiSans-Demibold' !important
}
 
.navbar-brand {
	font-size: 1.25rem;
	font-weight: 100;
	margin-right: 2rem;
	padding-bottom: .1rem;
}

我使用的是小米的 MiSans 字体，我觉得挺好看的，还是免费字体

时间进度条

我的建议是直接看 Bensz - 苯苯给出的方法，写的非常详细，我就是按此方法设置的
文章目录序号 22-23 小工具 - 时间进度条 - 去重叠
Bensz-苯苯：Docker系列 WordPress系列 特效 - Bensz

头像缩放

鼠标经过左侧头像的时候会自动缩放
在 WordPress 外观 - 自定义 - 额外 CSS 添加

/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
	transform: scale(1.2);
}

隐藏左侧搜索框

Argon 主题原版左侧有一个搜索，此代码可以把左侧搜索隐藏掉
在 WordPress 外观 - 自定义 - 额外 CSS 添加

/*隐藏左侧栏搜索框*/
.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);
	}
}

网站底部信息展示

在博客底部显示网站的详细信息，运行时间等
在 WordPressArgon 主题选项 - 页脚 - 页脚内容添加
按顺序复制在一起即可

CSS样式表

HTML底部信息

<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">粤ICP备 1234567890号</a>|
          <a href="https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank"
              one-link-mark="yes">
              粤公网安备 1234567890号</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">
          <!-- EdgeOne链接 -->
          <a href="https://cloud.tencent.com/product/teo" target="_blank" one-link-mark="yes">EdgeOne</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">2026</i>
          <a href="https://www.liveout.cn/" target="_blank" one-link-mark="yes">@ 秋屿RainTinged
      </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>

JavaScript网站运行时间脚本

只需要修改有注释的那一行
其中月份的值为 0-11，0 代表 1 月，11 代表 12 月，所以输入的月份未真实月份的前一个月

<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(2026, 2, 27, 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>

点击左侧头像或名字跳转到关于也

在 WordPressArgon 主题选项 - 脚本 - 页尾脚本添加代码

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

结尾

再次说明以上代码与记录都出自：
Bensz-苯苯：Docker系列 WordPress系列 特效 - Bensz
鸦鸦的巢穴：Argon 主题修改记录 - 鸦鸦的巢穴
Echo：Argon主题博客美化 - Echo
侵权联删
非常感谢这些大佬，在 Argon 主题配置的教程方面，提供了非常便捷的美化修改方案
感谢各位对此文章的阅读