Генерация изображения open graph в Hugo
3 января 2024 г.
В Hugo можно генерировать изображение Open Graph. В качестве примера я использовал тему для сайта Hugo — gohugo.io.
Структура
1├──layouts
2│ ├── partials
3│ │ ├── opengraph
4│ │ │ ├── get-featured-image.html
5│ │ │ ├── opengraph.html
6│ │ │ ├── twitter_cards.htmlШаблоны
get-featured-image.html
1{{ $images := $.Resources.ByType "image" }}
2{{ $featured := $images.GetMatch "*feature*" }}
3{{ if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end }}
4{{ if not $featured }}
5 {{ $featured = resources.Get "/opengraph/gohugoio-card-base-1.png" }}
6 {{ $size := 80 }}
7 {{ $title := $.LinkTitle }}
8 {{ if gt (len $title) 20 }}
9 {{ $size = 70 }}
10 {{ end }}
11
12 {{ $text := $title }}
13 {{ $textOptions := dict
14 "color" "#FFF"
15 "size" $size
16 "lineSpacing" 10
17 "x" 65 "y" 80
18 "font" (resources.Get "/opengraph/mulish-black.ttf")
19 }}
20
21 {{ $featured = $featured | images.Filter (images.Text $text $textOptions) }}
22{{ end }}
23
24{{ return $featured }}opengraph.html
1<meta property="og:title" content="{{ .Title }}" />
2<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
3<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
4<meta property="og:url" content="{{ .Permalink }}" />
5
6{{- with $.Params.images -}}
7{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
8{{- else -}}
9{{- $featured := partial "opengraph/get-featured-image.html" . }}
10{{- with $featured -}}
11<meta property="og:image" content="{{ $featured.Permalink }}"/>
12{{- else -}}
13{{- with $.Site.Params.images }}<meta property="og:image" content="{{ index . 0 | absURL }}"/>{{ end -}}
14{{- end -}}
15{{- end -}}
16
17{{- if .IsPage }}
18{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
19<meta property="article:section" content="{{ .Section }}" />
20{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
21{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
22{{- end -}}
23
24{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
25{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
26{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
27{{- with .Params.videos }}{{- range . }}
28<meta property="og:video" content="{{ . | absURL }}" />
29{{ end }}{{ end }}
30
31{{- /* If it is part of a series, link to related articles */}}
32{{- $permalink := .Permalink }}
33{{- $siteSeries := .Site.Taxonomies.series }}
34{{ with .Params.series }}{{- range $name := . }}
35 {{- $series := index $siteSeries ($name | urlize) }}
36 {{- range $page := first 6 $series.Pages }}
37 {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
38 {{- end }}
39{{ end }}{{ end }}
40
41{{- /* Facebook Page Admin ID for Domain Insights */}}
42{{- with site.Params.social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}twitter_cards.html
1{{- with $.Params.images -}}
2<meta name="twitter:card" content="summary_large_image"/>
3<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
4{{ else -}}
5{{- $featured := partial "opengraph/get-featured-image.html" . }}
6{{- with $featured -}}
7<meta name="twitter:card" content="summary_large_image"/>
8<meta name="twitter:image" content="{{ $featured.Permalink }}"/>
9{{- else -}}
10{{- with $.Site.Params.images -}}
11<meta name="twitter:card" content="summary_large_image"/>
12<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
13{{ else -}}
14<meta name="twitter:card" content="summary"/>
15{{- end -}}
16{{- end -}}
17{{- end }}
18<meta name="twitter:title" content="{{ .Title }}"/>
19<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
20{{ with site.Params.social.twitter -}}
21<meta name="twitter:site" content="@{{ . }}"/>
22{{ end -}}