如何在使用Photoswipe的Hugo主题中添加循环视频片段

DevOps 小满

2026-6-17

解决Hugo主题中Photoswipe视频插件集成问题

第一步：确认插件资源正确引入

把视频插件的JS文件放到Hugo主题的静态资源目录（比如static/js/），然后在主题模板的资源加载位置（如layouts/partials/footer.html），在Photoswipe核心JS之后引入插件：

<script src="{{ "js/photoswipe.min.js" | relURL }}"></script>
<script src="{{ "js/photoswipe-ui-default.min.js" | relURL }}"></script>
<script src="{{ "js/photoswipe-video-plugin.min.js" | relURL }}"></script>

第二步：修正HTML标记

调整你的视频项标记，明确告知Photoswipe这是视频类型：

<a class="gallery-item" 
   data-pswp-type="video"
   data-pswp-video-src="{{ $resource.RelPermalink }}" 
   data-pswp-width="800"
   data-pswp-height="600" 
   title="{{ .Title }}" 
   itemscope itemtype="https://schema.org/VideoObject" 
   style="aspect-ratio: 8 / 6">
  <figure>
    <video loop muted autoplay playsinline poster="{{ $resource.RelPermalink | replaceRE "\.(mp4|webm)$" ".jpg" }}">
      <source src="{{ $resource.RelPermalink }}" type="{{ $resource.MediaType.Type }}" />
      Your browser does not support the video tag.
    </video>
  </figure>
</a>

注：poster是自动替换视频后缀为jpg的示例，可替换为实际缩略图路径

第三步：初始化时启用插件

在Photoswipe初始化脚本里注册并启用视频插件：

var initPhotoSwipeFromDOM = function(gallerySelector) {
  // 保留原有初始化逻辑（获取items、配置options等）
  
  var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  // 注册启用视频插件
  gallery.registerModule('video', PhotoSwipeVideoPlugin);
  gallery.init();
};

// 触发初始化
initPhotoSwipeFromDOM('.gallery-item');