Шорткод Hugo, использующий JSON, выдает "ошибку неверного символа U+0022"

Question

Я пытаюсь создать шорткод с двумя параметрами: классом CSS и идентификатором твита. Моя отправная точка - это пример https://gohugo.io/content-management/shortcodes/, который показывает, как используется шорткод Hugo Twitter по умолчанию.

{{< tweet 877500564405444608 >}}

Но я хочу использовать это в post.md:

{{< tweet-single class="alignright" id="877500564405444608" >}}

для создания html:

<div class="tweet-in-post alignright">
<twitter-widget class=....
</div>

но используя это в tweet-single.html

<!-- tweet-single -->

<div class="tweet-in-post {{ .Get "class" }}">

{{ (getJSON "https://api.twitter.com/1.1/statuses/oembed.json?dnt=1&hide_thread=1&id={{ .Get "id" }}") }}

</div>

дает мне ошибку bad character U+0022 ‘"’.

Эти документы https://gohugo.io/templates/data-templates/ показывают, как вызвать функцию JSON в Hugo, но я не знаю, как использовать эти примеры, чтобы получить мой шорткод для работы.

Answer 1

Лучший способ настроить встроенный шорткод - начать с его кода.

Предоставляемая вами ссылка показывает, как использовать шорткод твита, но не показывает, как на самом деле выглядит его код. Требуется немного покопаться в исходном коде Hugo, чтобы на самом деле найти, как выглядят встроенные шорткоды.

Вы можете найти их здесь: https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates/shortcodes.

Начиная с текущего коммита (67f9204), вот так выглядит шорткод twitter:

{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/twitter_simple.html" . }}
{{- else -}}
{{- $url := printf "https://api.twitter.com/1/statuses/oembed.json?id=%v&dnt=%t" (index .Params 0) $pc.EnableDNT -}}
{{- $json := getJSON $url -}}
{{ $json.html | safeHTML }}
{{- end -}}
{{- end -}}

Итак, это ваша отправная точка.

Но этот пример особенно сложен, потому что этот шорткод использует стиль, установленный API-интерфейсом twitter, и с ним особенно сложно возиться.

Этот пост может вам в этом помочь.

Другая трудность заключается в том, что, если вы посмотрите на шорткод твиттера, вы увидите, что идентификатор твита не вызывается {{ .Get "ID" }} (именованные параметры), но (index .Params 0)(позиционные параметры). И Hugo не позволяет смешивать именованные и позиционные параметры.

Таким образом, вы не можете использовать что-то вроде {{ .Get "class" }}как вы пытались. Вместо этого вам нужно использовать позиционные параметры, такие как{{ .Get xx }}, xx позиция ваших параметров в вызове шорткода.

Вот возможное решение:

{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/twitter_simple.html" . }}
{{- else -}}
<blockquote class="twitter-tweet tw-align-{{ .Get 0 }}" data-lang="en">
  {{- $url := printf "https://api.twitter.com/1/statuses/oembed.json?id=%v&dnt=%t" (index .Params 1) $pc.EnableDNT -}}
  {{- $json := getJSON $url -}}
  {{ $json.html | safeHTML }}
</blockquote>
{{- end -}}
{{- end -}}

Как видите, я добавил несколько <blockquote> настройка, следуя ответу на сообщение, которое я упомянул выше, и я использую {{ .Get 0 }}на должность. Это означает, что теперь мне нужно настроить положение параметров для идентификатора твита, чтобы1.

Если вы назовете этот шорткод tweet-single.html, вы можете вызвать его с помощью:

{{< twitter-single right 877500564405444608>}}

чтобы твит был справа.

Чтобы твит был центрирован, это будет:

{{< twitter-single center 877500564405444608>}}

Обратите внимание, что right или center не берите кавычки, так как они позиционные параметры.

---

Альтернативный подход:

Если этот подход по какой-то причине не работает для вас, совершенно другим подходом будет воссоздание всего форматирования твита (без использования того, что делает твиттер api).

Это то, что делает Хьюго, если вы используете twitter_simple.html вместо того twitter.html.

Если вы посмотрите на twitter_simple.html, вы можете видеть, что они пропускают скрипт стилизации и вместо этого воссоздают более простое форматирование для .twitter-tweet класс:

{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- $sc := .Page.Site.Config.Services.Twitter -}}
{{- if not $pc.Disable -}}
{{- $id := .Get 0 -}}
{{- $json := getJSON "https://api.twitter.com/1/statuses/oembed.json?id=" $id "&omit_script=true" -}}
{{- if not $sc.DisableInlineCSS -}}
{{ template "__h_simple_twitter_css" $ }}
{{- end -}}
{{ $json.html | safeHTML }}
{{- end -}}

{{ define "__h_simple_twitter_css" }}
{{ if not (.Page.Scratch.Get "__h_simple_twitter_css") }}
{{/* Only include once */}}
{{  .Page.Scratch.Set "__h_simple_twitter_css" true }}
<style type="text/css">
  .twitter-tweet {
  font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  border-left: 4px solid #2b7bb9;
  padding-left: 1.5em;
  color: #555;
}
  .twitter-tweet a {
  color: #2b7bb9;
  text-decoration: none;
}
  blockquote.twitter-tweet a:hover,
  blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}
</style>
{{ end }}
{{ end }}

Вы можете играть с этим кодом, пока не получите подходящую настройку.