Hexo-Fluid主题美化

固定背景图

Fluid用户手册有以下的提示

本主题不支持固定背景(fixed),原因:

  1. 与目前代码结构有较大冲突,需要大量修改
  2. fixed 在移动端兼容性很差

经过测试,在\themes\fluid\source\custom\custom.css中添加以下代码(custom\custom.css为自定义的文件夹名和文件名)

1
2
3
.banner{
background-attachment: fixed;
}

不能固定banner的背景图

custom.css

1
2
3
4
5
6
7
8
body {
background: url(https://cdn.jsdelivr.net/gh/lovesqiang/cdn@1.3/images/bg/2.jpg);
background-attachment: fixed;
background-size: cover;
}
.banner{
background-attachment: fixed;
}

config.fluid.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
index:
# 首页 Banner 头图,可以是相对路径或绝对路径,以下相同
# Path of Banner image, can be a relative path or an absolute path, the same on other pages
banner_img: https://cdn.jsdelivr.net/gh/lovesqiang/cdn@1.3/images/bg/1.jpg

# 头图高度,屏幕百分比
# Height ratio of banner image
# Available: 0 - 100
banner_img_height: 100

# 头图黑色蒙版的不透明度,available: 0 - 1.0, 1 是完全不透明
# Opacity of the banner mask, 1.0 is completely opaque
# Available: 0 - 1.0 (原来是0.3)
banner_mask_alpha: 0.0

运行结果

banner和body两层图层

由此可以看出,其实这里面有两个图层,一个为banner,另一个应该为body的background

想要固定背景,我们可以将banner的图片设置为纯白,降低其透明度即可

index页面与其它的页面(归档、关于等)设置类似,可以根据自己需求自己做出调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
index:
# 首页 Banner 头图,可以是相对路径或绝对路径,以下相同
# Path of Banner image, can be a relative path or an absolute path, the same on other pages
banner_img: /img/none.png

# 头图高度,屏幕百分比
# Height ratio of banner image
# Available: 0 - 100
banner_img_height: 100

# 头图黑色蒙版的不透明度,available: 0 - 1.0, 1 是完全不透明
# Opacity of the banner mask, 1.0 is completely opaque
# Available: 0 - 1.0 (原来是0.3)
banner_mask_alpha: 0.0

banner的背景图(banner_img)选一张纯白色的背景图

将banner_mask_alpha的值设为0.0,表示完全透明,也可以设置为其它值

在themes\fluid\source目录下新建一个custom文件夹(用于存放自定义的css、js等)

在custom文件夹中创建一个custom.css文件,代码如下

1
2
3
4
5
body {
background: url(https://cdn.jsdelivr.net/gh/lovesqiang/cdn@1.3/images/bg/1.jpg);
background-attachment: fixed; /* 固定背景 */
background-size: cover;
}

这样,就完成了达到了固定背景的效果

存在问题:移动端支持不是很好

方法二

使用 hexo 提供的注入器(Injector)

您需要在博客的根目录下创建一个 scripts 文件夹,然后在里面任意命名创建一个 js 文件即可。

例如:创建一个 /blog/scripts/injector.js ,我们加入以下代码

1
2
3
4
5
6
7
8
// 全屏背景的需要导入这些js
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register(
"body_end",
`<script src="https://cdn.jsdelivr.net/gh/lovesqiang/cdn/js/backgroundize.js"></script>
<link defer rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lovesqiang/cdn/css/backgroundize.css" />
`
);

注意:本人对这行代码 const { root: siteRoot = "/" } = hexo.config; 不是很理解,多次尝试没有效果,便摒弃了它。因此 js 和 css 的路径也是使用本人远程仓库地址中路径。

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

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

代码来源:https://aigisss.com/blog/posts/1563abd8.html

主面板透明

只需在_config.fluid.yml 文件中修改如下代码

1
2
3
4
5
6
# 主面板背景色
# Color of main board
# board_color: "#fff" #原来的样式
# board_color_dark: "#252d38"
board_color: "rgba(255, 255, 255, 0.6)"
board_color_dark: "rgba(37, 45, 56, 0.6)"

小知识

RGB就是红色R+绿色G+蓝色B,RGBA说得简单一点就是在RGB的基础上加进了一个通道Alpha.

语法: 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

https://blog.csdn.net/Clownfishl/article/details/79528143

RGB颜色值与十六进制颜色码转换工具 :https://www.sioe.cn/yingyong/yanse-rgb-16/

其它设置请参考Fluid的用户手册


Hexo-Fluid主题美化
https://lovesqiang.github.io/2022/04/02/Hexo-Fluid主题美化/
作者
Loves Qiang
发布于
2022年4月2日
许可协议