Question

我想为图像标记添加属性，以便从JavaScript库中引用，如下所示。

<img src="img/sample.png" data-action="zoom">

但是，我只能添加alt，宽度，高度，如下所示，来自Pelican的结果。

<img alt="thumbnail" height="250px" src="/images/mech2.jpg">

Answer 1

如果您使用Markdown（.md）文件来创建文章，那么您可以直接包含一个包含您喜欢的任何属性的图像元素：

![This image is in Markdown format]({filename}/images/foo.png)

<img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom" >

会变成：

<p><img alt="This image is in Markdown format" src="../images/foo.png"></p>
<p><img alt="This one is just a literal element" src="../images/bar.png" data-action="zoom"></p>

对于reStructuredText（.rst）文章，你不能这样做; per the documentation仅支持一组有限的图像选项*，如果您只是尝试包含HTML内联，则会按原样呈现：

.. image:: {filename}/images/foo.png
   :alt: this is an RST image directive

<img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom">

变为：

<img alt="this is an RST image directive" src="../../../images/foo.png">
<p>&lt;img alt="This one is just a literal element" src="{filename}/images/bar.png" data-action="zoom"&gt;</p>

*具体来说：alt，height，width，scale，align，target，class和name。

如何在Pelican中为img标签添加属性

1 个答案: