图像暗黑文打开博客页面将会是种怎样的体验
2023-12-20 02:04:56
大家知道，可以用HEXO+GITHUB搭建免费且美观的博客，不过在搭建博客之前总得找一个自己满意的主题。以前用过很多主题，个人的推荐有next、maupassant、Pisces。
最近发现了一个十分具有特色的主题：Minimal Blog，之所以称它特色主要是因为主页中能看到一段图片暗黑文的效果。
这就是Hexo 博客中被隐藏起来的暗黑文字，接下来就来看看他是如何实现的吧。
在 Minimal Blog 主题目录中有个 _config.yml 文件，打开它，找到 image_invert 选项并设置为true，把所有的背景图片换成黑色，即可实现这一效果。
不同的黑色背景图会有不同的效果，个人觉得星空、海洋等图相对效果较佳。
需要注意的是，修改成 true 之后，会出现背景图闪动的问题，这是由于 LazyLoad 延迟加载造成的。这并不是主题的 BUG，而是这个插件导致的。
Hexo 的 LazyLoad 延迟加载脚本，因为该脚本里的 loading=”lazy” 没写在 img 标签内，而是通过 JS 来添加，而脚本的触发是在页面加载完成后，因此 img 标签的 src 是空的，这时会被浏览器显示出来。但随后 JS 加载完成，src 替换，再瞬间消失，整个过程如果肉眼观察就是闪动。
当时我发现主题图片闪动时，在网上查了一下如何解决，目前找的比较多的有两种：
-
增加一个自执行函数，在图片标签加载之前修改标签的属性，防止闪动
-
使用另一个类似 lazyload 插件：GitHub - jchui/lazyloadxt: Native lazyload support for the modern web
<script>
(function() {
document.querySelectorAll("img[loading='lazy']").forEach(img => {
img.removeAttribute('loading');
img.style.visibility = 'hidden';
});
})();
</script>
我觉得这种方式既麻烦又没多大用，而且在该主题中根本起不了作用。
<script src="https://cdn.jsdelivr.net/npm/lazyloadxt@2.0.0/dist/lazyloadxt.min.js" referrerpolicy="origin"></script>
<script>
lazyloadxt.onload(() => {
document.querySelectorAll("img[loading='lazy']").forEach(img => {
img.classList.remove('loading');
img.style.visibility = 'visible';
});
});
</script>
这个方式也可以，也是没有用，而且还增加了 js 的加载。
由于主题自带的图片懒加载效果不太好，个人喜欢自己加载，于是找了一个 GitHub 上的小工具：lazyestload.js，它能去除原来的延迟加载，实现更快的图片加载速度。
把这个 js 放在 head 中，即可去除掉延迟加载。
<script src="./js/lazyestload.js"></script>
当然，你也可以加一个 loading 动画，将原来的延迟加载改成自己的延迟加载。
在主题里，我们可以找到一个主题美化的插件：hexo-theme-next-beautify。
安装并启动该插件，然后在主题根目录中找到 layouts 目录，将其中的 footer.ejs 备份到主题目录中，修改 footer.ejs，替换其中的加载 js 的代码。
<script src="https://fastly.jsdelivr.net/gh/DIYgod/hexo-theme-next-beautify@v1.1.0/main.js"></script>
好了，我们美化效果就安装完毕了，具体美化样式请到 Minimal Blog 的演示中查看。
