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

Я пытаюсь создать шорткод с двумя параметрами: классом CSS и идентификатором твита. Моя отправная точка - это пример https://gohugo.io/content-management/shortcodes/#tweet, в котором показано, как используется шорткод 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/#call-the-functions-with-a-url показывают, как вызвать функцию JSON в Hugo, но я не знаю, как использовать эти примеры, чтобы заставить работать мой шорткод.


twitter hugo hugo-shortcode
person BlueDogRanch    schedule 25.04.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Предоставляемая вами ссылка показывает как использовать шорткод твита, но не показывает, как на самом деле выглядит его код. Чтобы найти, как на самом деле выглядят встроенные шорткоды, нужно немного покопаться в исходном коде 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 }}

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

person prosoitos    schedule 29.04.2020
comment
Спасибо! Они отлично работают. Я использовал свой собственный CSS, а не цитату. - person BlueDogRanch; 29.04.2020
comment
Рад, что смог помочь. - person prosoitos; 29.04.2020