关于 Fluid 主题做的一点美化

前言

因为觉得 Fluid 看起来总感觉少了点什么东西，于是这个周末就花了点时间做了些许美化，提前感谢提供美化方案的大佬们！

具体方案

准备工作

在 Hexo 根目录下的source文件夹中创建css和js两个文件夹，之后会用上。

图片模糊淡出效果

在js文件夹中创建blurpicload.js，内容如下：

document.addEventListener("DOMContentLoaded", () => {
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1,
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            const img = entry.target;

            if (entry.isIntersecting) {
                if (img.complete && img.naturalWidth > 0) {
                    img.classList.add('loaded');
                } else {
                    img.addEventListener('load', () => img.classList.add('loaded'));
                }
                observer.unobserve(img);
            }
        });
    }, observerOptions);

    const images = document.querySelectorAll('.post-content img, .container img');
    images.forEach((img) => {
        observer.observe(img);
    });
});

在css文件夹中创建blurpicload.js，内容如下：

.post-content img, 
.container img {
    filter: blur(5px);
    opacity: 0;
    transition: filter 1s ease,opacity 1s ease;
}

.post-content img.loaded, 
.container img.loaded {
    filter: blur(0);
    opacity: 1;
}

#comments img {
    filter: none;
    opacity: 1;
}

另外推荐把默认的懒加载动画换成一张透明的 SVG 图片，而不用默认的loading.gif

待补完