哈咯各位读者，我是真境。太久没更新博客了，想大伙了！
最近在朋友们的博客里逛着，突然发觉大伙的博客都挺好看的，刚好我博客在几年前搭建完套上Argon主题之后再也没有动过了！
正巧找这个机会来稍微美化下博客，算是多年以来的维护吧！
一、字体优化
嗯…是的，本站一直以来都用的都是默认的字体，所以第一个的改造计划就是全局更换字体！对于字体的选择，我第一时间就想到了 Mi Sans 和 OPPO Sans，两个都是国产优秀的字体。至于选择了谁，大家也能看出来：Mi Sans
当我去官方下载字体包的时候，字体包竟然达到了惊人的5MB：
这对博客的访问速度不友好啊…毕竟我们服务器就只有5Mbps的带宽呀…到时候干上去那网站的访问速度不得慢得要死了！
后来我在 Github 发现了一个针对 Mi Sans 的一个分片字体包：misans-webfont
更巧的是，竟然有第三方的文件托管，当然如果自己有的话那就更完美了！
https://cdn.jsdelivr.net/npm/misans-webfont/misans-style.css
# 更快的响应速度
https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans-style.css
https://npm.webcache.cn/misans-webfont/misans-style.css接下来我们就直接使用在我们网站上了！打开后台的“外观”->“自定义”->“额外的CSS”
将以下的代码直接上传，并提交：
@import url('https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans-style.css');
body {
font-family: "MiSans Normal", sans-serif;
font-weight: bold;
}你可以更改字体的粗细和内容，比如说我选择了 MiSans的 Normal，字体宽度选择了 thin。当你做完更改的时候右侧的实时预览还可以看。
二、个性卡片
这是我原来的个性卡片：
是不是感觉有点太简单了，而且B站和Github的跳转链接也太过于生草了吧！所以我翻了翻互联网，刚好看见了一个博客：@七梦的小窝，感谢大佬的分享！
1、头像放大
这边的话修改了鼠标碰到头像的动画（放大）：
/* 头像 */
#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);
}原来七梦大佬是变大+变亮的，但是我觉得变亮有种曝光的感觉：
所以我改成了鼠标放置在头像上仅放大
2、信息卡
前面说过，Github和B站这两个的卡片太过于生草，于是我打算丢到Link部分并且补上对应的ICONS！
直接修改原版源码，到“主题文件编辑器”来进行修改：
大致的插入位置：
直接插入以下内容：
<style>
/* 友情链接列表保持居中 */
.site-friend-links-ul {
padding-left: 0;
text-align: center;
}
.site-friend-links-item {
display: flex;
justify-content: center;
overflow: visible;
}
/* 链接本身只包住 icon + 文字 */
.site-friend-links-item a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
max-width: max-content;
text-decoration: none;
transform-origin: center;
transition:
transform 0.28s ease,
color 0.28s ease;
}
/* 下划线，只覆盖 icon + 文字 */
.site-friend-links-item a::after {
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 999px;
content: "";
transform: scaleX(0);
transform-origin: center;
transition: transform 0.28s ease;
}
/* 图标动画 */
.site-friend-links-item i {
transition: transform 0.28s ease;
}
/* 鼠标悬停：整体放大 */
.site-friend-links-item a:hover {
color: #6f42c1;
transform: scale(1.1);
}
.site-friend-links-item a:hover::after {
transform: scaleX(1);
}
.site-friend-links-item a:hover i {
transform: scale(1.18) rotate(-6deg);
}
/* 用户开启减少动画时，关闭动画 */
@media (prefers-reduced-motion: reduce) {
.site-friend-links-item a,
.site-friend-links-item a::after,
.site-friend-links-item i {
transition: none;
}
}
</style>
<!-- 侧栏友情链接 -->
<div class="site-friend-links">
<div class="site-friend-links-title">
<i class="fa fa-fw fa-link"></i> 链接
</div>
<ul class="site-friend-links-ul">
<li class="site-friend-links-item">
<a
href="https://space.bilibili.com/398278233"
rel="noopener noreferrer"
target="_blank"
>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
B站
</a>
</li>
<li class="site-friend-links-item">
<a
href="https://github.com/ZherKing"
rel="noopener noreferrer"
target="_blank"
>
<i class="fa fa-github" aria-hidden="true"></i>
GitHub
</a>
</li>
<li class="site-friend-links-item">
<a
href="https://status.mclzyun.com/"
rel="noopener noreferrer"
target="_blank"
>
<i class="fa fa-heartbeat" aria-hidden="true"></i>
服务器监控
</a>
</li>
</ul>
</div>是的，我删除了七梦之前的网易云，额外增加了我自己想要的东西。所以大家看着改咯！另外的话新增了鼠标放在链接上放大的效果：
三、顶部导航栏
之前的顶部菜单栏还是太草率了！：
就几个emoji和文字的组合，而且字又比较小
我们先来到“外观” -> “菜单” 来进行设置head：
找到head，对里面的内容进行修改：
代码内容：
<i class="fa fa-home"></i> 首页
<i class="fa fa-commenting" aria-hidden="true"></i>留言板
<i class="fa fa-link"></i> 友情链接改完之后你会觉得好像字体有点小小的，震撼感不是很强：
所以可以参考七梦的额外CSS来增大文字内容：
/*顶栏菜单*/
.navbar-nav .nav-link {
font-size: 1.2rem;
font-family:"MiSans" !important
}
.nav-link-inner--text {
/*顶栏菜单字体大小*/
font-size: 1.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;
}
/*顶栏图标*/
.navbar-brand {
font-family:"MiSans";
font-size: 1.25rem;
/*顶栏图标边界微调*/
margin-right: 0rem; /*左右偏移*/
padding-bottom: 0.3rem;
}
.navbar-brand img {
/* 图片高度*/
height: 24px;
}顺便改一下文章标题和横幅字体大小：
/*标题和横幅字体大小*/
.banner-title {
font-size: 2.4em;
}
.banner-subtitle{
font-size: 18px;
}四、留言板
我的博客一直都没有留言板的，大伙聊天总不能在文章里吧，于是我补了一个：
在后台的“页面”->“添加页面” 就可以添加留言板了！
博客的改造就先到这里吧！后期有调整的话会在本文更新，感谢各位读者的阅读！
