Hexo主题Fluid设置固定背景

Fluid 主题挺好看的，但是官方文档上说不支持固定背景（fixed）

实际上有些 banner 图就是要固定背景，才有那种沉浸的美感：tsuiraku

我对前端一窍不通，询问过 tsuiraku 以后追溯到一篇魔改的教程：基于hexo的fluid主题的魔改汇总

基于这篇文章自己动手试了下，确实可行。

本人是采用 release 包（hexo-theme-fluid-1.8.12）解压到 themes 目录的方式安装的 fluid，本地目录如图：

博客的根目录为 ~/blog，主题解压位置为 ~/blog/themes/fluid

接下来创建三个文件

• 进入 ~/blog/themes/fluid/scripts 创建 injector.js 文件

// 全屏背景的需要导入这些js
const { root: siteRoot = "/themes/fluid/source/" } = hexo.config;
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register(
  "body_end",
  `<script src="${siteRoot}js/backgroundize.js"></script>
  <link defer rel="stylesheet" href="${siteRoot}css/backgroundize.css" />
  `
);

• 进入 ~/blog/themes/fluid/source/js 创建 backgroundize.js 文件

const bannerContainer = $("#banner");
const viewBg = $("#web_bg");
const bannerMask = $("#banner .mask");
const bg = $(bannerContainer).css("background-image");
$(viewBg).css("background-image", bg);
$(bannerContainer).css("background-image", "url()");
const color = $(bannerMask).css("background-color");
$(bannerMask).css("background-color", `rgba(0,0,0,0)`);
$(viewBg).css("background-color", color);

• 进入 ~/blog/themes/fluid/source/css 创建 backgroundize.css 文件

#web_bg {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background-attachment: local;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: repeat;
  }

之后执行 hexo clean 和 hexo server查看效果吧。