在img中添加自定义CSS样式

Question

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

当我写下以下内容降价时

![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>

然后在帖子中使用该短代码：

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

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

Answer 2

您可以将原始HTML放在markdown文件中。因此，如果您有想要特殊样式的图像，只需将this.dataService.get(baseUrl, params) .then((object) => { if(object['name'] === 'HttpErrorResponse') { this.error = true; //or any handle } else { this.myObj = object as MyClass } }); 代码粘贴到markdown文件中即可。