blogdown 中 Twitter 卡片的相对图像路径 [英] Relative image paths for Twitter cards in blogdown

问题描述

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

I'm trying to set up a template for generating Twitter Cards in blogdown. It put the following in 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 中:

In a given blogpost -- foo.Rmd -- I then put this in the YAML:

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

当我让 Hugo 生成帖子时，一切正常，我得到:

When I let hugo generate a post everything works fine and I get:

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

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

However, when I preview my Twitter card the picture doesn't show up. I presume I would have to set a different path in the YAML front matter, but I can't find any documentation on what the path format should be, and all tutorials use absolute urls in their examples.

推荐答案

Twitter 卡片不支持相对路径，您必须在图像标签中使用完全限定的 HTTP(S) URL.这在 问题排查帖子.

Twitter cards do not support relative paths, and you have to use a fully-qualified HTTP(S) URL in the image tag. This is described in the troubleshooting post.

这篇关于blogdown 中 Twitter 卡片的相对图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！