如何在 Spring RestDoc（asciidoc）中折叠 TOC（目录）？答案

【问题标题】：How to collapse TOC(table of contents) in spring RestDoc (asciidoc)?如何在 Spring RestDoc（asciidoc）中折叠 TOC（目录）？
【发布时间】：2021-03-16 08:52:57
【问题描述】：

我使用过 SpringRestDoc 并想折叠目录。

在我的index.adoc下面

= Service Rest Docs API Document
:doctype: book
:icons: font
:source-highlighter: highlightjs
:toc2: left
:theme: flatly
:toclevels: 1
:sectlinks:

[[introduction]]

== information

----
Spring Rest Document
----

...

谢谢，

【问题讨论】：

标签： spring-boot asciidoc spring-restdocs

【解决方案1】：

Asciidoctor 的默认模板不包含展开/折叠 ToC 的功能。您需要添加自己的 CSS/JavaScript 来实现该目标。

最简单的方法是使用“docinfo”文件。详情请见https://docs.asciidoctor.org/asciidoctor/latest/docinfo/。

这是一个非常简单的实现，展示了这个概念：

在您的文档中，在标题中（例如，就在 :doctype: 属性定义下方），添加行 :docinfo: shared。
在与您的文档相同的文件夹中创建一个名为“docinfo.html”的文件；此文件包含您的自定义 CSS 和 JavaScript。

将以下内容添加到docinfo.html 文件中：

<style>
button.tocSwitch {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var target = document.querySelector('#header')
  var button = document.createElement('button')
  button.className = 'tocSwitch'
  button.innerHTML = 'ToC'
  button.addEventListener('click', function (e) {
    e.stopPropagation()
    var toc = document.querySelector('#toc')
    var body = document.querySelector('body')
    if (body.classList.contains('toc2')) {
      body.classList.remove('toc2')
      body.classList.remove('toc-left')
      toc.style.display = 'none'
    }
    else {
      body.classList.add('toc2')
      body.classList.add('toc-left')
      toc.style.display = 'block'
    }
  })
  target.appendChild(button)
})
</script>

此内容为按钮定义了一些 CSS 样式，一些 JavaScript 动态创建按钮，将按钮添加到页面的标题，以及一个事件侦听器，以便当您单击按钮时，适当的类名和 CSS进行样式调整以显示/隐藏 ToC。

【讨论】：

非常感谢:)