WordPress博客：Argon主题的使用与美化-滤镜色彩

说明

博客所有美化方法均来自网络，我只是站在巨人的肩膀上而已，特别感谢大佬们的无私分享。

本文章记录本人博客中所用到的美化方法。

整体代码

CSS 样式

具体修改内容见注释，添加位置：外观-自定义-额外CSS

自定义 CSS 代码

/*=========字体设置============*/
 
/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:btfFont;
    src:url(fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}
 
/*设置加粗字体颜色*/
strong {
    /*白天*/
    color: #A7727D;
}
html.darkmode strong {
    /*夜晚*/
    color: #FAAB78;
}
 
/*说说预览模式的代码字体颜色*/
pre {
    /*白天*/
    color: #A7727D;
}
html.darkmode pre {
    /*夜晚*/
    color: #FAAB78;
}
 
/*横幅字体大小*/
.banner-title {
  font-size: 2.5em;
}
.banner-subtitle{
  font-size: 20px;
}
 
/*文章标题字体大小*/
.post-title {
    font-size: 30px
}
 
/*正文字体大小（不包含代码）*/
.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
}
 
/*========颜色设置===========*/
 
/*文章或页面的正文颜色*/
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;
}
 
/*顶栏菜单*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/
.navbar-nav .nav-link {
    font-size: 1.2rem;
    font-family: 'btfFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1rem;
			color:blue;
}
.navbar-nav .nav-item {
    margin-right:2rem;
		 margin-left:-2rem;
}
.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: 1rem;
    padding-left: 1rem;
}
 
/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.5rem;
    /*顶栏图标边界微调*/
    margin-right: 1.5rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 48px;
}
 
/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}
 
/* 页脚透明 */
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}
 
/*头像缩放或亮暗*/
#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(120%); /*调节亮度*/
}
 
/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before {
	background-size: 50%;
	background-position: 50% 45%;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0MjM2MjAwNjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzYxLjY2ODMzMiAzMjMuNDM3NzEycTEwLjMxMzE0MyAxMS40MTAyODYgNC4wMjI4NTcgMjUuMTYxMTQzbC0zMDguNTg5NzEyIDY2MS4xMzgyODFxLTcuNDYwNTcxIDE0LjI2Mjg1Ny0yMy45OTA4NTcgMTQuMjYyODU3LTIuMjY3NDI5IDAtNy45NzI1NzEtMS4xNzAyODYtOS43MjgtMi44NTI1NzEtMTQuNTU1NDI4LTEwLjgyNTE0M3QtMi41Ni0xNy4xMTU0MjhsMTEyLjU2Njg1Ni00NjEuNjc3NzExLTIzMi4wMDkxNDEgNTcuNzA5NzE0cS0yLjI2NzQyOSAwLjU4NTE0My02Ljg3NTQyOSAwLjU4NTE0My0xMC4zMTMxNDMgMC0xNy43MDA1NzEtNi4yOTAyODYtMTAuMzEzMTQzLTguNTU3NzE0LTcuNDYwNTcxLTIyLjMwODU3MWwxMTQuODM0Mjg1LTQ3MS40MDU3MTFxMi4yNjc0MjktNy45NzI1NzEgOS4xNDI4NTctMTMuMTY1NzE0dDE2LjAxODI4Ni01LjEybDE4Ny40NjUxNDIgMHExMC44MjUxNDMgMCAxOC4yODU3MTQgNy4xNjh0Ny40NjA1NzEgMTYuODIyODU3cTAgNC41MzQ4NTctMi44NTI1NzEgMTAuMzEzMTQzbC05Ny43MTg4NTYgMjY0LjU1NzcxMiAyMjYuMzAzOTk4LTU2LjAyNzQyOHE0LjUzNDg1Ny0xLjE3MDI4NiA2Ljg3NTQyOS0xLjE3MDI4NiAxMC44MjUxNDMgMCAxOS40NTYgOC41NTc3MTR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyNTI0Ij48L3BhdGg+PC9zdmc+);
}
 
.shuoshuo-preview-container:hover:before {
	background-position: 50% 50%;
	background-size: 60%;
}
 
/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
	border-radius: 10px;
	background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}
 
/* 修改github样式卡的背景颜色 */
.github-info-card {
	/*设置背景颜色*/
	background-color: #A8E9F0 !important;
}
 
/* 修改github图标样式 */
.github-info-card-header a{
	color: red !important;
}
 
/* 修改github用户名和项目名样式 */
.github-info-card-name {
	color:#464AFC;
	font-weight: bold;
	margin-left:1rem;/* 偏移量 */
}
 
/* 修改github项目描述样式 */
.github-info-card-description{
	color: black; /* 设置字体颜色 */
	margin-left:1rem;/* 偏移量 */
}
 
/* 修改github项目Website样式 */
.github-info-card-description a{
	color:#464AFC; /* 设置字体颜色 */
	margin-left:1rem;/* 偏移量 */
}
 
/* 修改github star样式 */
.github-info-card-bottom{
	color: #0000FF;
}

单项设置（代码）

主题菜单栏设置

设置博客主题导航栏框架

外观 – 菜单

字体

字体可以在字体天下、100font 等网站里免费下载。通过转换网站获得 woff2 格式文件。你可以上传到网站根目录或者某个 CDN 里，然后添加下列额外 CSS（具体方法见下）：

/*设置网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体*/
@font-face{
    font-family:btfFont;
    src: url(fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

以下提供其他几种 url，具体看自己的选择（区别在于加载速度）

https://img.crowya.com/font/FZFWZZAY.woff2
https://cdn.jsdelivr.net/gh/xiemuhou/WPFonts/13.woff2

全页樱花特效及鼠标移动特效

编辑主题页脚 footer.php 文件，在末尾的 </body> 上方添加以下代码（要用那个就注释掉哪个）：

<!--全页特效开始-->
<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://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");
 
            // 鼠标移动的泡泡特效
            // $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/joe/censor10.js");
        }   
    }
</script>
<!--全页特效结束-->

鼠标指针外观

编辑主题页脚 footer.php 文件，在末尾的 </body> 上方添加以下代码：

<!--鼠标指针外观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 结束-->

博客向上滑动背景图片虚化

编辑主题页脚 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 主题点击文章概要也可以进入文章

Argon 主题选项 – 布局，找到自己的文章卡片布局

根据布局选择不同的 preview.php 文件，外观 – 主题文件编辑器 -[template-parts]-[content-preview.php] 找到 class=”post-content”，在后面添加一行代码：

onclick="window.location.href='<?php the_permalink(); ?>'" style="cursor: pointer"

小工具：时间进度条

博客左侧栏有一个时间进度条，显示一年的时间进度，具体做法如下：

下载 progress-wrapper.php 文件。下载地址：Alist; Github。
将 progress-wrapper.php 保存在 WordPress 根目录下的某个位置。比如，我放的位置是./fonts/progress-wrapper.php。
在主题编辑器中找到 sidebar.php 文件。
在 sidebar.php 的 <div id="leftbar_part2" class="widget widget_search card bg-white shadow-sm border-0"> 标签前引用命令：<?php require('./fonts/progress-wrapper.php'); ?>，如图所示：

progress-wrapper.php 文件中有一些参数可根据实际情况进行修改。

友链页面设置

页面 – 添加页面，添加一个简码区块，再里面添加一段代码 [friendlinks/]，如下图：

右下角回到顶部图标修改 – JavaScript 方式

编辑主题页脚 footer.php 文件，添加以下代码：

<!--回顶图标修改-->
<script>
	$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
	$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
	$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
	$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
</script>

说说标题改成脑电波 – JavaScript 方式

编辑主题页脚 footer.php 文件，添加以下代码：

<!--以下内容每次跳转新页面都执行，pjax额外处理-->
<script>
window.pjaxLoaded = function(){
	//说说标题替换为脑电波
	if (window.location.pathname == "/talklove/") {    //talklove根据说说页面的url命名修改
        if ($("#content > div.page-information-card-container > div > div").length > 0) {
            var temp_str = document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g, "脑电波");
            document.querySelector("#content > div.page-information-card-container > div > div").innerHTML = temp_str;
            $("#content > div.page-information-card-container > div > div > p").append('<br>由<a href="https://t.me/xiemuhou" target="_blank">谢幕后</a>频道自动同步');
            $("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
            $("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-bolt");
        }
    }
	//卡片3D效果，包含说说和文章
    if (screen.width >= 768 && !isSafari) {
        VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container"), {
            reverse: true,  // reverse the tilt direction
            max: 8,     // max tilt rotation (degrees)
            startX: 0,      // the starting tilt on the X axis, in degrees.
            startY: 0,      // the starting tilt on the Y axis, in degrees.
            perspective: 1000,   // Transform perspective, the lower the more extreme the tilt gets.
            scale: 1.02,      // 2 = 200%, 1.5 = 150%, etc..
            speed: 600,    // Speed of the enter/exit transition
            transition: false,   // Set a transition on enter/exit.
            axis: "y",    // What axis should be banned. Can be "x", "y", or null
            reset: true,   // If the tilt effect has to be reset on exit.
            easing: "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
            glare: false,  // if it should have a "glare" effect
            "max-glare": 0.8,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
            "glare-prerender": false,  // false = VanillaTilt creates the glare elements for you, otherwise
            // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
            "mouse-event-element": null,   // css-selector or link to HTML-element what will be listen mouse events
            gyroscope: true,   // Boolean to enable/disable device orientation detection,
            gyroscopeMinAngleX: -45,    //陀螺仪最小角度X
            gyroscopeMaxAngleX: 45,     //陀螺仪最大角度X
            gyroscopeMinAngleY: -45,    //陀螺仪最小角度
            gyroscopeMaxAngleY: 45,     //陀螺仪最大角度
        })
    }
}
window.pjaxLoaded();
</script>

首页说说左上角图标修改

主题 – 自定义 – 额外 CSS，添加以下内容：

/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before {
	background-size: 50%;
	background-position: 50% 45%;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0MjM2MjAwNjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzYxLjY2ODMzMiAzMjMuNDM3NzEycTEwLjMxMzE0MyAxMS40MTAyODYgNC4wMjI4NTcgMjUuMTYxMTQzbC0zMDguNTg5NzEyIDY2MS4xMzgyODFxLTcuNDYwNTcxIDE0LjI2Mjg1Ny0yMy45OTA4NTcgMTQuMjYyODU3LTIuMjY3NDI5IDAtNy45NzI1NzEtMS4xNzAyODYtOS43MjgtMi44NTI1NzEtMTQuNTU1NDI4LTEwLjgyNTE0M3QtMi41Ni0xNy4xMTU0MjhsMTEyLjU2Njg1Ni00NjEuNjc3NzExLTIzMi4wMDkxNDEgNTcuNzA5NzE0cS0yLjI2NzQyOSAwLjU4NTE0My02Ljg3NTQyOSAwLjU4NTE0My0xMC4zMTMxNDMgMC0xNy43MDA1NzEtNi4yOTAyODYtMTAuMzEzMTQzLTguNTU3NzE0LTcuNDYwNTcxLTIyLjMwODU3MWwxMTQuODM0Mjg1LTQ3MS40MDU3MTFxMi4yNjc0MjktNy45NzI1NzEgOS4xNDI4NTctMTMuMTY1NzE0dDE2LjAxODI4Ni01LjEybDE4Ny40NjUxNDIgMHExMC44MjUxNDMgMCAxOC4yODU3MTQgNy4xNjh0Ny40NjA1NzEgMTYuODIyODU3cTAgNC41MzQ4NTctMi44NTI1NzEgMTAuMzEzMTQzbC05Ny43MTg4NTYgMjY0LjU1NzcxMiAyMjYuMzAzOTk4LTU2LjAyNzQyOHE0LjUzNDg1Ny0xLjE3MDI4NiA2Ljg3NTQyOS0xLjE3MDI4NiAxMC44MjUxNDMgMCAxOS40NTYgOC41NTc3MTR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyNTI0Ij48L3BhdGg+PC9zdmc+);
}
 
.shuoshuo-preview-container:hover:before {
	background-position: 50% 50%;
	background-size: 60%;
}
 
/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
	border-radius: 10px;
	background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}

点击头像跳转相关页面 – JavaScript 方式

编辑主题页脚 footer.php 文件，添加以下代码：

<!--点击头像名字跳转相关页面-->
<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>

调用一言 API

第一步：在模板函数 (functions.php) 中添加 Hitokoto() 功能函数。

//一言API
function Hitokoto(){
    $url = 'https://v1.hitokoto.cn/?encode=json'; // 不限定内容类型
    // $url = https://v1.hitokoto.cn/?encode=json&c=d'; // 限定内容类型
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查SSL加密算法是否存在
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 6);
    $response = curl_exec($ch);
    if($error=curl_error($ch)){return '欢迎来到我的博客';} // 如果6s内，一言API调用失败则输出这个默认句子
    curl_close($ch);
    $array_data = json_decode($response,true);
    $lxtx_content = $array_data['hitokoto'];  //.'——'.$array_data['from']; // 输出格式：语句——出处
    return $lxtx_content;
}

第二步：在需要显示的地方调用函数，比如边栏 (sidebar.php) 中的公告栏。

<?php if (get_option('argon_sidebar_announcement') != '') { ?>
			<div id="leftbar_announcement" class="card bg-white shadow-sm border-0">
				<div class="leftbar-announcement-body">
					<div class="leftbar-announcement-title text-white" style="text-align: center"><?php _e('一言', 'argon');?></div>
					<div class="leftbar-announcement-content text-white" style="text-align: center"><?php echo get_option('argon_sidebar_announcement'); ?><?php echo Hitokoto(); ?></div>
				</div>
			</div>
		<?php } ?>

效果图如下：

站点概览点击文章跳转到时间轴

编辑主题页脚 footer.php 文件，添加以下代码：

<!--站点概览点击文章跳转到时间轴-->
<script>
window.pjaxLoaded = function(){
	document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").removeAttribute("style");
	document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").setAttribute("href","/pigeonhole/");
}
window.pjaxLoaded();
</script>

小窗口模式下左上角按钮打开左侧栏

编辑主题页脚 footer.php 文件，添加以下代码：

//小窗口模式下左上角按钮打开左侧栏
<script>
document.querySelector("#navbar-main > div > button").removeAttribute("data-target");
document.querySelector("#navbar-main > div > button").setAttribute("id","fabtn_open_sidebar");
</script>

【关于】页面展示网站运行时间

新建一个关于页面，插入一个自定义HTML，输入以下代码：

<script>
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }
</script>
<script type="text/javascript" language="javascript">
    function setTime() {
        // 博客创建时间秒数，时间格式中，月比较特殊，是从0开始的，所以想要显示5月，得写4才行，如下
        var create_time = Math.round(new Date(Date.UTC(2023, 11, 7, 0, 0, 0))
                .getTime() / 1000);
        // 当前时间秒数,增加时区的差异
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + ' 年 ' + currentTime[1] + ' 天 '
                + currentTime[2] + ' 时 ' + currentTime[3] + ' 分 ' + currentTime[4]
                + ' 秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);
</script>
<p>本博客始建于 2023 年 12 月 7 日，距今已艰难运行 <span id="htmer_time"></span>。</p>

博客五彩小图标

Argon 主题内置了 Font Awesome 4 图标库，使用 <i class="fa fa-xxxx"></i> 添加图标。其中 xxxx 为图标名。

如果想要添加颜色也可以使用 <i class="fa fa-xxxx" style="red"></i> ，但是由于图标本身限制，颜色单一，显示效果一般。

于是有了下面的方法，通过图标网站直接复制五颜六色的图标，必须是可直接复制的，不同与下载的 icon 图标，在必应上可以搜索到很多网站，大都差不多，例如：🐢 EmojiTerra 🌍 | Emoji Copy Paste | Get Emoji Meanings

Github Repo 信息卡样式修改

wordpress 自带的 Github Repo 信息卡样式有点丑，所以我做了一点小小的修改。

添加位置：外观-自定义-额外CSS，代码如下：

/* 修改github样式卡的背景颜色 */
.github-info-card {
	/*设置背景颜色*/
	background-color: #A8E9F0 !important;
}
 
/* 修改github图标样式 */
.github-info-card-header a{
	color: red !important;
}
 
/* 修改github用户名和项目名样式 */
.github-info-card-name {
	color:#464AFC;
	font-weight: bold;
	margin-left:1rem;/* 偏移量 */
}
 
/* 修改github项目描述样式 */
.github-info-card-description{
	color: black; /* 设置字体颜色 */
	margin-left:1rem;/* 偏移量 */
}
 
/* 修改github项目Website样式 */
.github-info-card-description a{
	color:#464AFC; /* 设置字体颜色 */
	margin-left:1rem;/* 偏移量 */
}
 
/* 修改github star样式 */
.github-info-card-bottom{
	color: #0000FF;
}

Argon 主题自带设置

Argon主题选项每个设置都值得去设置，让博客更加美观，设置选项下面都有说明，仔细阅读后设置。

最后还可以引入一些特色字体，适网站看起来更高级。

本站所有文章版权遵从深白免责条款，请自行查阅，本站大部分文章为理解后编纂，转载请联系确认。若侵犯了您的合法权益，请联系邮箱：yowapsb@gmail.com.

THE END

WordPress博客：Argon主题的使用与美化

说明

整体代码

CSS 样式

单项设置（代码）

主题菜单栏设置

字体

全页樱花特效及鼠标移动特效

鼠标指针外观

博客向上滑动背景图片虚化

Argon 主题点击文章概要也可以进入文章

小工具：时间进度条

友链页面设置

右下角回到顶部图标修改 – JavaScript 方式

说说标题改成脑电波 – JavaScript 方式

首页说说左上角图标修改

点击头像跳转相关页面 – JavaScript 方式

调用一言 API

站点概览点击文章跳转到时间轴

小窗口模式下左上角按钮打开左侧栏

【关于】页面展示网站运行时间

博客五彩小图标

Github Repo 信息卡样式修改

Argon 主题自带设置

请登录后发表评论

1CDN推荐：一些免费好用的CDN产品推荐

2教程：非小米笔记本电脑安装小米电脑管家实现小米妙享

3emby/jelyfin对接Alist实现阿里云，115，天翼云等网盘直链播放

4搞机教程：小米平板5一键刷入Windows11系统——Mindows工具箱使用教程

5阿里云OSS套CloudFlare储存WordPress博客网站图片并达到免费加速效果

6网站教程：利用宝塔nginx反代自建CDN加速/隐藏源站