原链接：https://blog.hongshaoyv.com/argon-beautification/

为了避免对原主题造成破坏性影响，所做的美化几乎都是按照wordpress和Argon主题提供的方案进行。

只有极个别“改动范围小、直接改源文件会方便很多很多、几乎不可能破坏原主题”的样式美化才改动了主题源文件

---

背景主题色半透明

在不改变主题色的前提下，将卡片等事物的背景透明化（可以自己更改透明度）

第一步，在 自定义->额外css 添加

leftbar_announcement {
background: var(--themecolor-gradient) !important;
}
footer{
background: var(--themecolor-gradient) !important
}

第二步，在 Argon主题选项->脚本 的 页尾脚本添加下面的脚本：

<script>
 
function hexToRgb(hex,op){
let str = hex.slice(1);
let arr;
if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
return `rgb(${arr.join(', ')}, ${op})`;
};
 
let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
let op1 = 0.6
let themeColorRgb = hexToRgb(themeColorHex,op1);
let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')
 
document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)
let op2 = 0.8
let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
colorTint92 += ', '+op2;
document.documentElement.style.setProperty('--color-tint-92',colorTint92)
 
let op3 = 0.65
let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
colorShade90 += ', ' + op3;
document.documentElement.style.setProperty('--color-shade-90',colorShade90)
 
let op4 = 0.8
let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
colorShade86 += ', ' + op4;
document.documentElement.style.setProperty('--color-shade-86',colorShade86)
 
</script>

---

字体

网站字体样式

借鉴跳转

字体来源：可以到 100font.com、字体天下 进行下载

转换字体文件：前往 TTF to WOFF2 将字体文件转换问woff2格式

存放文件：转换后的字体文件，可以可以选则存放到你自己的网站文件目录下面，或者某个CDN当中

修改css：最后只需要在网站的 自定义->额外css 中添加字体样式即可，如下所示

 /*设置网站字体*/
@font-face{ 
font-family:btfFont; 
src: url(https://blog.hongshaoyv.com/font/jyhphy-2.woff2) format('woff2') 
} 
body{ 
font-family:"btfFont" !important 
}

上面的css代码中，我在url中写的是我自己存放字体文件的位置，我将字体文件存放在服务器，并利用nginx定位到它。
我在css中将此字体命名为“btFont”，并将它应用在“body”范围内。

网站标题字体彩色霓虹效果

在 自定义->额外css 中添加：

@keyframes ColdLight {
0%{
background-position: 0%;
}
100%{
background-position: 200%;
}
}
.banner-title{
position: absolute;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size:200%;
animation: ColdLight 3s linear infinite;
color:transparent !important;
-webkit-background-clip: text;
font-weight: 900; /* 加粗核心属性（400正常，700加粗，900最粗） 可选：进一步增强加粗效果 */
text-shadow: 0 0 2px rgba(255,255,255,0.5); /* 轻微文字阴影增强辨识度 */
}
 
.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;
}
.banner-title .banner-title-inner{
position:relative;
background:inherit;
}
.banner-title .banner-subtitle{
position:relative;
background:inherit;
}

---

顶部导航栏

左上角图片大小

.navbar-brand img {
height: 60px;
}

自己设置一个喜欢的值即可

左上角图片和右侧文字的间距

.mr-lg-5, .mx-lg-5 {
margin-right: 1rem !important;
}

自己修改成合适的间距即可

菜单项间距调整

如果你的菜单项不太多（5、6个左右），那么基本不需要额外设置此样式；反之，你可能会因为菜单项过多而造成拥挤，建议手动设置间距。

在 自定义->额外css 中添加：

.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}

自己调到合适的值即可

---

banner下方小箭头滚动效果

这是目前唯一一个改动了主题源文件的样式美化

打开 外观->主题文件编辑器

在右侧 主题文件 处找到 主题页眉（header.php文件）

在第 439 行找到：

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

将这个div代码块中的内容（也就是原本的<i>标签）用下面的代码替换：

<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 添加如下代码：

@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;
}