我该如何在Antora中包含自定义的CSS、HTML和Javascript？

Question

3

在 Antora 生成的网站中，是否有一种“本地”方式可以包含自己的 HTML、CSS 和 Javascript 页面？

在 Asciidoc 源文件中包含一个带有内联 CSS 样式的 HTML 文件仅适用于 HTML 和 CSS，如下所示（请参见附图以查看结果）：

++++
include::partial$test.html[]
++++

然而，如果您将CSS分离并添加Javascript，则.css和.js文件不会被发布，因为它们没有直接包含在任何地方，并且所包含的HTML遵循UI bundle定义的样式。

手动将CSS和Javascript文件复制到构建文件中的正确位置可以按预期工作（Antora页面按预期进行了样式设置并运行了.js）

我认为大多数Antora文档都是某个CI/CD管道的产品，因此您可能可以将CSS和Javascript作为管道的一部分添加到构建文件中，但这是一个混乱的解决方案。

真正需要的是一种强制Antora发布一些“额外”文件或文件夹的方法。

我明白Antora的整个重点是制作一致的样式和格式化文档。想要这样做的原因是在文档中包含由Plotly或Bokeh生成的交互式图形。

它还打开了包括任何类型的交互式窗口的可能性，例如播放音乐的按钮。在我的情况下，我想要一个“交互式和弦书”，可以播放和突出显示音乐和弦中的音符。

- user486185

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eskwayrd · Accepted Answer

你的样本透传块有效是因为包含的文件被插入到该位置的内容流中。 test.html 文件本身并没有被发布，但其内容使用 include 宏存在于文件中。

同样地，如果您使用了这个部分块：

++++
include::partial$test.js[]
++++

test.js 的内容被注入到该点的内容流中。如果您只是嵌入了几行代码，那么 test.js 本身不需要被发布。

如果您确实需要发布 test.js，则有三种选择：

将 test.js 存储在模块的 attachments 文件夹中（而不是 partials。 partials 文件夹旨在包含多次使用的“小型” Asciidoc 文档）。您需要使用 include::attachment$test.js[]，但该文件会被复制到构建文件夹中。
使用 supplemental_files：https://docs.antora.org/antora/latest/playbook/ui-supplemental-files/ 补充文件允许您自定义 UI 中的资源。
分叉 UI 并直接添加您的自定义内容。

后两种方法更可取。目前，Antora只发布HTML。将来可能会发布到其他输出格式，包括PDF。 PDF不适用于嵌入式HTML、CSS或JavaScript，因此UI定制是首选方法。（PDF生成可能会有独特的主题支持，类似于asciidoctor-pdf）。