【Hexo】Hexo基于Fluid主题固定背景图片

本文基于Fluid主题，设置固定背景。

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

接下来创建三个文件

一、创建 injector.js 文件

进入 ~/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" />
  `
);

二、创建 backgroundize.js 文件

进入 ~/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);

三、创建 backgroundize.css 文件

进入 ~/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 查看效果吧。满足预期，即可推送至服务器部署。