Hexo NexT 加入背景图片

发表于 更新于

添加如下代码：

给 hexo next 加上背景图片，首先启用相应的styl

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

修改source/_data/styles.styl

添加几行代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

//  更改背景图片
body {
	height: 100%;
	width: 100%;
	// 透明度 0.6 的黑色半透明遮罩
	background-color: rgba(0, 0, 0, .5);
	// 設置背景混和模式為相乘模式
	background-blend-mode: multiply;
	// 图片自适应剪裁,56.25%=1080/1920
	// padding-top: 56.25%
	background-image:url(https://api.dongmanxingkong.com/suijitupian/acg/1080p/index.php);
	//这一行的括号里填背景图片的路径，将图片重命名为background.jpg放在\themes\next\source\images下
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position:center center;
	background-size:cover;
}
//body上的所有子元素, 包括
.comments, .pagination, .post-block, .popup, .sidebar {
    opacity:0.8;
}
// header需要单独设置,避免遮挡某些元素的点击事件
// 这里的rgb都是从main.css中扒出来的,之后从16进制转换成了rgba数据
.header-inner {
	background: rgba(255,255,255,0.8);
}
// 针对darkmode单独设置
@media (prefers-color-scheme: dark){
	.header-inner {
		background: rgba(51,51,51,0.8);
	}
	
// }
// 页面头样式属性  .header-inner 
// sidebar侧边工具栏样式属性  .sidebar
// 文章版块样式 .post-block 
// 评论系统  .comments
// 搜索框(local-search) .popup

// example: 页脚 <a> 标签 颜色修改
// #footer a {
// 	coler: #eee;
// }