添加块图像

在本页中，您将学到：

  • AsciiDoc块图像宏的结构。

  • 如何使用其资源ID插入块图像。

AsciiDoc块图像宏

AsciiDoc块图像宏用于将图像的源文件嵌入到部分或页面中。块图像宏接受PNG、JPG、SVG和GIF（静态和动画）图像文件的Antora资源ID作为值。

当Antora运行时，由块图像宏引用的图像文件将被嵌入并显示为发布页面中的一个独立元素。例如，下面这段文字后面的SVG图像是使用块图像宏嵌入到本页中的。

console

块图像宏结构

示例1显示了块图像宏的结构。

示例1. 块图像宏 
这是一个段落。

image::resource-id-of-target-image.ext[可选属性,可选属性] (1)

这是另一个段落。
1 块图像由宏名称后的两个冒号（::）指定。在一个空行之后，单独占一行，然后再跟一个空行。

至少，块图像宏由宏的前缀（image::）、目标图像的资源ID和一组方括号（[]）组成。 目标图像是当前页面引用的图像源文件。通过将其资源ID分配给当前页面的内联或块图像宏来引用目标图像。 当前页面是包含引用目标图像的图像宏的页面源文件。

在示例1中显示的块图像宏的每个部分将在下面更详细地描述。

image::

块图像宏以宏名称image开头，后跟两个冒号（::）。

目标图像的资源ID

图像宏接受图像源文件的资源ID作为其值。该值直接输入在跟随宏名称（image::）的第二个冒号之后。您需要指定目标图像的资源ID坐标的数量取决于目标图像与当前页面的组件版本和模块的关系。当从图像宏引用图像时，不需要在目标图像的资源ID中包含image$系列坐标。它会在运行时自动应用。

[可选属性,可选属性]

块图像宏以目标图像的资源ID末尾的一组方括号（[]）完成。您可以将方括号留空，或在方括号内作为逗号分隔列表指定一个或多个可选属性。

下一节，嵌入块图像，将逐步解释如何设置块图像宏。

嵌入块图像

让我们分解块图像宏和资源ID坐标，以便使用块图像宏将图像（目标图像）插入到页面（当前页面）中。

  1. 在您的IDE或文本编辑器中打开要插入图像的页面。在本练习中，我们打开了文件satellites.adoc。 satellites.adoc 是当前页面。

  2. 在satellites.adoc中，让我们嵌入块图像console.svg。

  3. 在新行的开头，输入宏名称后跟两个冒号，image::。确保前一个元素（如段落或源代码块）与放置图像宏的行之间有一个空行。

    示例2. satellites.adoc（当前页面） 
    扫描您的徽章后，您应该看到这个屏幕。

image::

  4. 在两个冒号后直接输入目标图像文件的资源ID。在此示例中，console.svg和satellites.adoc属于同一组件版本和模块，目标图像存储在images家族目录的根目录中。因此，只需要将console.svg的文件名和扩展名分配为块图像宏的值。

    示例3. satellites.adoc（当前页面） 
    扫描您的徽章后，您应该看到这个屏幕。

image::console.svg

    请注意，console.svg的资源ID不包括其家族坐标。Antora会自动将image$家族坐标应用于分配给图像宏的资源ID。

  5. 在目标图像的资源ID后直接输入一个开放方括号（[），然后是一个闭合方括号（]）。

    示例4. satellites.adoc（当前页面） 
    扫描您的徽章后，您应该看到这个屏幕。

image::console.svg[]

    在此示例中，我们没有向块图像宏应用任何可选属性；但是，您可以在方括号内指定一个或多个属性作为逗号分隔列表。

  6. 在最后一个闭合方括号（]）后按两次Enter键，以在图像宏后插入一个新行。

    示例5. satellites.adoc（当前页面） 
    扫描您的徽章后，您应该看到这个屏幕。

image::console.svg[]

在提示后输入卫星位置。

就是这样！您已经完成了使用AsciiDoc块图像宏将目标图像（console.svg）插入到当前页面（satellites.adoc）中。

了解更多

要了解如何嵌入属于其他模块、文档组件和版本的图像，请参阅图像资源ID示例。