短代码

Markdown 是一种方便且简单的写作格式。但是，它并不总是能满足我们的所有需求（或者以一种好的方式满足）。Hugo 允许我们使用短代码，而不是在源文件中添加原始 HTML。短代码是看起来像这样的短小片段

{{< _shortcodename parameters_ >}}

Hugo 使用预定义的模板对其进行渲染。

以下是此主题使用的一些短代码。

`admonition`#

创建注释、警告、信息和提示通知。

{{< admonition attention >}}
This is an attention admonition.
{{< /admonition >}}

{{< admonition caution >}}
This is a caution admonition.
{{< /admonition >}}

{{< admonition danger >}}
This is a danger admonition.
{{< /admonition >}}

{{< admonition error >}}
This is an error admonition.
{{< /admonition >}}

{{< admonition hint >}}
This is an hint admonition.
{{< /admonition >}}

{{< admonition important >}}
This is an important admonition.
{{< /admonition >}}

{{< admonition mission >}}
This is our mission.
{{< /admonition >}}

{{< admonition note >}}
This is a note admonition.
{{< /admonition >}}

{{< admonition seealso >}}
This is a seealso admonition.
{{< /admonition >}}

{{< admonition tip >}}
This is a tip admonition.
{{< /admonition >}}

{{< admonition warning>}}
This is a warning admonition.
{{</* /admonition >}}

{{< admonition values >}}
This is our values.
{{< /admonition >}}

此示例呈现为

注意

这是一个注意类型的提醒。

警告

这是一个警告类型的提醒。

危险

这是一个危险类型的提醒。

错误

这是一个错误类型的提醒。

提示

这是一个提示类型的提醒。

重要

这是一个重要类型的提醒。

使命

这是我们的使命。

注释

这是一个注释类型的提醒。

参见

这是一个参见类型的提醒。

提示

这是一个提示类型的提醒。

警告

这是一个警告类型的提醒。

价值观

这是我们的价值观。

`badge`#

创建各种样式的徽章。

{{< badge primary >}}
primary
{{< /badge >}}

{{< badge secondary >}}
secondary
{{< /badge >}}

{{< badge success >}}
success
{{< /badge >}}

{{< badge primary outline >}}
primary outline
{{< /badge >}}

{{< badge secondary outline >}}
secondary outline
{{< /badge >}}

{{< badge success outline >}}
success outline
{{< /badge >}}

此示例呈现为

主要次要成功主要轮廓次要轮廓成功轮廓

`button`#

创建各种样式的按钮链接。

{{< button info >}}
label: Info
link: http://example.com/
{{< /button >}}

{{< button success >}}
label: Success
link: http://example.com/
{{< /button >}}

{{< button warning >}}
label: Warning
link: http://example.com/
{{< /button >}}

{{< button danger >}}
label: Danger
link: http://example.com/
{{< /button >}}

{{< button muted >}}
label: Muted
link: http://example.com/
{{< /button >}}

{{< button light >}}
label: Light
link: http://example.com/
{{< /button >}}

{{< button dark >}}
label: Dark
link: http://example.com/
{{< /button >}}

<p>

{{< button outline-info >}}
label: Info
link: http://example.com/
{{< /button >}}

{{< button outline-success >}}
label: Success
link: http://example.com/
{{< /button >}}

{{< button outline-warning >}}
label: Warning
link: http://example.com/
{{< /button >}}

{{< button outline-danger >}}
label: Danger
link: http://example.com/
{{< /button >}}

{{< button outline-muted >}}
label: Muted
link: http://example.com/
{{< /button >}}

{{< button outline-light >}}
label: Light
link: http://example.com/
{{< /button >}}

{{< button outline-dark >}}
label: Dark
link: http://example.com/
{{< /button >}}

此示例呈现为

信息成功警告危险静音浅色深色

`card`#

卡片

{{< card >}}
title = 'Only title'
{{< /card >}}

{{< card >}}
body = '''
Only body.

But with multiple text paragraphs.
'''
{{< /card >}}

{{< card >}}
title = 'Heading and body'
body = '''
Content of the third card.

{{< badge primary >}}Sample badge{{< /badge >}}
'''
{{< /card >}}

{{< card >}}
title = 'A card with a dropdown menu'
body = '''
{{< dropdown >}}
title = 'Click to expand dropdown'
icon = 'fa-solid fa-eye'
body = 'Hidden content'
{{< /dropdown >}}
'''
{{< /card >}}

{{< card >}}
title = 'A clickable card'
link = 'https://example.com'
{{< /card >}}

{{< card >}}
header = 'Header'
title = 'Card Title'
body = 'Card content'
footer = 'Footer'
{{< /card >}}

此示例呈现为

仅标题

仅正文。

但有多个文本段落。

标题和正文

第三张卡片的内容。

示例徽章

带有下拉菜单的卡片

可点击的卡片

页眉

卡片标题

卡片内容

页脚

`details`#

隐藏详细信息。

{{< details "**Sunday**" >}}
| Time | Description |
|------|-------------|
| | Arrive |
| | Dinner (self organized) |
{{< /details >}}

此示例呈现为

星期日

时间	描述
	到达
	晚餐（自行组织）

`dropdown`#

下拉菜单

{{< dropdown >}}
body = 'And with no title and some content!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'With a title'
body = 'And some content!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'With a title and icon'
icon = 'fa-solid fa-lock-open'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A primary color dropdown'
icon = 'fa-solid fa-lock-open'
color = 'primary'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A secondary color dropdown'
icon = 'fa-solid fa-eye'
color = 'secondary'
body = 'And some content and an icon!'
{{< /dropdown >}}

此示例呈现为

`field-list`#

字段列表

{{< field-list >}}
[[entry]]
term = "John"
def = 30

[[entry]]
term = "Will"
def = 28

[[entry]]
term = "Joey"
def = 24
{{< /field-list >}}

此示例呈现为

John:: 30
Will:: 28
Joey:: 24

`figure`#

图片

{{< figure >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
height = 200
width = 200
title = 'Figure title'
attribution = 'Figure Credits: Daily cute puppy image from unslash.com'
attributionlink = 'https://source.unsplash.com/200x200/daily?cute+puppy'
caption = '''
A figure is an image with a caption. Figures may also include a tile, legend, and/or attribution.
'''
legend = '''
**TODO: use tomltotable (https://github.com/scientific-python/scientific-python-hugo-theme/pull/548)**

This paragraph is also part of the legend.
'''
{{< /figure >}}

{{< figure >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
attribution = 'from unslash.com'
attributionlink = 'https://source.unsplash.com/200x200/daily?cute+puppy'
align = 'left'
height = 150
width = 150
caption = '''
A figure with left alignment.
'''
{{< /figure >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

此示例呈现为

Cute puppies — **图片标题**#
图片来源：来自 unslash.com 的每日可爱小狗图片
图片是带有标题的图像。图片还可以包含标题、图例和/或署名。

**待办事项：使用 tomltotable (https://github.com/scientific-python/scientific-python-hugo-theme/pull/548)**

本段也是图例的一部分。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`grid`#

网格。

{{< grid columns="1 2 3 4" outline="true" >}}

[[item]]
type = ''
body = 'A'

[[item]]
type = ''
body = 'B'

[[item]]
type = ''
body = 'C'

[[item]]
type = ''
body = 'D'

{{< /grid >}}

{{< grid columns="1 2 2 4" >}}

[[item]]
type = 'card'
title = 'Only title'

[[item]]
type = 'card'
body = '''
Only body.

But with multiple text paragraphs.
'''

[[item]]
type = 'card'
title = 'Heading and body'
body = '''
Content of the third card.

{{< badge primary >}}Sample badge{{< /badge >}}
'''

[[item]]
type = 'card'
title = 'A card with a dropdown menu'
body = '''
{{< dropdown >}}
title = 'Click to expand dropdown'
icon = 'fa-solid fa-eye'
body = 'Hidden content'
{{< /dropdown >}}
'''

[[item]]
type = 'card'
header = 'Header'
title = 'Card Title'
body = 'Card content'
footer = 'Footer'

[[item]]
type = 'card'
header = 'A clickable image card'
link = 'https://example.com'
body = '''{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}'''

[[item]]
type = 'card'
classcard = 'text-center'
link = 'https://example.com'
body = '''{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}

A clickable figure card'''

[[item]]
type = 'card'
link = 'https://example.com'
body = '''{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}'''
footer = 'A clickable figure card'

{{< /grid >}}

{{< grid columns="2 2 2 2" >}}

[[item]]
type = 'card'
columns = "auto auto auto auto"
body = 'A'

[[item]]
type = 'card'
columns = "12 6 6 6"
body = 'B'

[[item]]
type = 'card'
columns = "12 12 12 12"
body = 'C'

{{< /grid >}}

此示例呈现为

仅标题

仅正文。

但有多个文本段落。

标题和正文

第三张卡片的内容。

示例徽章

带有下拉菜单的卡片

页眉

卡片标题

卡片内容

页脚

可点击的图片卡片

`image`#

图片

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}

A clickable image:

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
target = 'https://unsplash.com/'
height = 200
width = 200
{{< /image >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
align = 'right'
height = 200
width = 200
loading = 'lazy'
{{< /image >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

此示例呈现为

可点击的图片

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

`include-code`#

包含带有语法高亮的代码文件。

{{< include-code "example.py" "python" >}}

此示例呈现为

def foo(x):
    return x**2

`include-html`#

包含 HTML 文件。文件名相对于根路径指定。

{{< include-html "static/example.html" >}}

此示例呈现为

这是一些带有斜体和粗体文本的示例 HTML。

`include-md`#

渲染并包含 Markdown 文件。

{{< include-md "example-markdown.md" >}}

此示例呈现为

这是一些带有粗体的示例 Markdown！

`include-raw`#

按原样包含文件。

{{< include-raw "data.txt" >}}

此示例呈现为

这是 data.txt 文件的内容。

`sidebar`#

创建侧边栏

{{< sidebar title="Ch’ien / The Creative" >}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
align = 'center'
{{< /image >}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{{< /sidebar >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

此示例呈现为

`tabs`#

选项卡面板。

{{< tabs >}}

[[tab]]
name = 'c++'
content = '''
An example program in C++:
```c++
int main(const int argc, const char **argv) {
    return 0;
}
```
It simply returns 0, indicating no errors.
'''

[[tab]]
name = 'python'
content = '''
An example program in Python:
```python
def main():
    return True
```
It returns `True`, indicating no errors.
'''

{{< /tabs >}}

此示例呈现为

C++ 中的示例程序

int main(const int argc, const char **argv) {
    return 0;
}

它简单地返回 0，表示没有错误。

Python 中的示例程序

def main():
    return True

它返回True，表示没有错误。

`toctree`#

显示当前层次结构中 Hugo Sections 的目录树。在本文档中，toctree 的示例可以在示例页面上看到。

{{< toctree >}}

在此页面上

短代码

admonition#

badge#

button#

card#

details#

dropdown#

field-list#

figure#

grid#

image#

include-code#

include-html#

include-md#

include-raw#

sidebar#

tabs#

toctree#

`admonition`#

`badge`#

`button`#

`card`#

`details`#

`dropdown`#

`field-list`#

`figure`#

`grid`#

`image`#

`include-code`#

`include-html`#

`include-md`#

`include-raw`#

`sidebar`#

`tabs`#

`toctree`#