blogdown 中 Twitter 卡片的相对图像路径

Question

我正在尝试在 blogdown 中设置用于生成 Twitter 卡片的模板。它将以下内容放入 layouts/partials/twitter-card.html:

<meta name="twitter:site" content="@myname">
<meta name="twitter:creator" content="@myname">
{{ if .IsPage }}
<meta name="twitter:description" content="{{ .Summary }}" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ .Params.image }}" /> {{ else }}
<meta name="twitter:title" content="{{ .Site.Title }}" />
<meta name="twitter:description" content="{{ .Description }}" /> {{ end }}

以及 layouts/partials/head.html 中的以下内容：

{{ partial "twitter-card" . }}

在给定的博客中post -- foo.Rmd -- 然后我将其放入 YAML 中：

image: "static/post/foo/figure-html/some_image.png"

当我让 hugo 生成 post 时，一切正常，我得到：

<meta name="twitter:image" content="static/post/fixed-points_files/figure-html/some_image.png" />

但是，当我preview my Twitter card 时，图片没有显示。我想我必须在 YAML 前端设置不同的路径，但我找不到任何关于路径格式应该是什么的文档，并且所有教程在他们的示例中都使用绝对 url。

Answer 1

在这种情况下，我建议您使用绝对 URL：

image: "/post/foo/figure-html/some_image.png"

请注意，您应该删除目录名称 static (Why?)。

Answer 2

Twitter 卡片不支持相对路径，您必须在图像标记中使用完全限定的 HTTP(S) URL。这在 troubleshooting post.

中有描述

blogdown 中 Twitter 卡片的相对图像路径

Relative image paths for Twitter cards in blogdown

twitter

r

r-markdown

hugo

blogdown