image - 添加 og : image to specific pages in Hugo

Question

我刚收到一个 hugo 网站。我需要为示例 www.site.com/page1 以及子页面 www.site.com/page1/something 和一些添加 og:image还有十几个项目...

我正在阅读文档并找到了这个。

// First in config.toml use the following:
baseURL = "//example.com" [params] og_image = "/some-image.jpg"

// Then in a post’s frontmater set a parameter for the OpenGraph image
og_image = "/images/1.jpg"

// And in the HEAD partial put the following:
> {{ if .Params.og_image }} > `` > `` > {{ else }} > `` > `` > {{ end }}
// And that’s it.

我无法理解将什么放入params。 > `` > 是什么意思 我应该在哪里包含 meta-tag，你能给我解释一下吗？我以前从未使用过 Hugo，而且文档有点奇怪...基本上，对于这样的每个页面和子页面，我想使用 og:image 的图像..

目前在我的 config.yaml 中，我有:

baseurl: "www.site.com/"

标题中的答案 {{ .Hugo.Generator }}

    {{ if isset $.Params "ogtype" }}
    <meta property="og:type" content="{{ .Params.ogtype }}">
    {{ end }}

    {{ if isset $.Params "ogimage" }}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@siteLtD">
    <meta property="og:title" content="{{ .Params.title }}">
    <meta property="twitter:title" content="{{ .Params.title }}">
    <meta property="og:image" content="{{ .Params.ogimage }}">
    <meta property="twitter:image" content="{{ .Params.ogimage }}">
    {{ else }}
    <meta property="og:image" content="www.site.com/images/site-ogi.png">

如果您能指导我实际需要包含哪些内容才能使子页面获得特定图像，那将非常感谢!

Answer 1

您需要在 config.yaml 中指定您的图像。然后我假设您的主题的“帖子”前面内容也采用 og 参数。一旦设置，头部部分就会获取这些参数。然后根据您的模板和配置，类似于:

{{ with .Params.images }}{{ range something . }}
  <meta property="og:image" content="{{ . | absURL }}" />
{{ end }}

参见:https://gohugo.io/templates/internal/#configure-open-graph & https://gohugo.io/variables/page/

此外，由于您是 Hugo 的新手，我建议您阅读有关模板、使用局部变量等的文档，以更好地理解在哪里使用 meta-tag 和其他最佳实践，因为这也可能因主题而异。这也应该有所帮助:http://brendan-quinn.xyz/post/working-with-hugos-internal-partial-templates-facebook-and-open-graph/