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": "马六甲海峡"
 },