如何在spring RestDoc（asciidoc）中折叠TOC（目录）？

Question

我使用过 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
----

...

谢谢，

Answer 1

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

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

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

1. 在文档的标题中（例如，在:doctype:属性定义下方），添加行:docinfo: shared.

2. 在与文档相同的文件夹中创建一个名为“docinfo.html”的文件；该文件包含您的自定义 CSS 和 JavaScript。

3. 将以下内容添加到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 样式调整。用于显示/隐藏目录。