使用 JSON 的 Hugo Shortcode 抛出"bad character U+0022 error"



我试图用两个参数制作一个短代码,一个CSS类和一个Tweet ID。我的起点是这个例子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>

给出错误CCD_ 5。

这些文档https://gohugo.io/templates/data-templates/#call--functions-with-a-url展示了如何在Hugo中调用JSON函数,但我不知道如何使用这些示例来使我的短代码发挥作用。

自定义内置短代码的最佳方法是从代码开始。

您提供的链接显示了如何使用推特短代码,但它没有显示其代码的实际样子。需要对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 -}}

这就是你的出发点。

但这个例子特别棘手,因为这个快捷代码使用了twitter api设置的样式,而且很难处理

这篇文章可以帮助你。

这里的另一个困难是,如果你查看twitter短代码,你可以看到tweet ID不是由{{ .Get "ID" }}(一个命名的params(调用的,而是由(index .Params 0)(一个位置params(来调用的。Hugo不允许您混合命名参数和位置参数。

因此,您无法在尝试时使用类似{{ .Get "class" }}的内容。相反,您需要使用位置参数,如{{ .Get xx }}xx是您的参数在shortcode调用中的位置。

这里有一个可能的解决方案:

{{- $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 }}。这意味着我现在必须将tweet ID的params位置调整为1

如果您将此短代码命名为tweet-single.html,则可以使用:进行调用

{{< twitter-single right 877500564405444608>}}

把推特放在右边。

以推特为中心,它将是:

{{< twitter-single center 877500564405444608>}}

请注意,rightcenter不带引号,因为它们是位置参数。


替代方法:

如果由于某种原因,这种方法不适用于您,则完全不同的方法是重新创建推文的整个格式(而不使用twitter api(。

如果使用twitter_simple.html而不是twitter.html,Hugo就是这样做的。

如果您查看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 }}

您可以使用此代码,直到您拥有适合自己的自定义。

最新更新