如何为Bookdown文档中的图片添加Lightbox灯箱效果

方案1：使用bs4_book输出格式（零代码实现） #

这是成本最低的实现方式，bookdown官方的bookdown::bs4_book输出格式默认内置了lightbox交互，所有插入的图片自动支持点击放大查看，不需要额外开发或引入第三方资源。
配置方法很简单，修改项目根目录下的_output.yml文件即可：

output:
  bookdown::bs4_book:
    # 可自行配置主题、导航等其他参数
    theme:
      primary: "#2c3e50"

方案2：为现有gitbook格式添加lightbox能力 #

如果你目前使用的是默认的gitbook输出格式，不想切换整体样式，可以通过添加少量自定义代码实现：

1. 在项目根目录新建header.html文件，写入以下原生js实现的lightbox代码（无外部依赖，不需要引入额外资源）：

<style>
/* lightbox基础样式 */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
}
</style>
<div class="lightbox-overlay" id="lightbox"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const lightbox = document.getElementById('lightbox');
  // 选中页面所有正文区域的图片
  document.querySelectorAll('.page-content img').forEach(img => {
    img.style.cursor = 'zoom-in';
    img.addEventListener('click', function() {
      lightbox.innerHTML = `<img src="${this.src}" alt="${this.alt}">`;
      lightbox.style.display = 'flex';
    })
  })
  // 点击遮罩关闭
  lightbox.addEventListener('click', function() {
    this.style.display = 'none';
  })
})
</script>

2. 修改_output.yml的gitbook配置，引入上面的自定义文件：

output:
  bookdown::gitbook:
    includes:
      in_header: header.html
    # 其余原有配置保持不变

注意事项 #

• 确保你插入的图表本身导出的分辨率足够高，否则放大后还是会出现模糊问题
• 如果只需要给特定图片添加lightbox效果，修改js里的选择器，筛选带自定义类的图片即可，插入图片时标记类：![图表说明](图表路径){.need-lightbox}

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