代码之家  ›  专栏  ›  技术社区  ›  Jim

作为图像链接的AscidActor图像

  •  4
  • Jim  · 技术社区  · 7 年前

    以下ASCIIDC代码创建了一个图像(具有适当的样式等),如果单击该图像,则可以打开该图像:

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

    注意jpg文件的路径 ./myimage.jpg 已复制。这是不雅观的,会导致拼写错误,如果路径很长,维护起来会很不方便。

    我的问题是: 是否有一种不需要复制图像路径的简洁方法来实现此效果, 这样图像的路径在代码中只包含一次?

    非常感谢。

    2 回复  |  直到 7 年前
        1
  •  2
  •   9769953    6 年前

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

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

    (另请注意: :: 而不是一个 : ).

    当运行AscidActor时,会出现如下情况:

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

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

        2
  •  0
  •   Jim    7 年前

    我不知道如何在纯Asciidoc中做到这一点,仍然欢迎对此问题的意见。与此同时,我解决了这个问题。

    我在Jekyll,所以我使用了液体模板。我放置了一个文件 myimage _includes 目录

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

    并使用

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

    这实际上是一个小小的简化。全部, 我的图像

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