Zola 从 WordPress 中借用了短代码的概念。在我们的例子中,短代码对应于目录中定义的模板templates/shortcodes
,可以在 Markdown 文件中使用。
从广义上讲,Zola 的短代码涵盖两个不同的用例:
后者也可以通过编写 HTML 来解决,但是 Zola 允许使用.md
以.html
. 如果您想在
目录中包含由短代码生成的标题,这可能特别有用。
如果你想在模板中使用类似于短代码的东西,你可以使用Tera macros。它们是您可以调用以返回一些文本的函数或组件。
让我们编写一个简码来嵌入 YouTube 视频作为示例。youtube.html
在目录中调用的文件中templates/shortcodes
,粘贴以下内容:
<div {% if class %}class="{{class}}"{% endif %}>
<iframe
src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
</div>
这个模板非常简单:一个指向 YouTube 嵌入 URL 的 iframe,包裹在一个<div>
. 在输入方面,此短代码至少需要一个变量:id
. 因为其他变量在if
语句中,所以它们是可选的。
就是这样。youtube
Zola 现在会将此模板识别为名为(文件名减去扩展名)的简码.html
。
Markdown 渲染器会将一个内联 HTML 节点(例如<a>
或 )包装<span>
到一个段落中。如果您想禁用此行为,请将您的简码包装在一个<div>
.
基于 Markdown 的短代码将被视为返回的内容是页面正文的一部分。例如,如果我们创建
books.md
:templates/shortcodes
{% set data = load_data(path=path) -%}
{% for book in data.books %}
### {{ book.title }}
{{ book.description | safe }}
{% endfor %}
这将创建一个短代码books
,其参数path
指向一个.toml
文件,在该文件中加载带有标题和描述的书籍列表。它们将与被调用的文档的其余部分一起流动books
。
简码在解析页面的 Markdown 之前呈现,因此它们无权访问页面的目录。因此,您也不能使用// /get_page
全局get_section
函数。它可能在运行时工作,因为它已被加载,但在.get_taxonomy
get_taxonomy_term
zola serve
zola build
短代码有两种:
在这两种情况下,参数都必须命名,并且它们都将传递给模板。即使没有参数,括号也是强制性的。
最后,短代码名称(以及相应的.html
文件)以及参数名称只能包含数字、字母和下划线,或者在正则表达式中[0-9A-Za-z_]
。虽然理论上参数名称可以是数字,但不可能在模板中使用这样的参数。
参数值可以是五种类型之一:
true
或false
格式错误的值将被忽略。
两种类型的简码也将获得 apage
或section
变量,具体取决于它们的使用位置和config
变量。这些值将覆盖传递给短代码的任何参数,因此这些变量名称不应用作短代码中的参数名称。
只需调用短代码,就好像它是变量块中的 Tera 函数一样。
Here is a YouTube video:
{{ youtube(id="dQw4w9WgXcQ") }}
{{ youtube(id="dQw4w9WgXcQ", autoplay=true) }}
An inline {{ youtube(id="dQw4w9WgXcQ", autoplay=true, class="youtube") }} shortcode
请注意,如果您想要一些看起来像短代码但不让 Zola 尝试呈现它的内容,您将需要使用{{/*
and*/}}
而不是{{
and来转义它}}
。
假设我们有以下短代码quote.html
模板:
<blockquote>
{{ body }} <br>
-- {{ author}}
</blockquote>
我们可以像这样在我们的 Markdown 文件中使用它:
As someone said:
{% quote(author="Vincent") %}
A quote
{% end %}
短代码的主体将作为body
变量自动传递到渲染上下文,并且需要换行。
请注意,对于这两种情况,短代码的括号都是必需的。没有括号的短代码将呈现为纯文本,并且不会发出警告。
例如,这是如何aside
定义一个没有参数的短代码aside.html
:
<aside>
{{ body }}
</aside>
我们可以像这样在我们的 Markdown 文件中使用它:
Readers can refer to the aside for more information.
{% aside() %}
An aside
{% end %}
如果你想要一些看起来像短代码的内容但 Zola 不尝试渲染它,你将需要使用{%/*
and*/%}
而不是{%
and来转义它%}
。在结束标记之前,您不需要转义任何其他内容。
除了您作为参数显式传递的内容之外,每个短代码都可以访问一些变量。这些变量在以下小节中解释:
nth
)lang
),除非从markdown
模板过滤器中调用(在这种情况下,它将始终与配置中的值相同default_language
,或者en
当它未设置时)colocated_path
当这些变量之一与作为参数传递的变量冲突时,将使用参数值。
nth
: 调用次数每个短代码上下文都在一个名为的变量中传递,nth
该变量跟踪在当前 Markdown 文件中调用特定短代码的次数。给定一个简码true_statement.html
模板:
<p id="number{{ nth }}">{{ value }} is equal to {{ nth }}.</p>
它可以在我们的 Markdown 中使用,如下所示:
{{ true_statement(value=1) }}
{{ true_statement(value=2) }}
这在为旁注或尾注等功能实现自定义标记时很有用。
lang
: 当前语言注意:从模板过滤器中调用短代码时markdown
,lang
变量将始终为en
. 如果您觉得需要,请考虑改用模板宏。如果你真的需要它,你可以重写你的 Markdown 内容以作为lang
参数传递给短代码。
lang
每个短代码都可以访问上下文变量中的当前语言。这对于根据每种语言的方式在简码中呈现/过滤信息很有用。例如,要在名为 的短代码中显示当前页面的每种语言的书籍封面bookcover.md
:
![Book cover in {{ lang }}](cover.{{ lang }}.png)
page
或section
您可以访问普通模板中等效变量的略微精简版本。以下属性将为空:
(注意:这是因为 markdown 的渲染是在填充部分之前完成的)
短代码中一个有用的属性page
是colocated_path
. 当您想将某些资产的名称传递给短代码而不重复完整的文件夹路径时,可以使用此方法。load_data
与or组合时最有用resize_image
。
{% set resized = resize_image(format="jpg", path=page.colocated_path ~ img_name, width=width, op="fit_width") %}
<img alt="{{ alt }}" src="{{ resized.url | safe }}" />
这里有一些灵感的简码。
为 YouTube 视频嵌入响应式播放器。
论点是:
id
:视频ID(必填)playlist
: 播放列表 ID(可选)class
<div>
: 添加到iframe 周围的类autoplay
:设置为“true”时,视频会在加载时自动播放代码:
<div {% if class %}class="{{class}}"{% endif %}>
<iframe src="https://www.youtube-nocookie.com/embed/{{id}}{% if playlist %}?list={{playlist}}{% endif %}{% if autoplay %}?autoplay=1{% endif %}" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
使用示例:
{{ youtube(id="dCKeXuVHl1o") }}
{{ youtube(id="dCKeXuVHl1o", playlist="RDdQw4w9WgXcQ") }}
{{ youtube(id="dCKeXuVHl1o", autoplay=true) }}
{{ youtube(id="dCKeXuVHl1o", autoplay=true, class="youtube") }}
有关代码和示例,请参见内容处理页面。