大家好，我是Sea。今天这一期是关于我这个主题相关美化、以及相关插件的使用教程。

1.argon主题

可以自行前往GitHub-argon主题进行下载，或者通过下面的网盘链接下载。

链接：https://pan.baidu.com/s/1ORtrl-gE3Jfw-j5rsM7zNQ 提取码：fygi

2.字体、鼠标特效

2.1字体样式

网站字体样式。字体可以通过100font.com、字体天下选择自己喜欢的字体样式进行下载。
字体格式转换。这里需要注意的是下载下来的字体格式默认是.zip，需要通过TTF to WOFF2 转换成woff2格式网站才能去调用。
字体存放。存放在网站根目录下或者OSS对象存储中。
通过CSS代码去调用即可。

/*字体*/
@font-face {
font-family: myFont;
src:url(https://你的网站域名/这里放你自己的字体目录) format('woff2');
font-display:swap;
}
body,
.nav-link-inner--text {
font-family: myFont;
}
.navbar-brand {
font-size: 1.25rem;
font-weight: 100;
margin-right: 2rem;
padding-bottom: .1rem;
}

2.2鼠标特效

鼠标特效可以通过这位博主Docker 系列 WordPress 系列特效 – Bensz (hwb0307.com)去设置，已经写的很详细了。

3.css样式

通过设置css样式，将网站整体布局进行微调。外观–自定义–额外css，我这里是引用鸦鸦调试好的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;
}

/*鼠标样式修改*/
body {
cursor: url(https://img.crowya.com/wp-content/uploads/2023/05/mouse32.ico), auto;
}

/*首页说说左上角图标修改*/
.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%;
}

/*回顶图标放大*/
#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: myFont;
src:url(https://填写自己的域名/存放路径/666.woff2) format('woff2');
font-display: swap;
}

body,
.nav-link-inner--text {
font-family: myFont;
}

.navbar-brand {
font-size: 1.25rem;
font-weight: 100;
margin-right: 2rem;
padding-bottom: .1rem;
}

/*左侧栏头像自动缩放*/
#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);
}
}

/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
border-radius: 10px;
background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}

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

4.左侧菜单栏显示年度倒计时

wordpress外观选项–小工具–位置选择左侧栏小工具–新增“简码”，填入下面的代码

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

5.顶部导航菜单调用小图标

由于Argon 主题内置了 Font Awesome 4 图标库，可以通过查找图标库，找到对应图标代码去调用。

官方说明文档：https://argon-docs.solstice23.top/#/icon

6.插件合集

6.1左侧菜单栏功能区显示访问数据

通过安装“WP Statistics”插件实现。安装好插件后，在wordpress外观选项–小工具–位置选择左侧栏小工具–新增“旧版小工具”。

6.2邮件发送

通过安装“WP Mail SMTP”插件实现。安装好这个插件后，可以选择启动安装指导快速进行配置。需要配置

邮件程序（没有显示的类型选择其他）发件人、发件人名称
SMTP主机、端口、SMTP用户名密码

举个栗子，我这里使用的是QQ邮箱，相关设置方法如下：

首先需要进入到QQ邮箱后台设置–账号 SMTP服务选择开启。

点击管理服务进入至管理界面，安全服务–生成授权码

用户名/帐户： 你的QQ邮箱完整的地址

密码： 生成的授权码

电子邮件地址： 你的QQ邮箱的完整邮件地址

接收邮件服务器： imap.qq.com，使用SSL，端口号993

发送邮件服务器： smtp.qq.com，使用SSL，端口号465或587

附：官方设置说明设置说明1、设置说明2

6.3评论显示IP归属地

我这里使用的是鸦鸦做的插件，需要的可以直接通过鸦鸦的GitHub主页下载地址去下载使用。

这里需要注意的一点是，安装好插件后；需要启用argon 主题设置里 – 评论 – 评论区 – 评论者 UA 显示，不然会显示不成功哦。

7.相关链接

本文可能涉及的代码出自以下博客文章，十分感谢下面各位大佬的分享，更多美化请前往博主大大的主页查询使用。

鸦鸦：https://crowya.com

Echo：https://www.liveout.cn

Bensz：https://blognas.hwb0307.com

Argon 主题作者博客：solstice23 – Blog

Argon 主题使用文档：Argon Theme Docs (solstice23.top)

8.一些话

希望这篇美化文章能够帮助到大家，如果转载请标注原文地址哦，万分感谢！