如何在 spring RestDoc (asciidoc) 中折叠 TOC(table of contents)？

Question

我用过 SpringRestDoc，想折叠 Table 个目录。

低于我的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
----

...

谢谢，

Answer 1

Asciidoctor 的默认模板不包含 expand/collapse ToC 的功能。您需要添加自己的 CSS/JavaScript 才能实现该目标。

最简单的方法是使用“docinfo”文件。有关详细信息，请参阅 https://docs.asciidoctor.org/asciidoctor/latest/docinfo/。

这是一个非常简单的实现来演示这个概念：

在您的文档中，在 header（例如，就在 :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 动态创建按钮，将按钮添加到页面的 header 和事件侦听器这样当您单击该按钮时，就会对 show/hide ToC 进行适当的 class 名称和 CSS 样式调整。

如何在 spring RestDoc (asciidoc) 中折叠 TOC(table of contents)？

How to collapse TOC(table of contents) in spring RestDoc (asciidoc)?

asciidoc

spring-boot

spring-restdocs