跳到主要内容

YAML 格式(推荐)

··3 分钟

用于以后使用的模板文件 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
---

题图 #

主题将智能检测文章图像并自动将其添加到您的站点。您不必在正文中引用它们,只需将以适当命名的文件放在页面资源中即可。如果图像文件名中的任何地方都包含术语featurecoverthumb,那么它将用于该用途。
feature图像是一种特殊类型,当存在时,它将用于替代thumbcover图像。特色图像也出现在文章元数据中,在将内容共享到Facebook和Twitter等第三方网络时包含在其中。thumb图像用作文章缩略图,将显示在文章列表中,而cover图像将显示在单个文章页面的内容顶部。
为了提供最大性能,缩略图图像将自动裁剪并调整大小为 4:3 的比例,封面图像将自动调整大小以适应其内容,但允许任何比例。
文件名示例:thumb-harpal-singh-zKxPsGOGKg-unsplash-2.jpg

shortcodes-lead #

lead 用于突出显示文章开头的内容。

一款基于 Tailwindcss 的强大且轻量 Hugo 主题

{{< lead >}}
一款基于 Tailwindcss 的强大且轻量 Hugo 主题
{{< /lead >}}

警告代码 #

警告! 这个操作是破坏性的!
 
别忘了在Twitter上关注我

{{< alert >}}
**警告!** 这个操作是破坏性的!
{{< /alert >}}

{{< alert "twitter" >}}
别忘了在Twitter上[关注我](https://twitter.com/jpanther)。
{{< /alert >}}

按钮代码 #

从Github下载
or
Call to action

按钮组件 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/)"
    >}}

<!-- 或 -->

![抽象紫色艺术品](abstract.jpg "照片由[Jr Korpa](https://unsplash.com/@jrkorpa)拍摄,来自[Unsplash](https://unsplash.com/)")

Congo 还支持使用标准 Markdown 语法 ![Alt text](image.jpg "Image caption") 包含的图像的自动转换。

Emoji 简码 #

Congo 默认支持在标题、菜单项和文章内容中使用 Emoji。Emoji 可以直接在内容和前置参数中使用简码。
🚀 👨‍💻 👇 📝 🎨 ✍️ 👣 🗑️ 📷 💻

static/me.jpg assets/me.jpg

Mermaid #

mermaid 允许您使用文本绘制详细的图表和可视化效果,并支持各种图表、图表和其他输出格式。参阅 官方 Mermaid 文档https://mermaid.js.org/intro/

graph LR; A[Lemons]-->B[Lemonade]; B-->C[Profit]

文档内跳转 #

提示:

  1. []中括号填写需要在页面上显示的内容
  2. ()小括号内部声明跳转目标标题, 以#开头,标题题号如果包含.和下划线直接忽略掉,标题文本中如果有空格,使用-横杠符号替代,标题文本中的大写字母转换成小写

基本的 Markdown 语法和 HTML 元素格式的示例 #

任务列表 #

  • 已完成任务
  • 未完成任务

定义列表示例 #

苹果
一种水果
橙子
另一种水果
苹果
: 一种水果

引用 #

引用块(Blockquotes)可选地包含引用来源,引用来源可以放在 footercite 元素中,也可以包含内联更改,如注释和缩写。

无引用的引用块 #

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 #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>示例HTML5文档</title>
</head>
<body>
  <p>测试</p>
</body>
</html>

其他元素 — 缩写、下标、上标、键盘、标记 #

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>是夜行动……

非断行空 格实体
&nbsp;
空2个字 符(四倍空格宽度)(倍宽空格)
文字&emsp;文字
空1个字 符(一半空格宽度)实体(窄空格)
&ensp;

代码块(使用反引号```或缩进代码)中,空格和制表符会被准确保留,不会被转换或合并。

居中

<center>居中</center>

空行(空了三行)
空行


空行
空行<br><br><br>空行


  1. 上面的引用摘自 Rob Pike 在 Gopherfest 于 2015 年 11 月 18 日的关于无关紧要的演讲。 ↩︎

布谷
作者
布谷
好好学习,天天向上。 🐀