基于hexo的fluid主题的背景固定

背景固定效果需要使用注入器，因此需要将hexo升至5.0版本以上

效果如本页所示，这种效果贯穿着整个博客。具体做法如下：使用注入器(如果没有injector.js文件，则在scripts文件夹下新建injector.js)，在injector.js中写下这些代码

// 全屏背景的需要导入这些js
const { root: siteRoot = "/" } = 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" />
  `
);

在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);

在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;
}

注意确认保存css的文件夹名称是css或是style，如果是style则需更改injector.js的导入文件地址