【问题标题】:Relative image paths for Twitter cards in blogdownblogdown 中 Twitter 卡片的相对图像路径
【发布时间】:2018-02-05 12:43:00
【问题描述】:

我正在尝试在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 前端设置一个不同的路径,但我找不到任何关于路径格式应该是什么的文档,并且所有教程在他们的示例中都使用绝对 url。

【问题讨论】:

    标签: r twitter r-markdown hugo blogdown


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

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

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

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

      【讨论】:

      • 与 Hugo Academic serve_site()baseurl 之类的 "https://strimas.com/" 转换为 "/",这打破了 Twitter 卡。鉴于此,您如何建议我们使用 blogdown 获取 Twitter 卡片中图像的绝对路径?
      • 值得注意的是,build_site() 使用正确的 baseurl 并且 Twitter 卡片可以正常工作,直到您使用 serve_site(),这又会破坏它们
      • 在这里提出了一个问题:stackoverflow.com/questions/60807293/…
      猜你喜欢
      • 1970-01-01
      • 2013-07-25
      • 2017-12-22
      • 2018-10-01
      • 2013-12-18
      • 2011-07-06
      • 2018-06-05
      • 1970-01-01
      • 2011-08-25
      相关资源
      最近更新 更多