Reading time: 2 minutes

Opengraph žymos su Hugo






O kodėl gi ne? Tai ganėtinai paprasta. Juolab, kadangi Hugo puslapių generatorius pagal nutylėjimą geba generuoti meta žymas socialiniams tinklams.

Kaip?

Susikurkite opengraph partial (šabloninį) failą. Failo plėtinys - html.

opengraph

Į failo vidų įtraukite šiuos du papildomus vidinius Hugo šablonus.

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}

Na, o dabar belieka įtraukti naujai susikurtą plėtinį kur nors į savo temos “head” dalį. Jos aprašas dažniausiai taip pat būna tame pačiame partials kataloge. Patogu, tiesa?

Pavyzdys:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"{{with .Site.LanguageCode}} xml:lang="{{.}}" lang="{{.}}"{{end}}>
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  {{ hugo.Generator }}

  <!-- Enable responsiveness on mobile devices-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  {{ if .IsHome -}}
  <title>{{ .Site.Title }}</title>
  {{- else -}}
  <title>{{ .Title }} &middot; {{ .Site.Title }}</title>
  {{- end }}
  <meta name="description" content="{{if .IsHome}}{{ $.Site.Params.description }}{{else}}{{.Description}}{{end}}" />

  <!-- CSS -->
  <link type="text/css" rel="stylesheet" href="{{ .Site.BaseURL }}css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="{{ .Site.BaseURL }}css/poole.css">
  <link type="text/css" rel="stylesheet" href="{{ .Site.BaseURL }}css/syntax.css">
  <link type="text/css" rel="stylesheet" href="{{ .Site.BaseURL }}css/hyde.css">
  <link type="text/css" rel="stylesheet" href="{{ .Site.BaseURL }}css/lightbox.css">
  {{ partial "head_fonts.html" . }}

  <!-- Icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  <!-- RSS etc -->
  {{ range .AlternativeOutputFormats -}}
    {{ printf `<link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML }}
  {{ end -}}
  {{ partial "opengraph.html" . }}
  {{ partial "hook_head_end.html" . }}
</head>

O toliau? Vos viena komanda, jei naudojate Firebase Hosting:

hugo && firebase deploy

Visa pateikiama informacija - asmeninė autoriaus nuomonė. Kilus naiškumams rekomenduojama susisiekti elektroniniu paštu: admin@artefaktas.eu

Comments

comments powered by Disqus