链接到图像的 Asciidoctor 图像

Question

以下 Asciidoc 代码创建了一个图像（具有合适的样式等），如果您单击它，您将打开该图像：

image:./myimage.jpg[my alt text, role="my css styling", link="./myimage.jpg"]

注意 jpg 文件的路径 ./myimage.jpg 是重复的。这很不优雅，容易出现错别字，如果路径很长，维护起来会很不方便。

我的问题是： 是否有不需要复制图像路径的巧妙方法来实现这种效果，以便图像路径在代码中只包含一次？

谢谢。

Answer 1

我看不出如何在纯 Asciidoc 中做到这一点，但仍然欢迎就此事提出意见。与此同时，我解决了这个问题。

我在 Jekyll，所以我使用了 Liquid 模板。我在 _includes 目录

中放置了一个文件 myimage

image:{{ include.p }}[{{ include.t }}, link="{{ include.p }}"]

并用

调用它

{% include myimage p="image-name.jpg" t="alt text" %}

这实际上是一个轻微的简化。完整地说，myimage 是

[.cssstyling]#image:{{ include.p }}[{{ include.t }}, link="{{ include.p }}"]{% if include.c != null %}_{{include.c}}_{% endif %}#

并且调用是以下之一：

{% include myimage p="image-name.jpg" t="alt text" %}
{% include myimage p="image-name.jpg" t="alt text" c="optional caption" %}

Answer 2

这可以通过定义一个属性来实现：

:myimage: ./myimage.png
image::{myimage}[my alt text, role="my css styling", link="{myimage}"]

（另请注意：:: 而不是单个 :）。

当通过 AsciiDoctor 运行时，这会变成如下所示：

<div class="content">
<a class="image" href="./myimage.png"><img src="./myimage.png" alt="my alt text"></a>
</div>

这显然是更多的文字，但正如您所提到的，维护（当然对于长文件名或外部图像的 URL）变得更容易。

请注意 :myimage: 和 ./myimage.png 之间的 space 是必需的。

另外，如果您稍后在文档中重新定义该属性，只会影响该属性的下一次使用。因此，

:myimage: ./myimage.png
image::{myimage}[my alt text, role="my css styling", link="{myimage}"]

:myimage: ./myimage2.png
image::{myimage}[my second alt text, role="my css styling", link="{myimage}"]

将呈现两个不同的图像：第二个属性定义不会覆盖第一个。
尽管在这种情况下人们可能更喜欢不同的属性名称。

链接到图像的 Asciidoctor 图像

Asciidoctor images that are links to the image

html

asciidoc