博客中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" . }}

在一个给定的博客帖子中-- foo.Rmd --我把这个放在YAML中：

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

当我让hugo生成一个帖子时，一切都很好，我得到了：

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

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

Answer 1

Twitter卡不支持相对路径，并且您必须在图像标记中使用完全限定的HTTP(S) URL。这在troubleshooting的帖子中有描述。

Answer 2

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

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

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