Markdown & 组件展示示例
演示本站支持的所有 Markdown 语法、宏、图片画廊与按钮等组件
这是一篇"展示型"文章，会尽可能地把本站支持的 Markdown 语法、宏组件、图片画廊、按钮 等都演示一遍，方便你写自己的内容时直接参考 (´▽`)
1. 标题层级
H1 标题
H2 标题
H3 标题
H4 标题
H5 标题
2. 文字强调
普通文本，加粗，斜体，加粗 + 斜体，删除线，行内代码。
这是一段引用文字，用于强调、备注或引用他人的话。
引用可以多行。
3. 列表
无序列表
- 一年级
- 二年级
- 三年级
- 三年级一班
- 三年级二班
有序列表
- 第一步
- 第二步
- 第三步
任务列表
- [x] 已完成
- [ ] 待办事项 1
- [ ] 待办事项 2
4. 链接
- 内联链接：返回首页
- 带标题的链接：Wiki 首页
- 自动链接：https://github.com
5. 图片 & 图片画廊
单张图片演示：
上面的
image短代码会被处理为响应式<picture>，自动生成 WebP + JPEG 多分辨率。 但普通 Markdown 图片不会被处理，仅作示意。
下面是 image 画廊（用项目内置的 shortcode）：
6. 代码块
JavaScript
// 求斐波那契数列第 n 项
function fib(n) {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
}
console.log(fib(10)); // 55Python
def greet(name: str) -> str:
return f"Hello, {name}!"
print(greet("World"))HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Shell / PowerShell
npm install
npm run dev7. 表格
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
title |
string | 是 | 文章标题 |
author |
string | 否 | 作者姓名 |
date |
date | 否 | 发布日期 |
tags |
array | 否 | 标签数组 |
layout |
string | 否 | 布局模板路径 |
8. 分隔线
9. 折叠 / 详情
点击展开：什么是 Eleventy？
Eleventy（简称 11ty）是一个简洁强大的静态站点生成器，基于 Node.js。 本仓库就是用 Eleventy 构建的。
- 官网：https://www.11ty.dev
- 优点：配置简单、速度快、支持多种模板语言
10. 脚注
11. 转义字符
如果要显示 Markdown 的特殊字符，可以使用反斜杠转义：* 不是斜体 *，# 不是标题。
12. 宏组件演示
12.1 按钮（button.njk）
普通按钮：
立即开始 阅读 Wiki 查看源码12.1.1 自定义颜色
按钮宏支持 btnColor / textColor / btnHover 三个可选参数，未传的字段继续走默认主题色。
仅自定义背景色（与 index.md 中"了解更多"按钮一致）：
自定义背景色 + 文字色：
自定义背景色 + hover 背景色：
背景色 / 文字色 / hover 全部自定义：
12.1.2 自定义边框颜色
btnBorder 自定义边框颜色，btnBorderHover 自定义 hover 时的边框颜色；未传则继续走 --border-color-blue，与三套主题联动。
仅自定义边框：
自定义边框 + 边框 hover（hover 时边框变深红）：
背景与边框一起配：
背景 + 文字 + hover + 边框 + 边框 hover 五参全开：
12.2 卡片（card.njk）
12.2.1 cardFull 通栏独立卡片
12.2.2 card 网格卡片
上面是没有套div，所以不是三列展示
套了div后
12.2.3 cardStandalone 独立信息卡片
12.2.4 card 自定义颜色
卡片宏支持 bgColor / textColor / borderColor / hoverBgColor / hoverBorderColor 等参数自定义卡片样式，同时也支持按钮相关的颜色参数（btnColor / btnTextColor / btnHover / btnBorder / btnBorderHover）。未传的字段继续走默认主题色。
自定义背景色 + 文字色 + 边框色（暖色调）：
自定义 hover 背景色和 hover 边框色：
自定义按钮颜色的卡片：
12.2.5 cardFull 自定义颜色
通栏卡片同样支持完整的颜色自定义，下面是一个全套自定义的示例：
说明：hover 效果包括卡片整体的背景色变化和边框色变化，按钮也有独立的 hover 效果。所有颜色参数都是可选的，未传入的字段会自动使用主题默认值。
12.3 header 自定义背景色
header 导航栏支持两种方式自定义背景颜色，颜色会通过 --header-bg CSS 变量设置在 <header> 元素上。未设置时使用主题色（--color-primary）。
方式 1：在 markdown 的 front matter 中定义
在 markdown 文件的 front matter 里写：
---
title: 我的页面
headerBg: "#c92a2a"
---
这样这个页面的导航栏背景就会变成红色。
方式 2：在 njk 模板中定义（在 layout 中）
在 layout 模板中通过 Nunjucks 的 set 标签设置 headerBg 变量，再 include 引入 header 组件：
{% set headerBg = "#2b8a3e" %}
{% include "components/header.njk" %}
实现原理
src/style/header.scss：把硬编码的$color-primary改为var(--header-bg, $color-primary)src/_includes/components/header.njk：根据headerBg变量是否为空，条件性地渲染style属性
13. 数学公式（如启用 KaTeX）
行内公式：爱因斯坦的质能方程 $E = mc^2$。
块级公式：
$$ \int_{-\infty}^{\infty} e^{-x^2} , dx = \sqrt{\pi} $$
14. Mermaid 流程图（如启用）
graph LR
A[开始] --> B{是否注册?}
B -- 是 --> C[登录]
B -- 否 --> D[注册]
C --> E[首页]
D --> E15. 结束语
以上就是本站几乎所有的可展示元素，希望对你有帮助～ (•̀ᴗ•)و
如需补充其它语法或宏，编辑本文件即可。