为了避免对原主题造成破坏性影响，所做的美化几乎都是按照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>如何修改透明度（透明度变量说明）：
- op1——“白天”状态主题色透明度
- op2——“白天”状态卡片颜色透明度
- op3——“夜间”状态卡片颜色透明度
- op4——“夜间”状态主题色透明度
动手改一下4个op变量的数值试一试，你会明白他们的含义的！
字体
网站字体样式
- 字体来源：可以到 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;
}
.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; }
便携性优化
点击文章摘要可以跳转文章详情
点击文章封面可以跳转文章详情
内容有点多，后面慢慢补
第二步，在 Argon主题选项->脚本 的 页尾脚本 添加下面的脚本：不知道在哪里 麻烦告知一下
已经解决
解决了就好👌，最近没注意消息(:з」∠)
大佬，你博客首页进入能完全显示背景，下滑才到博客内容，这个怎么搞的。
全屏，banel
我这个是使用了Argon主题模版。
如果你想自己实现一个，原理其实非常简单（前提是有一定的前端代码基础）：
你们背景图片都是哪里搞得？ 我的放进去不是自动拉伸就是糊的一批
我的背景图是平时保存的图片，担心拉伸的话，你可以直接按照屏幕比例裁剪图片
OK 还有一个问题 站主你写写代码得快的放大效果怎么做的？
没太明白你的意思，详细一点？
博主，你顶部导航栏上的子菜单卡片是怎么弄成透明的呀？就是比如指针停留在教程的时候，下面的子菜单卡片，我的是纯白色底的不是透明的
我没有刻意的改变过子菜单卡片的透明度，本文提到的“背景主题色半透明”是我唯一改变博客主题透明度的地方，所以多半是子菜单卡片继承了其中的透明度改动。😳
感谢佬的回答~已经解决啦，原来是我透明度拉太低了导致看起来不透明哈哈哈
老哥 这个用来展示代码的是什么？
博主，请问字体如何更改？先谢谢了
还有，请问这个显示浏览器的插件是什么？谢谢啦
这个在Argon主题选项中：评论->评论区->评论者 UA 显示，选择“平台+浏览器”
谢谢了！
字体样式已经修改已经加到文章中，之前遗漏了|´・ω・)ノ
大佬好，关于这个背景透明的，我用了你给的脚本，效果达到了，但是公告栏出了点问题，就是在夜间模式公告栏颜色没有从主题色变回深灰色，还是日间模式的主题色，而把脚本删了就不会这样了。
这有点不太好定位问题，检查一下代码copy的正确性？或者回忆一下是否此前对相关样式做过其他修改，导致“覆盖”？
你好，请问你的问题解决了没，我也出现了这种情况
左侧个人信息栏的文章超链接怎么做的感谢