forked from drowl87/hextra_mirror
docs: update zh-cn translations
This commit is contained in:
Xin
@ -5,15 +5,25 @@ prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/) 是你的内容文件中调用内置或自定义模板的简单片段。
|
||||
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中的简单片段，用于调用内置或自定义模板。
|
||||
|
||||
Hextra 提供了一系列美观的短代码以增强你的内容。
|
||||
Hextra 提供了一系列精美的短代码，以增强您的内容。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="注意事项" icon="warning" >}}
|
||||
{{< card link="callout" title="标注" icon="warning" >}}
|
||||
{{< card link="cards" title="卡片" icon="card" >}}
|
||||
{{< card link="details" title="详情" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="文件树" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="图标" icon="badge-check" >}}
|
||||
{{< card link="steps" title="步骤" icon="one" >}}
|
||||
{{< card link="tabs" title="标签" icon="collection" >}}
|
||||
{{< card link="tabs" title="标签页" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
Hugo 和 Hextra 提供的其他短代码：
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter 笔记本" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="其他" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
||||
@ -1,78 +1,83 @@
|
||||
---
|
||||
title: 标注
|
||||
title: 提示框组件
|
||||
linkTitle: 提示框
|
||||
aliases:
|
||||
- callouts
|
||||
- 提示框
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
向读者显示重要信息的内置组件。
|
||||
一个内置组件，用于向读者展示重要信息。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Example
|
||||
> [!NOTE]
|
||||
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub 风格的提醒](../../markdown#alerts)。
|
||||
> 它利用 Markdown 语法来渲染提示框，确保内容具有更好的可移植性和可读性。
|
||||
|
||||
## 示例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**标注**是一段旨在吸引注意力的短文本
|
||||
**提示框** 是一段简短的文本，旨在吸引注意力。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**标注**是一段旨在吸引注意力的短文本。
|
||||
**提示框** 是一段简短的文本，旨在吸引注意力。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**标注**是一段旨在吸引注意力的短文本。
|
||||
**提示框** 是一段简短的文本，旨在吸引注意力。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**标注**是一段旨在吸引注意力的短文本。
|
||||
**提示框** 是一段简短的文本，旨在吸引注意力。
|
||||
{{< /callout >}}
|
||||
|
||||
## Usage
|
||||
## 用法
|
||||
|
||||
### Default
|
||||
### 默认
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
|
||||
Hugo 可用于创建各种类型的网站，包括博客、作品集、文档站点等。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugo 可用于创建各种网站，包括博客、作品集、文档网站等
|
||||
Hugo 可用于创建各种类型的网站，包括博客、作品集、文档站点等。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Info
|
||||
### 信息
|
||||
|
||||
{{< callout type="info" >}}
|
||||
请访问 GitHub 查看最新版本
|
||||
请访问 GitHub 查看最新版本。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
请访问 GitHub 查看最新版本
|
||||
请访问 GitHub 查看最新版本。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Warning
|
||||
### 警告
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
该 API 将在下一版本中弃用
|
||||
此 API 将在下一个版本中弃用。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**标注**是一段旨在吸引注意力的简短文字
|
||||
**提示框** 是一段简短的文本，旨在吸引注意力。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Error
|
||||
### 错误
|
||||
|
||||
{{< callout type="error" >}}
|
||||
出问题了，要爆炸了
|
||||
出错了，系统即将崩溃。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
出问题了，要爆炸了
|
||||
出错了，系统即将崩溃。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
```
|
||||
@ -1,65 +1,115 @@
|
||||
---
|
||||
title: 卡片
|
||||
linkTitle: Cards
|
||||
title: 卡片组件
|
||||
linkTitle: 卡片
|
||||
---
|
||||
|
||||
## 示例
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="Callout" icon="warning" >}}
|
||||
{{< card link="/" title="No Icon" >}}
|
||||
{{< card link="../callout" title="提示框" icon="warning" >}}
|
||||
{{< card link="../callout" title="带标签的卡片" icon="tag" tag="自定义标签">}}
|
||||
{{< card link="/" title="无图标" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
|
||||
{{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
|
||||
{{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
|
||||
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" >}}
|
||||
{{< card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" >}}
|
||||
{{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，由 Hugo 处理。" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用
|
||||
## 用法
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="Callout" icon="warning" */>}}
|
||||
{{</* card link="/" title="No Icon" */>}}
|
||||
{{</* card link="../callout" title="提示框" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="带标签的卡片" icon="tag" tag= "自定义标签" */>}}
|
||||
{{</* card link="/" title="无图标" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
|
||||
{{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
|
||||
{{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash 风景" */>}}
|
||||
{{</* card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" */>}}
|
||||
{{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，由 Hugo 处理。" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 卡片参数
|
||||
|
||||
| Parameter | Description |
|
||||
|----------- |---------------------------------------|
|
||||
| `link` | URL（内部或外部） |
|
||||
| `title` | 卡片的标题 |
|
||||
| `subtitle` | 字幕标题（支持 Markdown） |
|
||||
| `icon` | 图标的名称 |
|
||||
| 参数 | 描述 |
|
||||
|----------- |-----------------------------------------------------------------|
|
||||
| `link` | URL（内部或外部）。 |
|
||||
| `title` | 卡片的标题。 |
|
||||
| `subtitle` | 卡片的副标题（支持 Markdown）。 |
|
||||
| `icon` | 图标的名称。 |
|
||||
| `tag` | 标签中的文本。 |
|
||||
| `tagColor` | 标签的颜色：`gray`（默认）、`yellow`、`red` 和 `blue`。 |
|
||||
|
||||
## 图片卡片
|
||||
|
||||
## Image Card
|
||||
此外，卡片支持通过以下参数添加图片并进行处理：
|
||||
|
||||
此外，该卡还支持通过以下参数添加图像和处理：
|
||||
| 参数 | 描述 |
|
||||
|-----------|--------------------------------------|
|
||||
| `image` | 指定卡片的图片 URL。 |
|
||||
| `method` | 设置 Hugo 的图片处理方法。 |
|
||||
| `options` | 配置 Hugo 的图片处理选项。 |
|
||||
|
||||
| Parameter | Description |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | 指定卡片的图像 URL. |
|
||||
| `method` | 设置 Hugo 的图像处理方法。 |
|
||||
| `options` | 配置 Hugo 的图像处理选项。|
|
||||
卡片支持三种类型的图片：
|
||||
|
||||
卡片支持三种图像：
|
||||
1. 远程图片：`image` 参数中的完整 URL。
|
||||
2. 静态图片：使用 Hugo `static/` 目录中的相对路径。
|
||||
3. 处理后的图片：使用 Hugo `assets/` 目录中的相对路径。
|
||||
|
||||
1. 远程图片：完整网址应放置在 image 参数中
|
||||
2. 静态图片：使用 Hugo 的 static/ 目录中的相对路径
|
||||
3. 处理过的图片：使用 Hugo 的 assets/ 目录中的相对路径
|
||||
Hextra 在构建时自动检测是否需要图片处理，并应用 `options` 参数或默认设置（Resize，800x，质量 80，WebP 格式）。
|
||||
目前支持以下 `method`：`Resize`、`Fit`、`Fill` 和 `Crop`。
|
||||
|
||||
Hextra 在构建过程中会自动检测图片是否需要处理，并根据需要应用 options 参数或默认设置（缩放，800x，质量 80，WebP 格式）。
|
||||
有关 Hugo 内置图片处理命令、方法和选项的更多信息，请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
|
||||
|
||||
它目前支持以下处理方法：Resize（缩放）、Fit（适应）、Fill（填充）和 Crop（裁剪）。
|
||||
## 标签
|
||||
|
||||
有关 Hugo 内置图像处理命令、方法和选项的更多信息，请参阅他们的 [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
|
||||
卡片支持添加标签，这对于显示额外的状态信息非常有用。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
|
||||
{{< card link="../callout" title="带错误标签的卡片" tag="标签文本" tagType="error" >}}
|
||||
{{< card link="../callout" title="带信息标签的卡片" tag="标签文本" tagType="info" >}}
|
||||
{{< card link="../callout" title="带警告标签的卡片" tag="标签文本" tagType="warning" >}}
|
||||
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" tag="标签文本" tagType="error" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="带默认标签颜色的卡片" tag="标签文本" */>}}
|
||||
{{</* card link="../callout" title="带红色标签的卡片" tag="标签文本" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="带蓝色标签的卡片" tag="标签文本" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="带黄色标签的卡片" tag="标签文本" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 列数
|
||||
|
||||
您可以通过将 `cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意，在较小的屏幕上，列仍会折叠。
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="顶部卡片" >}}
|
||||
{{< card link="/" title="底部卡片" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="左侧卡片" >}}
|
||||
{{< card link="/" title="右侧卡片" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="顶部卡片" */>}}
|
||||
{{</* card link="/" title="底部卡片" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="左侧卡片" */>}}
|
||||
{{</* card link="/" title="右侧卡片" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
@ -2,42 +2,42 @@
|
||||
title: 详情
|
||||
---
|
||||
|
||||
用于显示可折叠内容的内置组件。
|
||||
一个内置组件，用于显示可折叠的内容。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 示例
|
||||
|
||||
{{% details title="Details" %}}
|
||||
{{% details title="详情" %}}
|
||||
|
||||
这是细节的内容
|
||||
这是详情的内容。
|
||||
|
||||
Markdown is **supported**.
|
||||
支持 **Markdown**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
{{% details title="Click me to reveal" closed="true" %}}
|
||||
{{% details title="点击我展开" closed="true" %}}
|
||||
|
||||
默认情况下这将被隐藏
|
||||
默认情况下，这部分内容会被隐藏。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## Usage
|
||||
## 用法
|
||||
|
||||
````markdown
|
||||
{{%/* details title="Details" */%}}
|
||||
{{%/* details title="详情" */%}}
|
||||
|
||||
这是细节的内容
|
||||
这是详情的内容。
|
||||
|
||||
**支持** Markdown
|
||||
支持 **Markdown**。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{%/* details title="Click me to reveal" closed="true" */%}}
|
||||
{{%/* details title="点击我展开" closed="true" */%}}
|
||||
|
||||
默认情况下这将被隐藏
|
||||
默认情况下，这部分内容会被隐藏。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
````
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: 文件树
|
||||
title: 文件树组件
|
||||
linkTitle: 文件树
|
||||
---
|
||||
|
||||
## 示例
|
||||
@ -30,4 +31,4 @@ title: 文件树
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
```
|
||||
@ -2,13 +2,13 @@
|
||||
title: 图标
|
||||
---
|
||||
|
||||
要内联使用此短代码，需要在配置中启用内联短代码：
|
||||
要在行内使用此短代码，需要在配置中启用行内短代码：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
可用图标列表可以在以下位置找到 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
|
||||
可用图标的列表可以在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@ -25,17 +25,17 @@ enableInlineShortcodes: true
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
[Heroicons](https://v1.heroicons.com/) v1 轮廓图标开箱即用
|
||||
[Heroicons](https://v1.heroicons.com/) v1 的轮廓图标默认可用。
|
||||
|
||||
### 如何添加自己的图标
|
||||
### 如何添加自定义图标
|
||||
|
||||
创建 `data/icons.yaml` 文件，然后按以下格式添加您自己的 SVG 图标：
|
||||
创建 `data/icons.yaml` 文件，然后按照以下格式添加自定义的 SVG 图标：
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
然后可以在短代码中使用它，如下所示：
|
||||
然后可以在短代码中这样使用：
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
@ -43,4 +43,4 @@ your-icon: <svg>your icon svg content</svg>
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
提示：[Iconify Design](https://iconify.design/) 是为您的网站查找 SVG 图标的好地方
|
||||
提示：[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的好地方。
|
||||
79
exampleSite/content/docs/guide/shortcodes/jupyter.zh-cn.md
Normal file
79
exampleSite/content/docs/guide/shortcodes/jupyter.zh-cn.md
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "Jupyter Notebook 组件"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}实验性功能：通过短代码嵌入 Jupyter Notebook。请注意，并非所有单元格类型都受支持。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 的一个语言无关的 HTML 笔记本应用程序。它允许你创建和共享包含实时代码、方程、可视化和叙述性文本的文档。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 使用本地笔记本
|
||||
|
||||
要使用 Jupyter Notebook 短代码，你需要在项目中有一个 Jupyter Notebook 文件。类似于如何[添加图片](../../organize-files#add-images)到项目中，你可以将 Jupyter Notebooks 添加到 `assets` 文件夹。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
使用 `jupyter` 短代码将 Jupyter Notebook 包含在页面中：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: 我的页面
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
或者，你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebooks 与 Markdown 文件一起组织。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: 我的页面
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### 使用远程笔记本
|
||||
|
||||
你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如，要在页面中包含 [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) 笔记本，你可以使用以下短代码：
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## 示例笔记本
|
||||
|
||||
{{< callout type="info" >}}以下是包含在项目 assets 文件夹中的笔记本文件示例。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
77
exampleSite/content/docs/guide/shortcodes/others.zh-cn.md
Normal file
77
exampleSite/content/docs/guide/shortcodes/others.zh-cn.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
title: 其他短代码
|
||||
linkTitle: 其他
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
其中一些是 Hugo 内置的短代码。
|
||||
这些短代码被认为不太稳定，可能会随时更改。
|
||||
{{< /callout >}}
|
||||
|
||||
## 徽章
|
||||
|
||||
```
|
||||
{{</* badge "徽章" */>}}
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
{{< badge "徽章" >}}
|
||||
|
||||
变体：
|
||||
|
||||
```
|
||||
{{</* badge content="信息" type="info" */>}}
|
||||
{{</* badge content="警告" type="warning" */>}}
|
||||
{{</* badge content="错误" type="error" */>}}
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
{{< badge content="信息" type="info" >}}
|
||||
{{< badge content="警告" type="warning" >}}
|
||||
{{< badge content="错误" type="error" >}}
|
||||
|
||||
带链接和图标：
|
||||
|
||||
```
|
||||
{{</* badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
{{< badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## YouTube
|
||||
|
||||
嵌入 YouTube 视频。
|
||||
|
||||
```
|
||||
{{</* youtube 视频ID */>}}
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
更多信息，请参阅 [Hugo 的 YouTube 短代码](https://gohugo.io/content-management/shortcodes/#youtube)。
|
||||
|
||||
## PDF
|
||||
|
||||
使用 PDF 短代码，您可以在内容中嵌入 PDF 文件。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
您也可以将 PDF 文件放在项目目录中并使用相对路径。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
示例：
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
@ -2,7 +2,7 @@
|
||||
title: 步骤
|
||||
---
|
||||
|
||||
A built-in component to display a series of steps.
|
||||
一个内置组件，用于显示一系列步骤。
|
||||
|
||||
## 示例
|
||||
|
||||
@ -23,20 +23,25 @@ A built-in component to display a series of steps.
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 使用
|
||||
## 用法
|
||||
|
||||
将 Markdown h3 标题放入 `steps` 短代码中。
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
请注意，此短代码**仅适用于 Markdown 内容**。
|
||||
如果将 HTML 内容或其他短代码作为步骤内容，可能无法按预期渲染。
|
||||
{{< /callout >}}
|
||||
|
||||
在 `steps` 短代码中放置 Markdown 的 h3 标题。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### Step 1
|
||||
### 第一步
|
||||
|
||||
This is the first step.
|
||||
这是第一步。
|
||||
|
||||
### Step 2
|
||||
### 第二步
|
||||
|
||||
This is the second step.
|
||||
这是第二步。
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
```
|
||||
@ -7,54 +7,54 @@ next: /docs/guide/deploy-site
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
|
||||
{{< tab >}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## 使用
|
||||
## 用法
|
||||
|
||||
### 默认情况下
|
||||
### 默认
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 指定索引
|
||||
### 指定选中索引
|
||||
|
||||
使用 `defaultIndex` 属性指定选定的选项卡。索引从 0 开始。
|
||||
使用 `defaultIndex` 属性来指定选中的标签页。索引从 0 开始。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
默认为 `YAML`
|
||||
默认情况下，`YAML` 标签页将被选中。
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
|
||||
{{< tab >}}**JSON**: JavaScript 对象表示法（JSON）是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式，由于其明显的语义，易于阅读。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### 使用 Markdown
|
||||
|
||||
还支持包括代码块的 Markdown 语法：
|
||||
Markdown 语法，包括代码块，也受支持：
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
@ -65,7 +65,7 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... add other tabs similarly
|
||||
... 类似地添加其他标签页
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
@ -90,4 +90,4 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
{{< /tabs >}}
|
||||
Reference in New Issue
Block a user