基于hexo的fluid主题的魔改汇总

前言

所谓魔改，就是与主题不同，一旦主题已经被采用或者被实现，则会被划掉，而且魔改初心是使用无侵入式的方式修改——即不修改源码，而是使用注入器的方式。这样的话主题升级比较容易！

背景固定

效果如背景所示，这种效果贯穿着整个博客。具体做法如下：使用注入器(如果没有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}styles/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);

在styles文件夹中新增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;
}

总结

如有疑问、建议或者想知道本博客魔改的地方，欢迎在下面留言！