Question

我正在使用HTML片段，例如

geometry

将经过缩放和偏移的图像插入Hugo中的博客文章。不幸的是，我发现最新版本的Hugo无法以这种方式插入图像。如果我通过Markdown插入图像，则图像插入效果很好，但似乎无法应用样式标签？

关于如何在此处诊断问题的任何建议？我现在很茫然。

Answer 1

不确定是否有帮助，但我稍微整理了一下语法。

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

Answer 2

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

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

这在Hugo 0.60.0中与CommonMark compliance并存。

Answer 3

我希望将HTML尽可能地保留在MD之外；将任何内容设置为“不安全”总是会让我有些紧张，并且我猜想这是参数被命名为“不安全”时的意图！

我认为我的首要选择是使用figure shortcode，它支持类名以及诸如标题和标题之类的易用字符（可能具有可访问性和SEO优势）。 / p>

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

如果不合适，则选项可以是自定义的简码，也可以通过纯CSS定位，如果需要，您可以使用nth-child在左右交替显示图像。

编辑-其他信息

创建一个CSS文件并将其链接到头部，例如，我的<project-root>static/styles/main.css位于布局的头部

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

非常重要的一点是，static不是url / href的一部分。

在上面我给图形指定了pull-left类，因此在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链接标记。（有趣的是，如果您想从头开始创建主题，主题是可选的）

您还可以在配置文件中指定文件

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插入雨果未呈现的博客帖子中的图像

3 个答案: