如何在bookdown::bs4_book中启用代码折叠？按钮失效求助

问题根源 #

你之前尝试的方案是针对Bootstrap 3编写的，而bookdown::bs4_book基于Bootstrap 4构建。两者的折叠组件在DOM结构、事件触发逻辑上存在差异，导致原有代码的事件监听与Bootstrap 4的内置行为冲突，最终出现代码块展开后立刻折叠的现象。

适配Bootstrap 4的代码折叠实现 #

1. 创建自定义模板文件 #

在你的bookdown项目根目录创建code_fold.html文件，内容如下：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 为目标代码块添加折叠按钮
  document.querySelectorAll('pre.r, pre.python, pre.bash').forEach(function(codeBlock) {
    // 创建按钮容器
    var btnWrap = document.createElement('div');
    btnWrap.className = 'd-flex justify-content-end mb-1';
    
    // 创建折叠按钮
    var foldBtn = document.createElement('button');
    foldBtn.className = 'btn btn-sm btn-outline-secondary';
    foldBtn.textContent = '隐藏代码';
    foldBtn.setAttribute('data-toggle', 'collapse');
    
    // 给代码块设置唯一ID并添加折叠类
    if (!codeBlock.id) {
      codeBlock.id = 'code-block-' + Math.random().toString(36).slice(2, 10);
    }
    codeBlock.className += ' collapse show';
    foldBtn.setAttribute('data-target', '#' + codeBlock.id);
    
    // 插入按钮到代码块前
    codeBlock.parentNode.insertBefore(btnWrap, codeBlock);
    btnWrap.appendChild(foldBtn);
    
    // 监听折叠状态，更新按钮文本
    codeBlock.addEventListener('shown.bs.collapse', function() {
      foldBtn.textContent = '隐藏代码';
    });
    codeBlock.addEventListener('hidden.bs.collapse', function() {
      foldBtn.textContent = '显示代码';
    });
  });
});
</script>

2. 在bookdown配置中引入模板 #

打开项目根目录的_bookdown.yml，添加以下配置：

output:
  bookdown::bs4_book:
    includes:
      in_header: code_fold.html

3. 编译验证 #

重新编译你的bookdown项目，所有指定类型的代码块会自动生成折叠按钮，点击后可正常切换显示/隐藏状态，不会再出现展开后立刻折叠的问题。

自定义扩展 #

• 如果需要支持其他编程语言的代码块，只需在querySelectorAll的参数中添加对应的类名（比如pre.julia）。
• 按钮样式可通过修改className属性调整，比如将btn-outline-secondary改为btn-outline-primary切换按钮颜色。

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