如何为Jekyll无JavaScript灯箱添加视频URL

一、灯箱元素代码的位置查找 #

• 优先查看主题的_includes目录：可复用的灯箱组件通常放在这里，文件名可能是lightbox.html、gallery-item.html、modal.html这类，搜索关键词lightbox、modal或data-lightbox能快速定位。
• 其次检查_layouts目录：如果灯箱直接嵌入在页面/文章布局里，比如post.html、page.html，可在这些文件里找对应的弹窗结构。
• 最后搜索主题内的CSS文件：无JS灯箱依赖CSS的:target伪类实现显示/隐藏，在assets/css下的文件里搜索:target，能反向找到对应的HTML结构位置。

二、修复YAML配置构建失败的问题 #

添加url: ""后构建失败，大概率是YAML语法错误：

1. 替换中文引号为英文引号：你配置里的“”是中文全角引号，Jekyll的YAML只支持英文半角引号""或''。
2. 检查缩进与结构：
   • 如果add是单个条目，确保所有键的缩进一致（用2或4个空格，不能混用Tab）：

     add:
       image: ""
       title: ""
       description: ""
       url: ""
     

   • 如果add是多个条目数组，每个条目要加-前缀：

     add:
       - image: "img1.jpg"
         title: "视频1"
         description: "描述1"
         url: "https://www.youtube.com/watch?v=xxx"
       - image: "img2.jpg"
         title: "视频2"
         description: "描述2"
         url: "https://www.youtube.com/watch?v=yyy"
     

三、实现点击触发YouTube灯箱的功能 #

基于无JS灯箱的:target逻辑，修改灯箱的HTML结构：

1. 触发元素（图片/标题） #

{% for item in site.data.your-config-file.add %}
  <!-- 点击图片或标题触发灯箱 -->
  <a href="#youtube-modal-{{ item.title | slugify }}" class="lightbox-trigger">
    <img src="{{ item.image }}" alt="{{ item.title }}">
    <h3>{{ item.title }}</h3>
  </a>

  <!-- 灯箱容器 -->
  <div id="youtube-modal-{{ item.title | slugify }}" class="lightbox-modal">
    <div class="modal-inner">
      <!-- 关闭按钮 -->
      <a href="#" class="lightbox-close">&times;</a>
      <!-- YouTube嵌入 iframe（把watch链接转成embed链接） -->
      <iframe 
        width="640" 
        height="360" 
        src="{{ item.url | replace: 'watch?v=', 'embed/' }}" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
      </iframe>
      <p>{{ item.description }}</p>
    </div>
  </div>
{% endfor %}

2. 配套CSS样式 #

/* 默认隐藏灯箱 */
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}

/* 触发后显示灯箱 */
.lightbox-modal:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-modal .modal-inner {
  background: #fff;
  padding: 20px;
  max-width: 700px;
  position: relative;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2rem;
  color: #333;
  text-decoration: none;
}

内容的提问来源于stack exchange，提问作者 cea