python - 我如何将属性添加到 Pelican 中的 img 标签

Question

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

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

但是，我只能添加 alt、width、height 作为 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、目标、类 和名称。