Антон Малявский Антон Малявский

Генерация изображения open graph в Hugo

3 января 2024 г.

В Hugo можно генерировать изображение Open Graph . В качестве примера я использовал тему для сайта Hugo — gohugo.io.

Структура  Ссылка на этот раздел

├──layouts
│   ├── partials
│   │   ├── opengraph
│   │   │   ├── get-featured-image.html
│   │   │   ├── opengraph.html
│   │   │   ├── twitter_cards.html

Шаблоны  Ссылка на этот раздел

get-featured-image.html

{{ $images := $.Resources.ByType "image" }}
{{ $featured := $images.GetMatch "*feature*" }}
{{ if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end }}
{{ if not $featured }}
    {{ $featured = resources.Get "/opengraph/gohugoio-card-base-1.png" }}
    {{ $size := 80 }}
    {{ $title := $.LinkTitle }}
    {{ if gt (len $title) 20 }}
    {{ $size = 70 }}
    {{ end }}

    {{ $text := $title }}
                {{ $textOptions := dict 
                    "color" "#FFF"
                    "size" $size
                    "lineSpacing" 10
                    "x" 65 "y" 80
                    "font" (resources.Get "/opengraph/mulish-black.ttf")
                }}

    {{ $featured = $featured | images.Filter (images.Text $text $textOptions) }}
{{ end }}

{{ return $featured }}

opengraph.html

<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />

{{- with $.Params.images -}}
{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
{{- else -}}
{{- $featured := partial "opengraph/get-featured-image.html" . }}
{{- with $featured -}}
<meta property="og:image" content="{{ $featured.Permalink }}"/>
{{- else -}}
{{- with $.Site.Params.images }}<meta property="og:image" content="{{ index . 0 | absURL }}"/>{{ end -}}
{{- end -}}
{{- end -}}

{{- if .IsPage }}
{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
<meta property="article:section" content="{{ .Section }}" />
{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{- end -}}

{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
{{- with .Params.videos }}{{- range . }}
<meta property="og:video" content="{{ . | absURL }}" />
{{ end }}{{ end }}

{{- /* If it is part of a series, link to related articles */}}
{{- $permalink := .Permalink }}
{{- $siteSeries := .Site.Taxonomies.series }}
{{ with .Params.series }}{{- range $name := . }}
  {{- $series := index $siteSeries ($name | urlize) }}
  {{- range $page := first 6 $series.Pages }}
    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
  {{- end }}
{{ end }}{{ end }}

{{- /* Facebook Page Admin ID for Domain Insights */}}
{{- with site.Params.social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}

twitter_cards.html

{{- with $.Params.images -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
{{ else -}}
{{- $featured := partial "opengraph/get-featured-image.html" . }}
{{- with $featured -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ $featured.Permalink }}"/>
{{- else -}}
{{- with $.Site.Params.images -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
{{ else -}}
<meta name="twitter:card" content="summary"/>
{{- end -}}
{{- end -}}
{{- end }}
<meta name="twitter:title" content="{{ .Title }}"/>
<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
{{ with site.Params.social.twitter -}}
<meta name="twitter:site" content="@{{ . }}"/>
{{ end -}}

Источники  Ссылка на этот раздел

Понравилось? Подпишитесь на меня!
RSS ТелеграмМастодонт