Question

我刚刚获得了雨果网站。我需要添加一个og：image来作为示例www.site.com/page1以及子页面www.site.com/page1/something和几十个项目的补充。

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

// 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/"

标题中的Ans {{.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 param。一旦设置，头部部分将获取这些参数。然后根据您的模板和配置，如下所示：

{{ 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/

将og：图片添加到Hugo中的特定页面

1 个答案: