如何动态隐藏asciidoc元素

Question

我使用org.asciidoctor.convert插件为gradle生成我的团队的API文档。我包含文件：

include::{snippets}/index/curl-request.adoc[] 

并希望将其内容放入剧透或其他类似内容中。有什么办法以某种方式隐藏动态asciidoc元素？我尝试使用

pass:[<details open>  
include::{snippets}/index/curl-request.adoc[]
</details>]

但它没有被处理包含在里面。任何想法都将受到高度赞赏。没有隐藏片段我的文档几乎无限滚动:)。如果没有ascii doc这样的方式，其他文档格式的建议，我可以包含文件内容并将其放入剧透，也很感激。

Answer 1

这对我很有帮助-我在这里添加了罗宾评论中的解决方案。

不需要CSS和Javascript！

这里是一个例子：

+++ <details><summary> +++
Check `reference.conf`:
+++ </summary><div> +++
----
play {
  http {
    secret.key = asdf
    secret.key = ${?SECRET_KEY}
    ...
  }
  ...
}
----
+++ </div></details> +++

这将创建一个折叠的元素：

..以及此展开的图片：

Answer 2

这是一个迟到的答案，但也许它会帮助你/其他人。 以下asciidoc功能是实现动态显示/隐藏块的关键：

如果您的输出只是HTML，那么您可以使用

在文档中嵌入任何HTML

++++ any HTML contents ++++

这包括

• <style>包含自定义CSS类的标记
• 用于显示/隐藏功能的自定义HTML标记，例如<input type="checkbox" />
• <script>标记包含用于隐藏/显示某些块的Javascript代码，例如通过向复选框添加事件侦听器。

正如@LightGuard已经提到的，role属性被转换为CSS类引用。 E.g。

[source,role="someCssClass"]
----
...
----

转换为类似

的内容

<div class="someCssClass">
</div>

因此，您可以从Javascript代码引用此CSS类，并通过修改display CSS属性来实现show / hide。

对于一个简单的示例实现，请参阅https://raw.githubusercontent.com/NorbertSandor/jsinterop.xyz/master/jsinterop-project/jsinterop-website/src/main/asciidoc/index.asciidoc（靠近文件顶部）。

Answer 3

正如Guillaume Grossetie提到的here

  

不建议使用传递方式包含原始HTML，因为现在您的文档已与输出紧密结合。

，不推荐使用。可折叠/可折叠部分的新语法是

.some description
[%collapsible]
====
this
is
going
to be
folded
====