本站用 Jekyll，正文由 Kramdown 解析（和常见「GitHub Flavored Markdown」大部分兼容）。下面按书写顺序说明语法，并给可直接复制改写的实操案例。

1. 标题

行首用 #，数量表示级别（一般一篇文章只有一个一级标题，或用站点模板里的标题，正文从二级写起）。

写法：

## 二级标题
### 三级标题
#### 四级标题

效果： 下面就是真实渲染（本页下文同理）。

三级标题示例

四级标题示例

2. 段落与换行

  • 空一行分隔段落。
  • 行末两个空格再换行 → 软换行（同一段里折行）；多数时候更推荐直接新起一段（空一行），可读性更好。

写法：

第一段文字。

第二段文字。

3. 强调：粗体、斜体、删除线

写法 效果
**粗体** 或 __粗体__ 粗体
*斜体* 或 _斜体_ 斜体
***又粗又斜*** 又粗又斜
~~删除线~~（GFM/Kramdown 常见） 删除线

实操： 标出术语与结论，例如：本文默认使用 **Kramdown** 解析。

4. 列表

无序列表 (-、*、+ 均可，同一列表统一一种）：

- 第一项
- 第二项
  - 子项（缩进 2 或 4 个空格）
  - 子项
- 第三项
  • 第一项
  • 第二项
    • 子项（缩进 2 或 4 个空格）
    • 子项
  • 第三项

有序列表（数字 + . + 空格）：

1. 先写需求
2. 再改文档
3. 最后提交
  1. 先写需求
  2. 再改文档
  3. 最后提交

任务列表 (Task List, GFM 语法):

- [x] 已完成的任务
- [ ] 未完成的任务
- [ ] 嵌套任务
  - [x] 已完成的子任务
  • 已完成的任务
  • 未完成的任务
  • 嵌套任务
    • 已完成的子任务

说明： 任务列表（即勾选框）是 GitHub Flavored Markdown (GFM) 的扩展语法。本站 Jekyll 配置的 Kramdown 解析器恰好也支持此语法，因此可以正常显示。在不确定的环境中，它可能只显示为普通的无序列表。

5. 链接与图片

行内链接： [文字](地址 "可选标题")
示例：[Jekyll 官网](https://jekyllrb.com/) → Jekyll 官网

引用式链接（正文更干净，链接集中放在文末）：

常用搜索引擎是 [DuckDuckGo][ddg]。

[ddg]: https://duckduckgo.com/ "DuckDuckGo"

常用搜索引擎是 DuckDuckGo。

图片： ![替代文字](图片地址)。替代文字在图片加载失败或读屏时有用。

写法与效果（Jekyll 环境）：

在 Jekyll 项目中，推荐使用 relative_url 过滤器来确保路径的正确性，这样无论网站部署在根目录还是子目录，图片都能正常显示。

![示例图片]({{ '/assets/img/posts/example.png' | relative_url }})

下面是实际渲染效果：

示例图片

6. 行内代码与代码块

行内代码： 用反引号包裹 `npm install`。

围栏代码块： 三个反引号 + 语言名（可选），再三个反引号结束：

```javascript
function hello() {
  console.log('Hello');
}
```

注意： 若代码块里本身要出现三个反引号，外层可用四个反引号包起来，或缩进 4 格写成缩进代码块（Kramdown 支持）。

实操： 记录一条终端命令：

本地预览本站：

```bash
bundle exec jekyll serve
```

7. 引用

行首 >，可多行、可嵌套：

> 这是一段引用。
>
> > 嵌套引用

这是一段引用。

嵌套引用

8. 分隔线

用三个或更多连续的 -、* 或 _ 可创建分隔线。

---

***

本站约定： 为保持风格统一，正文里推荐用标题分节，尽量不单独使用分隔线，避免版面琐碎。

9. 表格

用 | 分隔列，第二行用 |---| 画分隔线。冒号可控制对齐。

| 左对齐 | 居中 | 右对齐 |
|:---|:---:|---:|
| Zebra | Cat | Dog |
| Apple | Banana | Orange |
左对齐 居中 右对齐
Zebra Cat Dog
Apple Banana Orange

10. 转义、HTML 与脚注

  • 转义： 需要显示 *、 ``、# 等控制字符时，前面加反斜杠 \，如 \*。
  • HTML： Markdown 里可直接写部分 HTML（视安全策略而定），例如 <kbd>Ctrl</kbd>+<kbd>C</kbd>：Ctrl+C。
  • 脚注 (Kramdown): [^1] 创建脚注标记，文末 [^1]: ... 提供内容。1

实操案例：一篇功能完整的「文章模板」

以下是一个更完善的文章模板，包含了日常写作可能用到的大部分元素。直接复制到 _posts 目录下，修改 Front Matter 和正文内容即可快速开始新文章的写作。

---
layout: post
title: "文章标题：清晰、具体、引人注目"
date: 2026-04-06 10:00:00 +0800 # 发表日期和时间
# slug: custom-url-slug # 自定义 URL，可选
categories: [技术, 前端] # 分类，可以是单个或多个
tags: [CSS, Flexbox, 教程] # 标签，可选
# description: "这篇文章的简短描述，用于 SEO 和社交分享。" # SEO 描述，可选
---

**摘要：** 在文章开头写一段简明扼要的摘要，概述全文的核心内容和结论。这有助于读者快速了解文章价值，也有利于 SEO。

## 引言：设定场景与提出问题

这是文章的开篇部分。可以从一个故事、一个常见的痛点，或者一个有趣的数据开始，吸引读者的注意力。清晰地说明这篇文章将要**解决什么问题**或**探讨什么主题**。

> 一个好的引言，就像电影的预告片，能激发观众（读者）的好奇心。

## 主体部分：分点详细论述

主体是文章的核心，应该结构清晰，逻辑严谨。使用二级或三级标题来组织内容。

### 标题一：第一个关键点

详细阐述第一个要点。可以结合代码、图片和列表来辅助说明。

- **要点 A:** 使用无序列表来罗列并列的观点。
- **要点 B:** 列表项可以包含**粗体**或*斜体*。
- **要点 C:** 如果需要，可以创建嵌套列表：
  1.  第一子点：使用有序列表进行步骤说明。
  2.  第二子点：配合代码块效果更佳。

运行以下命令来安装依赖：

```bash
npm install lodash
```

### 标题二：第二个关键点（含图表示例）

在论述过程中，图片和表格是展示数据和流程的利器。

一个清晰的架构图或流程图，胜过千言万语。[^flowchart]


```liquid
![流程图示例]({{ '/assets/img/posts/git-workflow.png' | relative_url }})
```


*图1：一个典型的 Git 工作流示意图*

同时，使用表格来对比不同方案的优劣：

| 特性 | 方案 A (Flexbox) | 方案 B (Grid) |
|:---|:---:|:---:|
| **维度** | 一维布局 | 二维布局 |
| **适用场景** | 组件内部、简单的线性排列 | 整个页面、复杂的网格结构 |
| **浏览器兼容性** | 良好 | 良好 (需注意 IE) |

## 结论

在文章的结尾，对全文进行总结，重申核心观点，并可以给出一些行动建议或对未来的展望。

总而言之，**清晰的结构**和**丰富的内容形式**是写出一篇优秀技术文章的关键。

## 参考链接

如果文章引用了外部资料，或有进一步阅读的推荐，请在此列出。

- [学习 Markdown - 少数派](https://sspai.com/post/25137)
- [Kramdown Quick Reference](https://kramdown.gettalong.org/quickref.html)

[^flowchart]: 这张流程图（git-workflow.png）也存在于项目的 `assets/img/posts/` 目录下，作为模板的一部分，您可以替换为您自己的图片。

  1. 这是脚注的内容，会自动渲染在文章末尾。 ↩