样式表

在本页面，您将学习：

  • 如何应用主题。

应用主题

自定义样式表可以存储在与文档相同的目录中，也可以存储在单独的目录中。与默认样式表一样，您可以将输出文档链接到自定义样式表，或将其嵌入其中。

如果样式表与文档在同一目录中，您可以在将文档转换为 HTML 时通过 API 应用它。

asciidoctor.convertFile('file.adoc', { 'attributes': { 'stylesheet': 'styles.css' } })

  1. 将自定义样式表保存在与 file.adoc 相同的目录中。

  2. 调用 asciidoctor 处理器。

  3. 设置 stylesheet 属性。

  4. 将样式表文件的名称赋值给 stylesheet 属性。

  5. 输入文档文件的名称。

另外，您也可以在 file.adoc 的头部设置 stylesheet 属性：

= Title
:stylesheet: styles.css

Welcome to the preamble of this page!

== First section

This is a paragraph with a https://asciidoctor.org/[link].

当您的文档和样式表存储在不同的目录时，您需要告诉 Asciidoctor 在文档的相对或绝对路径中查找样式表。通过将 stylesdir 属性指定为样式表的路径，Asciidoctor 会找到样式表。例如，我们将 styles.css 移动到 docs/stylesheets/ 目录中，file.adoc 文档保存在 docs/ 目录中。

= Title
:stylesdir: stylesheets/
:stylesheet: styles.css

Welcome to the preamble of this page!

== First section

This is a paragraph with a https://asciidoctor.org/[link].

处理 file.adoc 后，生成的 HTML 输出（file.html），包括嵌入的 styles.css 样式表，将保存在 docs/ 目录中。

您也可以在 API 中设置 stylesdir：

asciidoctor.convertFile('file.adoc', { 'attributes': { 'stylesdir': 'stylesheets/', 'stylesheet': 'styles.css' } })

如果您不想将 styles.css 样式表嵌入到 HTML 输出中，可以确保设置 linkcss。

= Title
:linkcss:
:stylesdir: stylesheets/
:stylesheet: styles.css

Welcome to the preamble of this page!

== First section

This is a paragraph with a https://asciidoctor.org/[link].

在您的文档转换后，您会注意到 styles.css 并没有被创建为 docs/ 目录中的一个副本。与链接默认的 Asciidoctor 样式表不同，任何自定义的样式表在您链接它们时不会被复制到输出文件所在的目录中。