Jekyll：如何通过文章前置元数据生成Lightbox插件所需标签列表

别慌！我来一步步带你搞定从Front Matter提取数据生成Lightbox标签列表的事儿，不管你用的是Jekyll、Hugo这类主流静态站点生成器，都能找到对应的解决方案～

首先得确保你的文章前置元数据里已经存好了Lightbox需要的图片和标签信息，举个典型的例子（用YAML格式）：

---
title: "我的秋日登山相册"
# 这里用lightbox_images数组存每张图的信息，你可以改成自己习惯的命名
lightbox_images:
  - url: "/assets/photos/mountain-1.jpg"
    alt: "山顶红叶"
    tags: ["红叶", "山顶"]
  - url: "/assets/photos/mountain-2.jpg"
    alt: "山间溪流"
    tags: ["溪流", "山林"]
  - url: "/assets/photos/mountain-3.jpg"
    alt: "云海日出"
    tags: ["日出", "云海"]
---

注意：如果你的数据结构不一样（比如单独存tags数组），后续代码里的对应字段要跟着调整哦～

下面针对两种最常用的静态站点生成器给出代码示例，你可以直接套用：

如果你用的是Jekyll（Liquid模板） #

找到你的文章布局文件（一般在_layouts/post.html），插入这段代码：

<!-- 生成标签筛选按钮组 -->
<div class="lightbox-tag-group">
  <!-- 先提取所有唯一标签，避免重复 -->
  {% assign all_tags = site.posts | map: 'lightbox_images' | flatten | map: 'tags' | flatten | uniq %}
  
  {% for tag in all_tags %}
    <button class="lightbox-tag-btn" data-tag="{{ tag }}">
      {{ tag }}
    </button>
  {% endfor %}
  <!-- 可选：添加重置按钮 -->
  <button class="lightbox-tag-btn lightbox-reset">全部</button>
</div>

<!-- 生成Lightbox图片容器 -->
<div class="lightbox-gallery">
  {% for image in page.lightbox_images %}
    <a href="{{ image.url }}" data-lightbox="gallery" data-tags="{{ image.tags | join: ',' }}">
      <img src="{{ image.url }}" alt="{{ image.alt }}" class="gallery-thumb">
    </a>
  {% endfor %}
</div>

如果你用的是Hugo（Go模板） #

找到你的文章布局文件（一般在layouts/_default/single.html或者对应文章类型的布局文件），插入这段代码：

<!-- 生成标签筛选按钮组 -->
<div class="lightbox-tag-group">
  <!-- 先收集所有唯一标签 -->
  {{ $allTags := slice }}
  {{ range .Site.Pages }}
    {{ range .Params.lightbox_images }}
      {{ range .tags }}
        {{ $allTags = $allTags | append . }}
      {{ end }}
    {{ end }}
  {{ end }}
  
  {{ range $tag := uniq $allTags }}
    <button class="lightbox-tag-btn" data-tag="{{ $tag }}">
      {{ $tag }}
    </button>
  {{ end }}
  <!-- 可选：添加重置按钮 -->
  <button class="lightbox-tag-btn lightbox-reset">全部</button>
</div>

<!-- 生成Lightbox图片容器 -->
<div class="lightbox-gallery">
  {{ range .Params.lightbox_images }}
    <a href="{{ .url }}" data-lightbox="gallery" data-tags="{{ delimit .tags "," }}">
      <img src="{{ .url }}" alt="{{ .alt }}" class="gallery-thumb">
    </a>
  {{ end }}
</div>

不管你用的是Lightbox2、Fancybox还是其他插件，都需要加一段JS来实现标签筛选功能，这里以Lightbox2为例，在布局文件的末尾（</body>之前）插入：

// 标签筛选逻辑
document.querySelectorAll('.lightbox-tag-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const selectedTag = this.dataset.tag;
    
    // 遍历所有图片链接，显示/隐藏对应标签的图片
    document.querySelectorAll('.lightbox-gallery a').forEach(link => {
      const imgTags = link.dataset.tags.split(',');
      if (selectedTag === '全部' || imgTags.includes(selectedTag)) {
        link.style.display = 'inline-block'; // 可以根据你的布局改成block或其他
      } else {
        link.style.display = 'none';
      }
    });
  });
});

如果用的是其他Lightbox插件，只需要调整对应的数据属性名（比如Fancybox用data-fancybox而不是data-lightbox），核心逻辑是一样的～

最后一步就是把上面的HTML和JS代码放到你的文章布局文件的合适位置：

• 标签按钮组可以放在文章正文的顶部或者侧边栏
• 图片容器放在正文里你想展示相册的位置
• JS代码放在页面末尾，确保DOM加载完成后再执行

另外别忘了：

1. 引入你用的Lightbox插件的CSS和JS文件（比如Lightbox2需要在<head>里加CSS，页面末尾加JS）
2. 根据自己的网站样式调整标签按钮和图片的CSS，让它们更贴合你的设计

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