12

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

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

并希望将其内容放入扰流板或类似内容中。有没有办法以某种方式隐藏动态 asciidoc 元素？我尝试使用

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

但它没有被处理包含在它里面。任何想法将不胜感激。在不隐藏片段的情况下，我的文档几乎可以无限滚动 :)。如果 ascii doc 没有这样的方式，其他文档格式的建议，我可以在其中包含文件内容并将其放入扰流板中，也值得赞赏。

4

3 回答 3

13

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

无需 CSS 和 Javascript！

这是一个例子：

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

这将创建一个折叠元素：

在此处输入图像描述

..还有这个扩展的图像：

在此处输入图像描述

更新

由于Foad的答案看起来更优雅，我尝试了他提出的ReDoc Markup解决方案，但没有成功。

于 2019-01-15T08:53:02.767 回答
10

正如纪尧姆·格罗斯蒂在这里提到的

不建议使用 passthrough 来包含原始 HTML，因为现在您的文档与输出紧密耦合。

它已被弃用。可折叠/可折叠部分的新语法是

.some description
[%collapsible]
====
this
is
going
to be
folded
====
于 2019-10-18T11:53:42.677 回答
4

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

如果您的输出只是 HTML，那么您可以使用在文档中嵌入任何 HTML

++++ any HTML contents ++++

这包括

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

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

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

被转换成类似的东西

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

因此，您可以从 Javascript 代码中引用这个 CSS 类，并通过修改displayCSS 属性来实现显示/隐藏。

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

于 2016-01-29T09:35:46.393 回答