通过 HTML 插入到非 Hugo 渲染的博文中的图像

Question

我正在使用 HTML 片段，例如

<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px" border="0" />

在 Hugo 的博文中插入缩放和偏移图像。不幸的是，我发现最新版本的 Hugo 无法渲染以这种方式插入的图像。如果我通过 Markdown 插入图片，图片插入正常，但似乎无法应用样式标签？

关于如何诊断这里的问题有什么建议吗？我现在很茫然。

Answer 1

不确定这是否有帮助，但我稍微清理了你的语法。

<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px; border:0px;" />

Answer 2

事实证明，内联 HTML 被 Hugo 过滤掉了。需要将以下内容添加到 config.toml 以允许将 HTML 插入结果页面。

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

这在 Hugo 0.60.0 中实现了 CommonMark compliance。

Answer 3

我宁愿让 HTML 尽可能远离 MD；将任何设置设置为“不安全”总是让我有点紧张，我猜想这就是参数被命名为“不安全”的意图！

我认为我的第一个停靠点是使用 figure shortcode，它支持 class 名称，以及 nice-to-haves 之类的字幕和标题（可能具有可访问性和 SEO 优势）。

{{< figure src="site.jpg" title="Cool Image" class="pull-left" >}}

如果这不合适，选项将是自定义短代码，或通过纯 css 定位，如果需要，您可以使用 nth-child 左右交替图像。

编辑 - 附加信息

创建一个 CSS 文件并将其 link 放在头部，例如我有 <project-root>static/styles/main.css 并且在我的布局头部

<link href="/styles/main.css" rel="stylesheet" type="text/css">

非常重要的是要注意 static 不是 url/href 的一部分。

上面我给图分配了 pull-left 的 class 所以在 main.css 你的风格看起来像

.pull-left{
    width:100px; 
    float:left; 
    margin: 0px 5px 5px 0px;
}

添加了来自 Link in Comments

的详细信息

最好复制主题文件而不是覆盖，所以创建

layouts -> partials -> head.html

通常复制自

themes -> actual-theme -> layouts -> partials -> head.html

并添加正常的 HTML link 标签。（有趣的额外事实，如果你想从头开始创建主题是可选的）

你也可以在配置文件中指定文件

custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]

并使用此代码添加到 head.html

// css 
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

// javascript
{{ range .Site.Params.custom_js -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

通过 HTML 插入到非 Hugo 渲染的博文中的图像

Images inserted via HTML into blog posts not rendered by Hugo

html

css

hugo