spring-boot - 如何在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进行样式调整以显示/隐藏目录。