如何在 Pelican 中向 img 标签添加属性答案

【问题标题】：How I can add attribute to img tag in Pelican如何在 Pelican 中向 img 标签添加属性
【发布时间】：2017-05-06 10:37:27
【问题描述】：

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

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

但是，我只能添加 alt、width、height，如下所示，作为 Pelican 的结果。

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

【问题讨论】：

标签： python pelican

【解决方案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。

【讨论】：