1. 找到主题下main.js文件 /source/js/main.js
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
/**
* justified-gallery 圖庫排版
*/
const runJustifiedGallery = function (ele) {
const htmlStr = arr => {
let str = "";
const replaceDq = str => str.replace(/"/g, """); // replace double quotes to "
arr.forEach(i => {
const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : "";
const title = i.title ? `title="${replaceDq(i.title)}"` : "";
const address = i.address ? i.address : "";
// 这里判断url后缀是否是视频格式
if (i.url.endsWith(".mp4") || i.url.endsWith(".avi")) {
// 如果是生成html代码
str += `<div class="fj-gallery-item"><div class="tag-address">${address}</div><video src="${i.url}" ${alt + title + (address ? ` data-address="${address}"` : "")} height="auto" controls></video></div>`;
} else {
if (address) {
str += `<div class="fj-gallery-item"><div class="tag-address">${address}</div><img src="${i.url}" ${
alt + title
}"></div>`;
} else {
str += `<div class="fj-gallery-item"><img src="${i.url}" ${alt + title}></div>`;
}
}
// if (address) {
// str += `<div class="fj-gallery-item"><div class="tag-address">${address}</div><img src="${i.url}" ${
// alt + title
// }"></div>`;
// } else {
// str += `<div class="fj-gallery-item"><img src="${i.url}" ${alt + title}></div>`;
// }
});

return str;
};
  1. 大概第476行添加代码
1
2
3
4
anzhiyu.initJustifiedGallery(item);
anzhiyu.loadLightbox(item.querySelectorAll("img"));
anzhiyu.loadLightbox(item.querySelectorAll("video"));
window.lazyLoadInstance.update();
  1. 修改 fjGallery.min.js 文件
1
imageSelector: "img,video",

搜索appendImages 方法修改

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
appendImages(t) {
const i = this;
e.jQuery && t instanceof e.jQuery && (t = t.get()),
t && t.length && (t.forEach((t=>{
if (t && !t.fjGalleryImage && t.querySelector) {
const e = t.querySelector(i.options.imageSelector);
if (e) {
t.fjGalleryImage = i;
const o = {
$item: t,
$image: e,
width: 0,
height: 0,
loadSizes() {
const t = this;
if (e.tagName.toLowerCase() === "img") {
t.width = parseFloat(e.width) || !1;
t.height = parseFloat(e.height) || !1;
} else if (e.tagName.toLowerCase() === "video") {
// 视频元素的videoWidth和videoHeight属性只有在元数据加载完后才可用
// 如果视频的元数据还没有加载,那么宽度和高度将为0
// 要确保在访问这些属性之前已加载元数据,可以监听"loadedmetadata"事件,然后读取这些值。
e.addEventListener('loadedmetadata', function() {
t.width = e.videoWidth || !1;
t.height = e.videoHeight || !1;
if (t.width && t.height) {
i.resize();
}
});
}
c(e, (e=>{
t.width === e.width && t.height === e.height || (t.width = e.width,
t.height = e.height,
i.resize())
}
))
}
};

o.loadSizes(),
i.images.push(o)
}
}
}
)),
i.options.onAppendImages && i.options.onAppendImages.call(i, [t]),
i.justify())
}
  1. source/_data/album.yml文件中使用 json文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- class_name: Video
path_name: /image/video
type: 2
description: Video
cover: ----
rowHeight: 320
limit: 10
lazyload: true
btnLazyload: false
url: /json/video.json
album_list:
- date: 2023/10/26 01:00:00
content: 111
address: 111
from:
image: /json/video.json

json格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"url": "https://qwe-oss.oss-cn-beijing.aliyuncs.com/video/fengjing/2023051301.mp4",
"alt": "风景",
"title": "20230501",
"address": "海海海"
},
{
"url": "https://qwe-oss.oss-cn-beijing.aliyuncs.com/video/fengjing/2023051302.mp4",
"alt": "马六甲海峡",
"title": "马六甲海峡",
"address": "马六甲海峡"
},
{
"url": "https://qwe-oss.oss-cn-beijing.aliyuncs.com/video/fengjing/2023051303.mp4",
"alt": "马六甲海峡",
"title": "马六甲海峡",
"address": "马六甲海峡"
},