Hugo 图片集路径

huangapple go评论76阅读模式
英文:

Hugo Image Set Path

问题

我是新手使用Hugo,遇到了一些自定义主题的问题。这个主题https://github.com/jpanther/congo 利用了Hugo页面包来匹配特色图片字符串。

我想重新利用frontmatter中的"featured:"字段,将图片的名称放在这里,并将其显示为特色图片。

目录结构如下:

Hugo/
  content/
    journal/
      post1.md
      featured-image1.jpeg
      post2.md
      image234.jpg
      ...

文章的frontmatter如下所示:

---
title: Post 1
feature: "featured-image1.jpeg"
...

---
title: Post 2
feature: "image234.jpg"
...

所以,我尝试重写图片的查找方式如下:

<img alt="..." class="..." src="{{ .Params.feature }}" />

这样做效果很好,只要不涉及分页。否则,它会将图片名称与分页的URL连接在一起,而不是在与markdown文件相同的目录中找到图片。

我知道使用页面包和使用static/目录来保存所有图片的好处,但对于我的写作流程来说,这两种方法都有很大的缺点,所以必须让位于上述简化的目录结构中,其中图片保存在与markdown文件相同的目录中,而不是包含在自己的子目录中。

非常感谢您的帮助。
谢谢您的时间,
JB

英文:

I'm new to Hugo, and having some trouble customizing a theme. This theme https://github.com/jpanther/congo takes advantage of Hugo Page Bundles to match a featured image string.

I would like to re-purpose this "featured:" field from the frontmatter to put the name of the image, and have it show up as the featured image.

The directory structure is like below:

Hugo/
  content/
    journal/
      post1.md
      featured-image1.jpeg
      post2.md
      image234.jpg
      ...

frontmatter for the posts would look like this:

---
title: Post 1
feature: &quot;featured-image1.jpeg&quot;
...

and

---
title: Post 2
feature: &quot;image234.jpg&quot;
...

So, I've tried overriding how the images are looked up as below:

&lt;img alt=&quot;...&quot; class=&quot;...&quot; src=&quot;{{ .Params.feature }}&quot; /&gt;

which works great, so long as pagination does not become involved. Otherwise it just happens the image name to the URL with pagination, rather than finding the image in the same directory as the markdown file.

I am aware of the benefits of using Page Bundles, and using the static/ directory to hold all of the images, but these both have huge drawbacka for my writing workflow, and so must give way to the simplified directory structure above where the images are kept in the same directory as the markdown files, and these are notncontained in their own sub-directory.

Any help would be appreciated.
Thank you for your time,
JB

答案1

得分: 1

我认为你需要调用方法.Resources.GetMatch来返回第一个与.Params.feature指定的Glob模式匹配的页面资源的名称,并渲染找到的页面资源:

{{ with .Resources.GetMatch .Params.feature }}
  <img alt="..." class="..." src="{{ .RelPermalink }}" />
{{ end }}

更多信息请参阅图像渲染

英文:

I think you need to call the method .Resources.GetMatch to return the first page resource whose Name matches the given Glob pattern specified by .Params.feature, and then render the found page resource:

{{ with .Resources.GetMatch .Params.feature }}
  &lt;img alt=&quot;...&quot; class=&quot;...&quot; src=&quot;{{ .RelPermalink }}&quot; /&gt;
{{ end }}

See Image Rendering for more information.

答案2

得分: 0

我发现问题是相对路径指向图像的问题。Hugo似乎需要相对于content/目录的完整路径来引用图像。因此,图像需要被引用为feature: /journal/image-name.jpg,而不是feature: image-name.jpg。在进行了这个更改之后,图像可以正确找到。

英文:

I discovered that the issue was the relative path pointing to the images. Hugo seems to need the full path to the images relative to the content/ directory. So, images needed to be referenced not as feature: image-name.jpg but as feature: /journal/image-name.jpg. after making this change, the images are found correctly.

huangapple
  • 本文由 发表于 2023年4月18日 03:48:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76038783.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定