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

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

Answer 2

我无法看到如何在纯Asciidoc中做到这一点，并仍然欢迎对此事的意见。与此同时，我解决了这个问题。

我在Jekyll所以我使用了Liquid模板。我将文件myimage放在_includes目录

中

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" %}

Asciidoctor图像链接到图像

2 个答案: