YAML 格式(推荐)
目录
用于以后使用的模板文件 in Congo
简单页面设置 #
---
title: "我的落地页"
date: 2025-03-08
layout: "simple"
---
此页面内容现在是全宽度的。
cascade 参数 #
在 _index.md 文件前置变量中使用特殊的 cascade 参数来隐藏此部分中任何子页面上的阅读时间。通过这样做,任何项目页面将不显示其阅读时间。这是在整个部分中覆盖默认主题参数的好方法,而无需在每个单独页面中包含它们。
---
title: "00"
date: 2019-03-11
cascade:
showDate: false
showAuthor: false
showSummary: true
invertPagination: true
---
题图 #
主题将智能检测文章图像并自动将其添加到您的站点。您不必在正文中引用它们,只需将以适当命名的文件放在页面资源中即可。如果图像文件名中的任何地方都包含术语feature、cover或thumb,那么它将用于该用途。
feature图像是一种特殊类型,当存在时,它将用于替代thumb和cover图像。特色图像也出现在文章元数据中,在将内容共享到Facebook和Twitter等第三方网络时包含在其中。thumb图像用作文章缩略图,将显示在文章列表中,而cover图像将显示在单个文章页面的内容顶部。
为了提供最大性能,缩略图图像将自动裁剪并调整大小为 4:3 的比例,封面图像将自动调整大小以适应其内容,但允许任何比例。
文件名示例:thumb-harpal-singh-zKxPsGOGKg-unsplash-2.jpg
shortcodes-lead #
lead 用于突出显示文章开头的内容。
{{< lead >}}
一款基于 Tailwindcss 的强大且轻量 Hugo 主题
{{< /lead >}}
警告代码 #
{{< alert >}}
**警告!** 这个操作是破坏性的!
{{< /alert >}}
{{< alert "twitter" >}}
别忘了在Twitter上[关注我](https://twitter.com/jpanther)。
{{< /alert >}}
按钮代码 #
按钮组件 2 代码:
{{< button href="#button" target="_self" >}}
Call to action
{{< /button >}}
Icons 短代码 #
icon 输出一个 SVG 图标,并将图标名称作为其唯一参数。图标的大小会根据当前文本大小进行缩放。如:
{{< icon "github" >}}
通过在项目的 assets/icons/ 目录中提供自己的图标资产,可以添加自定义图标。然后,可以通过在短代码中使用不带 .svg 扩展名的 SVG 文件名来引用图标。
链接文档 #
完整的 [文档]({{< ref "docs/installation" >}}) 集。
figure 短代码 #
Congo 包含一个 figure 短代码,用于向内容添加图片。该短代码替代了基本的 Hugo 功能,以提供额外的性能优势。当提供的图像是页面资源时,它将使用 Hugo Pipes 进行优化,并进行缩放,以提供适用于不同设备分辨率的图像。如果提供的是静态资源或指向外部图像的 URL,则将其原样包含,Hugo 不会对其进行任何图像处理。
{{< figure src="festivities.svg" class="m-auto mt-6 max-w-prose" >}}
- src 必需。 图像的本地路径/文件名或 URL。
- alt 图像的替代文本描述。
- caption 图像说明的 Markdown,将显示在图像下方。
- class 应用于图像的额外 CSS 类。
- href 图像应链接到的 URL。
{{< figure
src="abstract.jpg"
alt="抽象紫色艺术品"
caption="照片由[Jr Korpa](https://unsplash.com/@jrkorpa)拍摄,来自[Unsplash](https://unsplash.com/)"
>}}
<!-- 或 -->
拍摄,来自[Unsplash](https://unsplash.com/)")
Congo 还支持使用标准 Markdown 语法  包含的图像的自动转换。
Emoji 简码 #
Congo 默认支持在标题、菜单项和文章内容中使用 Emoji。Emoji 可以直接在内容和前置参数中使用简码。
🚀
👨💻
👇
📝
🎨
✍️
👣
🗑️ 📷 💻
static/me.jpg → assets/me.jpg
Mermaid #
mermaid 允许您使用文本绘制详细的图表和可视化效果,并支持各种图表、图表和其他输出格式。参阅 官方 Mermaid 文档。
https://mermaid.js.org/intro/
文档内跳转 #
- 引用
[引用](#引用)
提示:
- []中括号填写需要在页面上显示的内容
- ()小括号内部声明跳转目标标题, 以#开头,标题题号如果包含.和下划线直接忽略掉,标题文本中如果有空格,使用-横杠符号替代,标题文本中的大写字母转换成小写
基本的 Markdown 语法和 HTML 元素格式的示例 #
任务列表 #
- 已完成任务
- 未完成任务
定义列表示例 #
- 苹果
- 一种水果
- 橙子
- 另一种水果
苹果
: 一种水果
引用 #
引用块(Blockquotes)可选地包含引用来源,引用来源可以放在 footer 或 cite 元素中,也可以包含内联更改,如注释和缩写。
无引用的引用块 #
Tiam, ad mint andaepu dandae nostion secatur sequo quae.
注意,你可以在引用块内使用 Markdown语法。
带引用的引用块 #
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
> Don't communicate ... by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
[^1]: 上面的引用摘自 Rob Pike 在……的[演讲](https://www.youtu...CSZUG1c)。
表格 #
表格不属于核心 Markdown 规范,但 Hugo 原生支持它们,无需额外配置。
| 名前 | 年齢 |
|---|---|
| Bob | 27 |
| Alice | 23 |
表格内的行内 Markdown #
| 斜体 | 粗体 | 代码 |
|---|---|---|
| 斜体 | 粗体 | 代码 |
代码块 #
使用反引号的代码块 #
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>示例HTML5文档</title>
</head>
<body>
<p>测试</p>
</body>
</html>
缩进四个空格的代码块 #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>示例HTML5文档</title>
</head>
<body>
<p>测试</p>
</body>
</html>
使用 Hugo 内置的代码块高亮 shortcode #
|
|
其他元素 — 缩写、下标、上标、键盘、标记 #
GIF 是一种位图图像格式。
<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。
H2O
H<sub>2</sub>O
Xn + Yn = Zn
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
按下 CTRL+ALT+Delete 结束会话。
按下 <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> 结束会话。
大多数蝾螈是夜行动物,捕食昆虫、蠕虫和其他小动物。
大多数<mark>蝾螈</mark>是夜行动……
非断行空 格实体
空2个字 符(四倍空格宽度)(倍宽空格)
文字 文字
空1个字 符(一半空格宽度)实体(窄空格)
 
代码块(使用反引号```或缩进代码)中,空格和制表符会被准确保留,不会被转换或合并。
<center>居中</center>
空行(空了三行)
空行
空行
空行<br><br><br>空行