Fluid全屏背景

前言

本期美化同样贯彻了前几期美化的原则：无侵入式美化，即不修改主题的源代码，只通过修改配置文件、自定义样式以及Hexo注入器来实现美化。前几期的美化可以点击下方的链接卡片查看。

在本期中，我们将为Fluid主题实现全屏背景功能，提升博客的视觉效果。

实现

首先，在博客的 scripts/injector.js 文件中添加以下代码，以在页面的 <body> 开始位置注入一个全屏背景容器：

hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);

接着，我们需要为这个全屏背景容器添加相应的样式。为此，我们在博客的 source/css 目录下创建一个名为 Background.css 的 CSS 文件，代码如下：

#web_bg {
    filter: brightness(0.7);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#toc, .category-list {
    padding: 20px;
    top: 4rem;
    border-radius: 10px;
}

在上面的样式中，我们为 #web_bg 容器设置了固定定位，使其覆盖整个视口，并通过 z-index: -1 将其置于其他内容的下方。我们还设置了背景图片的大小、位置和重复方式，以确保背景图片能够正确显示。
同时为了保证目录和分类列表在全屏背景下的可读性，我们为 #toc 和 .category-list 添加了内边距、顶部位置和圆角样式，以便后续通过 JavaScript 动态添加模糊效果。

最后，在博客的 source/js 目录下创建一个名为 Background.js 的 JavaScript 文件，代码如下：

document.querySelector('#web_bg').style.backgroundImage = `${document.querySelector('.banner').style.background.split(' ')[0]}`;
document.querySelector("#banner").style.background = 'url()'
document.querySelector("#banner .mask").style.backgroundColor = 'rgba(0,0,0,0)'
document.getElementById('toggle-background-mode-icon').className = "fa-solid fa-toggle-on";
['#toc', '.category-list'].forEach(selector => {
    if (document.querySelector(selector)) {
        document.querySelector(selector).style.backgroundColor = "var(--board-bg-color)";
    }
});

if (localStorage.getItem('BackgroundMode') === 'false' || !localStorage.getItem('BackgroundMode') || window.innerWidth < window.innerHeight) {
    document.querySelector("#banner").style.background = document.querySelector('#web_bg').style.backgroundImage + " center center / cover no-repeat";
    document.querySelector('#web_bg').style.backgroundImage = 'url()';
    document.querySelector("#banner .mask").style.backgroundColor = 'rgba(0,0,0,0.3)';
    document.getElementById('toggle-background-mode-icon').className = "fa-solid fa-toggle-off";
    ['#toc', '.category-list'].forEach(selector => {
        if (document.querySelector(selector)) {
            document.querySelector(selector).style.removeProperty('background-color');
        }
    });
    localStorage.setItem('BackgroundMode', 'false');
}

在上面的代码中，我们首先获取当前页面的 banner 背景图片，并将其设置为 #web_bg 容器的背景图片。然后，我们清除 banner 的背景图片，并将其遮罩层的背景颜色设置为透明，以确保全屏背景能够显示出来。
接着，我们检查 localStorage 中是否存在 BackgroundMode 键，并根据窗口的宽高比来决定是否显示全屏背景。如果 BackgroundMode 的值为 'false' 或不存在，我们将 banner 的背景图片恢复为原来的图片，并将 #web_bg 的背景图片清除，同时将遮罩层的背景颜色设置为半透明黑色，以确保内容的可读性。
同时，我们还为目录和分类列表动态添加或移除背景颜色，以确保其在不同背景模式下的可读性。

在实现了上述代码后，我们需要确保它在页面加载时被执行。为此，我们需要在博客的 _config.fluid.yml 文件中添加以下配置：

custom_js:
  - /js/Background.js # 全屏背景
custom_css:
  - /css/Background.css # 全屏背景样式

需要注意的是，如果在此前的随机背景美化中已经添加了 RandomBanner.js，则在 _config.fluid.yml 中的 custom_js 配置项中需要注意顺序，确保 Background.js 在 RandomBanner.js 之后加载，以便全屏背景能够正确获取到更新后的 banner 背景图片。

Fluid主题随机背景美化

最后的最后，将打开/关闭全屏背景的代码添加到此前自定义的右键菜单中即可。具体方法已更新至往期文章。

Fluid自定义右键菜单