Ху go шорткод, который использует JSON, выбрасывает "плохой символ U + 0022 ошибка" - PullRequest
Новая
       41

Ху go шорткод, который использует JSON, выбрасывает "плохой символ U + 0022 ошибка"

0 голосов
/ 25 апреля 2020

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

{{< 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-функции-с-url показывают, как вызвать JSON функцию в Ху go, но я не знаю, как использовать эти примеры, чтобы заставить мой шорткод работать.

1 Ответ

2 голосов
/ 29 апреля 2020

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

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

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

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

{{- $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-интерфейсом твиттера, и с ним особенно трудно играть.

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

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

Так что вы не можете использовать что-то вроде {{ .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).

Это то, что делает Ху go, если вы используете 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 }}

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

...