本篇文章用到了大量的 Hexo注入器，注入器被用于将静态代码片段注入生成的 HTML 的 <head> 和 <body> 中。更多注入器功能请参考：通过 Hexo 5 注入器为主题添加新功能
背景图片固定
需要使用注入器，在博客根目录下创建 scripts 文件夹并新建 injector.js 文件，然后在你新建的文件中复制以下代码：
1
2
3
| 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/background.js"></script>`);
|
在 /source/js 文件夹中新建 background.js 文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
| document
.querySelector('#web_bg')
.setAttribute('style', `background-image: ${document.querySelector('.banner').style.background.split(' ')[0]};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
document
.querySelector("#banner")
.setAttribute('style', 'background-image: url()')
document
.querySelector("#banner .mask")
.setAttribute('style', 'background-color: rgba(0,0,0,0)')
|
引入即可使用，此功能仅对 Fluid 主题有效。
随机文章跳转
在 scripts 文件夹中新建 random.js 文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
| hexo.extend.generator.register('random', function (locals) {
const config = hexo.config.random || {}
const posts = []
for (const post of locals.posts.data) {
if (post.random !== false) posts.push(post.path)
}
return {
path: config.path || 'random/index.html',
data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`
}
})
|
打开 /random/ 就会随机跳转一篇文章，这个是全局功能，不局限于 Fluid 主题。