如何在 Spring RestDoc (asciidoc) 中折叠 TOC目录？

问题描述

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

...

谢谢，

解决方法

Asciidoctor 的默认模板不包括展开/折叠 ToC 的功能。您需要添加自己的 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进行样式调整以显示/隐藏 ToC。