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

本文最后更新于:15 天前

前言

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

背景固定

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

1
2
3
4
5
6
7
8
9
// 全屏背景的需要导入这些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文件,内容如下:

1
2
3
4
5
6
7
8
9
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文件,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
#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的fluid主题的魔改汇总
https://www.aigisss.com/blog/posts/1563abd8.html
作者
Hai
发布于
2021年4月24日
更新于
2022年6月10日
许可协议