书接上回，咱换到Argon这个主题后，有些东西尚未实现。比如：
本来依旧想采用衬线体，但是尝试过后，衬线体的浏览体验在Argon主题下并没有无衬线体好，达不到Mirages中的效果，于是就没有使用。
这次就来做一些小调整。
启用衬线体
我个人更喜欢衬线体的阅读体验，加之曾在Mirages主题中使用的也是衬线体，故想回到之前熟悉的样子。
虽然Argon的主题设置内有启用衬线体，但是总体来说不尽人意。主要问题还是打开衬线体的选项后，会将全局的文字全部替换成衬线体，如此一来，总让我觉得页面看上去不是那么得“干净”。如顶部和右导航栏、文章题目、文章发布时间、评论数、字数这些文字，还是无衬线体看起来更合适。
遂放弃Argon自带的切换字体功能，自己写CSS好了。顺带着调整了字体大小。
此外，调整了主页Banner标题、副标题（站点名称和介绍）的字体以及大小。
引用了Google Fonts。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap" rel="stylesheet">
<style>
.post p {
font-size: 1.125rem !important;
font-family: 'Noto Serif SC', serif;
}
.post-full .post-title,.banner-container {
font-family: 'Noto Serif SC', serif;
}
.banner-title {
font-size: 2rem !important;
}
.banner-subtitle {
font-size: 1.125rem !important;
}
</style>Aplayer深色模式
虽然页面支持跟随系统使用深色模式，但是音乐播放器插件的Aplayer播放器并没有深色模式。为了改善深色模式下的整体性，只好再自己动手啦。
看了下Argon主题切换为深色模式后，会给<html>加一个darkmode的class。Argon主题本身引用了JQuery，省事许多了。
if ($('html').hasClass('darkmode')) {
$('.aplayer').css('background', 'rgb(53,53,53)')
}
背景图片模糊
之前在Argon主题的Issue中看到这样的提议：
作者回复：
虽然在最新版本的主题中并未加入这个特性，但是在浏览作者的博客时，发现已经实现（初步实现？）了这个效果。
（然后我就把这个效果扒过来了）
后知后觉，发这个Issue的人竟然是杂话铺子的友联中的小伙伴Aki。
当然，除了上述的改变外，更显而易见的变化是我把主题色从#E8BAC2更改为#6495AB了。
为Argon主题添加模糊加载的Lazyload效果
Argon自带Lazyload，但是觉得过渡动画不够优雅。而且在我目前这种多列瀑布流的页面样式下，使用Lazyload图片加载完成过渡效果后，还会出现奇怪的文章块重叠的bug。
决定继续整活，自己改一个图像加载时的渐变和模糊效果。
下述内容存在已知问题： 文章内图片原图加载完成后，懒加载过渡有时会出现白色闪烁问题。
这种lazyload样式是受原来使用过的Typecho平台主题Mirages启发。如果你想使用这种lazyload样式，请务必使用腾讯云COS、阿里云OOS等带有图片处理功能的云存储服务。其原理和加载过程如下：
- 利用云存储的图片处理功能，先生成一个体积非常小的占位图（通常体积不会超过1kb）。使用CSS对占位图使用模糊滤镜。
- 等到原图加载完毕后，再替换掉占位图和CSS的模糊滤镜。
不必担心，替换掉占位图的操作是由JQuery的lazyload功能自动实现。
另外，当你更新主题时，你对主题文件所作的更改会被覆盖。请注意备份。如果你使用了Argon主题的CDN功能，该功能会使用CDN服务加载你的主题文件，而非使用你服务器中的文件。所以，如果想要以下更改生效，请关闭CDN功能。
不是教程，几乎无参考价值。
style.css
2289行，添加transition
.related-post-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: all ease 1s;
}2291行，添加推荐文章图片的lazyload样式
.related-post-thumbnail.lazyload.lazyload-loaded {
opacity: 1 !important;
}1922~1931，添加特色图片和文章内图片lazyload样式
.fancybox-wrapper .lazyload-loaded {
/* opacity: 1 !important; */
filter: blur(0px) !important;
transform: scale(1) !important;
}
.post-thumbnail.lazyload.lazyload-loaded {
/* opacity: 1 !important; */
filter: blur(0px) !important;
transform: scale(1) !important;
}single.php
98行，添加推荐文章图片lazyload样式
echo '<img class="related-post-thumbnail lazyload" src="" style="opacity: 0;" data-original="' . argon_get_post_thumbnail(get_the_ID()) . '"/>';functions.php
1907行，添加文章内图片lazyload样式
$content = preg_replace('/<img(.*?)src=[\'"](.*?)[\'"](.*?)((\/>)|(<\/img>))/i',"<img class=\"lazyload " . $lazyload_loading_style . "\" src=\"$2?x-oss-process=image/resize,w_64/quality,Q_75/format,webp\" \$1data-original=\"\$2!yuuwebp\" style=\"filter: blur(20px);transform: scale(1.04);\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC\"\$3$4" , $content);此处的$2是图片链接的变量。?x-oss-process=image/resize,w_64/quality,Q_75/format,webp是利用阿里云OSS的图片处理功能，这段代码可以生成一个质量是原图的75%、尺寸被等比缩放到宽度为64px、格式为WebP的图像，用于占位图。以本文章头图为例，生成的图片只有688字节的大小。!yuuwebp是我的自定义图片处理样式，它能让图片转换为WebP格式，也就是我的lazyload中的“原图”也是被处理过的。
如果你想使用该样式，你需要做的事情：
- 务必使用腾讯云COS、阿里云OOS等带有图片处理功能的云存储服务。否则不要进行下一步。
- 将
?x-oss-process=image/resize,w_64/quality,Q_75/format,webp替换成符合你使用的云存储服务的图片处理代码。如果你使用的是阿里云OSS，可以不必更改。 - 删除
!yuuwebp这段代码。如果你也想像我一样让“原图”也被压缩后加载，请将!yuuwebp替换为你希望的图片处理代码。例如?x-oss-process=image/quality,q_75/format,webp，它能够在图片加载时，加载一张是原图质量75%的WebP格式的图片。
content-preview-3.php
7行，添加首页文章特色图片lazyload样式
由于我是用的主题样式是瀑布流（2列），所以修改content-preview-3.php这个文件。如果你使用的是其他的样式，请自行修改对应你的样式的php文件。
echo "<img class='post-thumbnail lazyload' src='" . $thumbnail_url . "?x-oss-process=image/resize,w_64/quality,Q_75' data-original='" . $thumbnail_url . "!yuuwebp' alt='' style='filter: blur(20px);transform: scale(1.04);'></img>";
附：我用VPS做了些什么
虽然本章已经不属于装修杂话铺子的内容，但是作为网页得以在Internet存在的根基——计算机（服务器），那么对服务器的折腾也算得上是装修杂话铺子吧……
不知为何突然想起了有着守序善良的那种阵营九宫格。
万事皆有起因。夏日的那一天，我们在那片天空之上，改变了世界的容貌。，和mikusa的对话。
总……总之就是这样子的过程啦XD
经历了许久学习和操作，终于弄好了。从几年前第一次接触虚拟主机和服务器，一直都用的是cPanel、宝塔面板这样的可视化工具，现在倒是脱离了这些东西了。主要参考Docker LNMP这个项目。
所以现在配置好docker-compose.yml后，就能体验随便搬家随时跑路的快感了！网站数据备份用Cron+备份脚本文件+Rclone，定时自动打包网站根目录+数据库并上传到 Google Drive，删库跑路变得更方便了（不是）（以后有空可以水一篇出来）
RSSHub + flowerss bot + Nazurin
RSS是好文明。
RSSHub固然可以使用公用的路由，但是涉及到Pixiv个人关注的新作品就得自建了。
flowerss bot是一个支持应用内即时预览的 Telegram RSS Bot。完全可以使用公共的服务，我自建一个纯粹图个好玩。
Nazurin是个好东西！总的来说就是一个帮助你收集、保存二次元图片的自动化工作流的 Telegram 机器人。总之更多信息去看项目介绍。起初Nazurin是白嫖Heroku来部署的。但是在今年八月份Heroku一纸令下，将要于十一月砍掉免费服务，遂决定在服务器上部署一个。不过作者已经找到另一个替代平台了。
以上就是装修日志·其二。
文章主图：Novelance-璃月港の夜
网站主题现在看着很棒了！我当时提完 issue 后因为懒当时也比较忙就没深入学 CSS，索性直接换了个主题（但在我关了很多功能的情况下其实还是很臃肿）
嘛，“得益”于WordPress平台丰富的功能，这平台上的主题应该是避免不了“臃肿”了，我用过的几个主题的设置功能都非常多，自定义内容丰富。
虽然你说你的主题臃肿，但页面看起来还是十分简洁的呀。比我这图片背景+各种模糊的风格要清爽的多❤️。
实际上是因为我关了很多不需要的功能，而代码本身执行的还是能明显感受到迟滞感。而且就文本本身功能来说其实不如Argon，很多文字效果（比如黑幕、删除线）还是要靠html。
没有时间经常维护后，才发现顺手好写内容的才是正道。现在用的主题其实在移动端首页标题字体因为调整了大小会上下有些显示不完整，而且像评论区一些引导语言过于卖萌…改完php都会在下次更新被覆盖掉，主题自带的图片灯箱还有加载问题，字体显示也不是很理想（尤其是双引号，即便把汉字和英文做了字体区分，仍然会出现双引号按英文渲染的情况）。Argon在写东西这方面可以说是相当省心了，等背景模糊搞定我估计就换回来了
这么说起来我改的lazyload效果也是通过改php文件实现的，更新后也得重新改……不过Argon作者提到过用“子主题”的方式魔改主题，等有空的话我就去了解一下是怎么实现的吧。
子主题确实能直接可以保留function.php好像，我主要还是改了其他php哈哈哈哈哈。顺便请问下你的背景模糊，还有正文题目头图模糊是怎么做的？
背景模糊可以去作者的博客，查看网页源代码，目前位于304~323行处。
题目头图模糊则是通过选择器
.post-full .post-thumbnail来实现。感谢。但是还有些问题，以及发现了你网站的小bug，为了发图方便我就电报联系你了
解决了！但是从十几分钟前开始我的电报突然不能给你发消息，一直发送失败，其他聊天都正常，不过能看到你发的消息，所以已经解决了。多谢！
使用的主题很不错！导航栏的高斯模糊和整体动画看着很舒服:D
嘿嘿，我很喜欢这个主题，应该会一直用下去
正文使用衬线体，文艺的书香一下子就扩散开了呢。
虽然咱用hexo，但是也有租vps，而且搭建了一些服务的，
包括魔法上网咱也有个魔法上网但是这两天连不上了，应该是端口被封了?
挂了，刚刚抢修完（泣）
fonts.googleapis.com 在墙内不是无法使用吗？来自墙内用户访问时不会有问题？
嘛，我测试了一下是可以正常访问的，目前应该是没有问题。
nazurin看起来不错，回头部署一个玩玩
搞起来搞起来~