如何获取页面/帖子精选图像显示在Twitter Card上?雨果(学术主题)

时间:2019-05-24 15:59:17

标签: html github twitter markdown hugo

我一直很难让Twitter Cards可以为我的帖子提供特色图片。特色图片在Facebook和Linkedin上都显示为张贴网址,但我无法使用推特卡。

我已经尝试过浏览学术标题中的twitter卡代码,并且还遵循了Hugo文档。我不确定它是否缺少或忽略了什么?任何帮助或建议,将不胜感激。

我在 academic header.html部分中找到了此代码,但是我仍然不确定为什么它不起作用:


  {{ $featured_image := (.Resources.ByType "image").GetMatch "*featured*" }}
  {{ $og_image := "" }}
  {{ $twitter_card := "summary_large_image" }}
  {{ if $featured_image }}
    {{ $og_image = $featured_image.Permalink }}
  {{ else if .Params.header.image }}
    {{ $og_image = printf "img/%s" .Params.header.image | absURL }}
  {{ else if .Site.Params.sharing_image }}
    {{ $og_image = printf "img/%s" .Site.Params.sharing_image | absURL }}
  {{ else if .Site.Params.avatar }}
    {{ $og_image = (printf "img/%s" site.Params.avatar) | absURL }}
    {{ $twitter_card = "summary" }}
  {{ else }}
    {{ $og_image = "img/icon-192.png" | absURL }}
    {{ $twitter_card = "summary" }}
  {{ end }}
  <meta property="twitter:card" content="{{ $twitter_card }}">
  {{ with .Site.Params.twitter }}
  <meta property="twitter:site" content="@{{ . }}">
  <meta property="twitter:creator" content="@{{ . }}">
  {{ end }}
  <meta property="og:site_name" content="{{ .Site.Title }}">
  <meta property="og:url" content="{{ .Permalink }}">
  <meta property="og:title" content="{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}">
  <meta property="og:description" content="{{ $desc }}">
  {{- with $og_image }}<meta property="og:image" content="{{ . }}">{{end}}
  <meta property="og:locale" content="{{ .Site.LanguageCode | default "en-us" }}">
  {{ if .IsPage }}
  {{ if not .PublishDate.IsZero }}<meta property="article:published_time" content="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">
  {{ else if not .Date.IsZero }}<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
  {{ if not .Lastmod.IsZero }}<meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
  {{ else }}
  {{ if not .Date.IsZero }}<meta property="og:updated_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
  {{ end }}

twitter卡验证程序日志显示以下内容:

INFO:  Page fetched successfully
INFO:  18 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

但是,没有图像出现。解决该问题的任何帮助或技巧将不胜感激?

1 个答案:

答案 0 :(得分:0)

碰巧,我遇到的问题是由于Hugo的config.toml文件中的"companyName"错误。一次,我纠正了此错误,Twitter摘要卡开始正常显示。