在 img 中添加自定义 CSS 样式

Question

目前，我正在使用 hugo material 主题：https://github.com/digitalcraftsman/hugo-material-docs

当我写下如下内容markdown

![practice-signup-1](/images/practice-signup-1.png)

Hugo 将生成以下 HTML 代码

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1"></p>

但是，我希望将以下样式添加到我的 img 标签中

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

我想知道，我怎样才能做到这一点？

Answer 1

您可以为其创建短代码。

在 /themes/your-theme-dir/layouts/shortcodes/img.html 中制作您自己的简码。

<p><img src="{{ .Get 0 }}" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

然后在您的 post:

中使用该短代码

{{< img https://investing.jstock.co/images/practice-signup-1.png >}}

其他方式，您可以在 css 文件中添加样式而不是创建内联样式。

Answer 2

您可以将原始 HTML 放入降价文件中。因此，如果您有想要特殊样式的图像，只需将 <img src.. 代码粘贴到您的 markdown 文件中即可。

在 img 中添加自定义 CSS 样式

Adding custom CSS style in img

markdown

hugo