html - Asciidoctor 图像是图像的链接

Question

下面的 Asciidoc 代码创建了一个图像(具有合适的样式等)，这样如果你点击它，你就会打开图像:

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

注意 jpg 文件的路径 ./myimage.jpg是重复的。这是不优雅的，会导致拼写错误，如果路径很长，维护起来会变得非常不方便。

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

谢谢你。

Answer 1

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

: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是必须的。

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

: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}"]

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