我正在尝试使用两个参数(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>
给我错误bad character U+0022 ‘"’
。
这些文档https://gohugo.io/templates/data-templates/#call-the-functions-with-a-url显示了如何在Hugo中调用JSON函数,但我不知道如何使用这些示例来使我的短代码正常工作。
自定义内置短代码的最佳方法是从其代码开始。
您提供的链接显示了如何使用 tweet短代码,但未显示其代码的实际外观。它需要深入研究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设置的样式,因此很难摆弄它。
[This post可以帮助您。
[这里的另一个困难是,如果您查看Twitter的短代码,您会看到,推特ID不是由{{ .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 }}
用作该职位。这意味着我现在必须将推特ID的参数位置调整为1
。
如果您将此短代码命名为tweet-single.html
,则可以使用以下代码调用它:
{{< twitter-single right 877500564405444608>}}
将推文显示在右侧。
要使tweet居中,应该是:
{{< twitter-single center 877500564405444608>}}
请注意,right
或center
不能使用引号,因为它们是位置参数。
替代方法:
如果此方法由于某种原因对您不起作用,则完全不同的方法是重新创建tweet的整个格式(不使用twitter api的功能。
这是Hugo在使用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 }}
您可以使用此代码,直到您进行适合您的自定义。