Argon主题美化 – 筱莫博客

滚动模糊

在 Argon主题选项 --> 脚本 --> 页头脚本 加入下面代码：

<!--滚动模糊-->
<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 {
  filter: blur(13px);
  transform: scale(1.02);
}
#content::before {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}</style>

顶部Banner

白云效果

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 白云效果 */
.banner-title::before {
content: '';
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
transform:translatex(-50%);
max-width:500px;
z-index: -100;
background:white;
filter: blur(30px);
opacity: 0.5;
}

标题加粗

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 标题加粗 */
.banner-title .banner-title-inner{
font-size: 35px;
    position:relative;
background:inherit;
}
.banner-title{
position: absolute;
background: #5E72E4;
background-size:200%;
animation: ColdLight 3s linear infinite;
color:transparent !important;
-webkit-background-clip: text;
font-weight: bold; /* 添加字体加粗属性 */
}

副标题彩虹效果

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 副标题彩虹效果 */
.banner-subtitle{
font-size: 20px;
-webkit-text-fill-color: transparent;
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);
-webkit-background-clip: text;
}

Banner 动态箭头

在 外观 –> 主题文件编辑器 找到 主题页眉 header.php 文件

在第 438 行找到：

<div class="cover-scroll-down">

将这个 div 代码块中的内容用下面的代码替换：

<i class="fa fa-angle-down" aria-hidden="true" id="pointer1"></i>
<i class="fa fa-angle-down" aria-hidden="true" id="pointer2"></i>
<i class="fa fa-angle-down" aria-hidden="true" id="pointer3"></i>

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/*========Banner动态箭头===========*/
@keyframes up-down-move {
0% {
opacity:0;
transform:translate(-50%,-150px); 
}
50% {
opacity:1;
transform:translate(-50%,-130px); 
}
100% {
opacity:0;
transform:translate(-50%,-110px); 
}
}
.cover-scroll-down .fa-angle-down{
font-size: 3rem;
text-shadow: 0px 0px 8px #dc1111;
position:absolute;
transform: translate(-50%,-80px);
opacity:0;
}
.cover-scroll-down #pointer1{
animation: up-down-move 3s linear infinite;
}
.cover-scroll-down #pointer2{
animation: up-down-move 3s 1s linear infinite;
}
.cover-scroll-down #pointer3{
animation: up-down-move 3s 2s linear infinite;
}

顶部导航个人图标

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 顶部导航个人图标 */
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: -3rem; /* 左右偏移 */
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度 */
    height: 35px;
}

左侧作者栏

作者名称

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 作者名称 */
#leftbar_overview_author_name {
margin-top: 15px;
font-size: 18px;align-content;
color:#FFA500;
/* color:#FA92B5; */
}

作者名称自动缩放

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 作者名称自动缩放 */
#leftbar_overview_author_name {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    transition: transform 0.3s ease; /* 变化速度 */
}
#leftbar_overview_author_name:hover {
    transform: scale(1.2); /* 缩放大小 */
    filter: brightness(110%); /* 调节亮度 */
}

简介

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 简介 */
#leftbar_overview_author_description {
font-size: 14px;
margin-top: -4px;
opacity: 0.8;
color:#7E79E2;
}

站点概览分隔线颜色修改

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/*站点概览分隔线颜色修改*/
.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;
}

头像自动缩放、高亮 / 暗

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/* 头像自动缩放、高亮 / 暗 */
#leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);
    transition: transform 0.3s ease; /*变化速度*/
}
#leftbar_overview_author_image:hover {
    transform: scale(1.2); /*缩放大小*/
    filter: brightness(110%); /*调节亮度*/
}

页脚

在 Argon主题选项 --> 页脚 --> 页脚内容 加入下面代码：

<div class=""><span class="my-face">Copyright ©2025 筱莫 版权所有</span></div> 

<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-clock-o"></i> 运行时间 </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>

<div style="width:100%;margin:0 auto;text-align:center">
    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=33030202002254" target="_blank" style="text-decoration:none" rel="noreferrer">
      <img src="https://blog.mostu.cn/wp-content/uploads/2025/04/1744802339-beian.png" style="width:16px;height:16px;vertical-align:middle">
      <span style="color:#ffffff;font-size:15px;vertical-align:middle">浙公网安备33030202002254号</span>
    </a>

<br>
    <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:none" rel="noopener">
      <span style="color:#ffffff;font-size:15px;vertical-align:middle">浙ICP备2025164704号-1</span>
    </a>
  </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(2025, 3, 16, 16, 35, 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>

正文

引文属性设置

在 外观 --> 自定义 --> 额外CSS 加入以下代码：

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.13) !important;
    width: 100%
}
/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

参考文章：

博客Argon主题美化

滚动模糊

顶部Banner

白云效果

标题加粗

副标题彩虹效果

Banner 动态箭头

顶部导航个人图标

左侧作者栏

作者名称

作者名称自动缩放

简介

站点概览分隔线颜色修改

头像自动缩放、高亮 / 暗

页脚

正文

引文属性设置

参考文章：

发送评论 编辑评论

推荐文章

发送评论编辑评论