如何在RMarkdown的_site.yaml中配置Bootstrap .nav-tabs类？

RMarkdown的_site.yaml配置文件不支持直接在navbar节点下添加class参数，不过可以通过以下几种方法实现需求：

方法1：通过in_header注入JavaScript修改类名 #

利用你当前配置里的in_header: header.html，在header.html中添加一段脚本，自动替换导航栏的默认类：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const navbar = document.querySelector('.navbar-nav');
  if (navbar) {
    navbar.classList.remove('navbar-nav');
    navbar.classList.add('nav', 'nav-tabs');
  }
});
</script>

这段脚本会在页面加载完成后，找到默认带navbar-nav类的导航栏容器，替换为Bootstrap标签页需要的nav nav-tabs类。

方法2：自定义HTML模板 #

如果需要更深度的自定义，可以复制RMarkdown默认的HTML模板，修改导航栏部分的类名：

1. 找到RMarkdown默认模板路径（可通过rmarkdown::html_document()的template参数查看默认路径）
2. 复制模板文件到你的项目目录，命名为custom-template.html
3. 在模板中找到包含navbar-nav的代码段，替换为nav nav-tabs
4. 在_site.yaml的output.html_document中添加template: custom-template.html

方法3：用CSS模拟标签页样式（不修改类名） #

如果不想改动DOM结构，也可以通过自定义CSS（custom.css）覆盖默认导航栏样式，模拟Bootstrap标签页的效果：

.navbar-nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid #dee2e6;
}

.navbar-nav .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

针对你当前配置的推荐方案 #

推荐使用方法1，不需要改动现有配置结构，只需要在已有的header.html中添加脚本即可快速生效。

内容的提问来源于stack exchange，提问作者atlas-wants