从图片链接到资源链接

您可以通过将xref属性分配给内联或块图像宏,从图像创建到页面、附件、图像或元素的链接。

Xref元素属性

xref元素属性可以在块和内联图像宏的属性列表中设置。 xref属性是可选的。无论您将其分配给块图像宏还是内联图像宏,它的结构和行为方式都是相同的。

xref属性接受可发布资源的资源ID——页面、附件或图像——作为值。

示例1. 设置xref属性并为其分配资源ID
image::an-image.jpg[xref=version@component:module:family$file.ext]

它还接受当前页面中指定的元素的ID。当分配给xref属性时,元素ID必须以井号(#)为前缀。

示例2. 设置xref属性并分配元素ID
image::an-image.gif[xref=#fragment]

当您的站点发布并访客选择嵌入的图像时,他们将链接到已发布资源的URL,或跳转到当前已发布页面中与指定元素ID对应的锚点。

xref属性是一个命名属性。如果在图像宏上设置了位置属性,如alt文本、宽度或高度,请在设置xref或任何其他命名属性之前,在属性列表中分配它们。

示例3. 分配给图像宏的可选位置和命名属性
image:an-image.svg[图像alt文本,xref=version@component:module:family$file.ext,title="图像的工具提示"]

图像宏的位置和命名元素属性在图像宏的属性列表中用逗号分隔。

从图像链接到页面

要从嵌入的图像引用页面,请在属性列表中设置xref属性,后跟等号(=),然后是目标页面的资源ID。您需要指定目标页面的多少个资源ID坐标取决于目标页面与当前页面的组件版本和模块的关系。

示例4. current-page.adoc
image::console.svg[xref=modes.adoc] (1)
1 分配给xref的资源ID仅指定页面的文件坐标,因为在此示例中,假设当前页面和目标页面属于相同的组件版本和模块。

示例4中显示的块图像宏将将图像console.svg嵌入到当前页面,并从图像创建到目标页面的已发布URL的链接。

您还可以在页面的资源ID末尾附加一个片段,以链接到页面内的元素。在示例5中,与modes.adoc内容中设置的元素IDprotocols对应的片段被附加到modes.adoc的资源ID末尾。

示例5. current-page.adoc
image::console.svg[xref=modes.adoc#protocols]

您还可以链接到当前页面中的元素ID

从图像链接到附件

要从嵌入的图像引用附件,请在属性列表中设置xref属性,后跟等号(=),然后是目标附件的资源ID。确保在分配给xref属性的值中指定家族坐标attachment$

示例6显示了一个内联图像宏,其中在宏的属性列表中设置了三个位置属性,然后是命名的xref属性。 xref属性被分配了一个附件的资源ID。

示例6. current-page.adoc
Select the image:red-dot.jpg[红色圆圈,40,40,xref=telemetry:attachment$flight-patterns.pdf]. (1) (2)
1 位置属性是可选的。如果在图像宏上设置了一个或多个位置属性,请在设置xref或任何其他命名属性之前,在属性列表中分配它们。在此示例中,位置属性altwidthheight按照图像宏接受的顺序设置。
2 分配给xref的资源ID指定了目标附件的模块、attachment$和文件坐标,因为在此示例中,假设目标附件属于与当前页面不同的模块。当资源是附件时,attachment$坐标始终是必需的。

示例6中显示的内联图像宏将图像red-dot.jpg嵌入到当前页面,并从图像创建到目标附件的已发布URL的链接。

要引用当前页面中的元素,请将元素的ID分配给xref属性。将元素ID与井号(#)一起分配给xref属性。 示例7显示了一个块图像宏,其中xref属性分配了一个与当前页面上的ID对应的元素ID。

示例7. current-page.adoc
image::panorama.png[xref=#elevation] (1)

The range can be traversed by Cottonwood Pass, Independence Pass, or Hagerman Pass.

[#elevation] (2)
== Pass elevations

The passes usually open in late spring.
1 在属性列表中设置xref属性,后跟等号(=),井号(#),然后是与当前页面上的元素分配的ID对应的元素ID。
2 在当前页面中设置并分配给一个部分的元素ID。

示例7中显示的块图像宏将图像panorama.png嵌入到当前页面,并从图像创建到当前页面上“Pass elevations”部分的链接。

要允许以其原始、无约束大小(在html输出中)打开图像,请添加link=self属性。

了解更多

有关image宏属性的附加信息和有关元素ID的更多信息,请参阅AsciiDoc文档。