本文最后更新于：2024年5月7日 下午

fluid 主题简洁舒适，入场背景图片恢弘大气，但视频可能更好看，尝试自己对主题做了修改，本文记录修改方法和效果。

修改思路

  • 向主题加入新的配置项 index.banner_video，控制是否使用视频背景
  • 在 layout.ejs 模板中获取该变量值，根据开关是否打开在模板层面决定是否启用视频背景
  • 创建 json 文件收集视频背景链接
  • 当开启视频背景时，创建div，id为banner_video_insert
  • js 读取 json 文件，创建视频控件语句，加入到创建的div中，实现视频显示，覆盖图片背景
  • 动态监控窗口变化，适时调整视频属性，使得任意窗口大小可以全屏显示视频
  • 识别是否是手机端访问，手机端访问改为使用图像做背景

修改方法

配置文件修改

  • 在主题配置文件中修改 首页 Home Page
1
2
3
4
5
6
7
8
9
10
11
12
#---------------------------
# 首页
# Home Page
#---------------------------
index:
  # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
  # Path of Banner image, can be a relative path or an absolute path, the same on other pages
  banner_img: /img/default.png
 
  # 首页 Banner 使用随机视频
  # true 开启  false 关闭
  banner_video: true
  • 加入：index.banner_video: true

引入 jquery.js

  • 为了 读取json 需要加载jquery.js

  • 保险起见，我下载了最新的 jquery.js 放在了 fluid/source/js 文件夹中

  • 可以在代码中使用 <script type="text/javascript" src="/vvd_js/jquery.js"></script> 加载

创建视频url json

  • 例如我的，文件在fluid/source/js文件夹，命名为video_url.json：
1
2
3
4
5
6
7
8
9
[
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220318.mp4",
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220356.mp4",
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220415.mp4",
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220556.mp4",
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220626.mp4",
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220640.mp4",
	"https://uipv4.zywvvd.com:33030/HexoFiles/vvd-dell-2021-win-10/20210808220742.mp4"
]

修改layout.ejs

  • 修改 themes/fluid/layout/layout.ejs 模板文件
加载变量时加载 index.banner_video
1
2
3
4
5
6
7
8
<%
var subtitle = page.subtitle || page.title
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = page.banner_img_height || theme.index.banner_img_height
var banner_mask_alpha = page.banner_mask_alpha || theme.index.banner_mask_alpha
var colorSchema = theme.dark_mode && theme.dark_mode.enable && theme.dark_mode.default ? theme.dark_mode.default : ''
var banner_video = theme.index.banner_video
%>
加载 jquery.js
1
2
3
4
<!DOCTYPE html>
<html lang="<%= config.language %>" <%= colorSchema ? `data-default-color-scheme="${colorSchema}"` : '' %>>
<script type="text/javascript" src="/vvd_js/jquery.js"></script>

加入核心模板代码
  • 在 <div class="full-bg-img" > 行之后
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
46
47
48
49
50
51
52
53
54
    <div class="full-bg-img" >

<% if(banner_video){ %>
<div id="banner_video_insert">
</div>
<script>
				
	var ua = navigator.userAgent;
	var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
		isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
		isAndroid = ua.match(/(Android)\s+([\d.]+)/),
		isMobile = isIphone || isAndroid;

	function set_video_attr(id){
		
		var height = document.body.children[0].clientHeight

		var width = document.body.children[0].clientWidth

		var video_item = document.getElementById(id);

		if (height / width < 0.56){
			video_item.setAttribute('width', '100%');
			video_item.setAttribute('height', 'auto');
		} else {
			video_item.setAttribute('height', '100%');
			video_item.setAttribute('width', 'auto');
		}
	}

	$.getJSON('/vvd_js/video_url.json', function(data){
	$.getJSON('/vvd_js/video_url.json', function(data){
		if (!isMobile){
			var video_list_length = data.length
			var seed = Math.random()
			index = Math.floor(seed * video_list_length)
			
			video_url = data[index]
			video_html_res = "<video id='video_item' style='position: absolute;' muted='muted' src=" + video_url + " autoplay='autoplay' loop='loop'></video>"

			document.getElementById("banner_video_insert").innerHTML = video_html_res;
			set_video_attr('video_item')
		}

	});

	if (!isMobile){
		window.onresize = function(){
			set_video_attr('video_item')
			}
		}
	</script>

<% } %>

作用为：

  1. 读取json
  2. 判断是否加载视频背景
  3. 创建视频背景控件
  4. 插入视频链接
  5. 监控窗口变化
  6. 适时调整视频控件属性
  7. 判断设备类型决定是否执行背景视频模块

运行示例

主题仓库

参考资料



文章链接：
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-update/fluid-update/

“觉得不错的话，给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付

Hexo > Theme > Fluid
#Hexo #Theme #Fluid
Fluid -2- 随机视频背景切换
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-update/fluid-update/
作者
Yiwei Zhang
发布于
2021年8月13日
许可协议