封面图片来源: Source

此博客模板基于 Astro 构建。若本指南未提及某些内容，你可在 Astro Docs 中找到答案。

文章的 Front-matter#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我新 Astro 博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [前端, 开发]
7
category: 前端开发
8
draft: false
9
---

属性	描述
`title`	文章标题。
`published`	文章发布日期。
`pinned`	是否将此文章置顶在文章列表顶部。
`description`	文章的简短描述。显示在首页上。
`image`	文章封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：`public` 目录中的图片 3. 不带任何前缀：相对于 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`licenseName`	文章内容的许可证名称。
`author`	文章作者。
`sourceLink`	文章内容的来源链接或参考。
`draft`	如果这篇文章仍是草稿，则不会显示。
`slug`	自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。

自定义文章 URL (Slug)#

Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。

Slug 使用示例#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
slug: hello-world
5
---

文件：src/content/posts/my-first-blog-post.md URL：/posts/hello-world

Slug 使用建议#

使用英文和连字符：my-awesome-post 而不是 my awesome post
保持简洁：避免过长的 slug
具有描述性：让 URL 能够反映文章内容
避免特殊字符：只使用字母、数字和连字符
保持一致性：在整个博客中使用相似的命名模式

注意事项#

Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接
如果多个文章使用相同的 slug，后面的文章会覆盖前面的
Slug 会自动转换为小写

GitHub 仓库卡片#

您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。

CuteLeaf

Firefly

Waiting for api.github.com...

00K

Waiting...

使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。

1
::github{repo="CuteLeaf/Firefly"}

提醒框#

支持以下类型的提示框：note tip important warning caution

NOTE
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。

TIP
可选信息，帮助用户更成功。

IMPORTANT
用户成功所必需的关键信息。

WARNING
由于潜在风险需要用户立即注意的关键内容。

CAUTION
行动的负面潜在后果。

基本语法#

1
:::note
2
强调用户即使在快速浏览时也应该注意的信息。
3
:::
4

5
:::tip
6
可选信息，用于帮助用户更好地完成操作。
7
:::

自定义标题#

提示框的标题可以自定义。

我的自定义标题
这是一个带有自定义标题的 note。

1
:::note[我的自定义标题]
2
这是一个带有自定义标题的 note。
3
:::

GitHub Syntax#

TIP
也支持 GitHub 语法。

1
> [!NOTE]
2
> 也支持 GitHub 语法。
3

4
> [!TIP]
5
> 也支持 GitHub 语法。

剧透 Spoiler#

你可以在文字中添加剧透隐藏区块。内容也支持 Markdown 语法。

The content is hidden 哈哈!

1
The content :spoiler[is hidden **哈哈**]!

代码块示例#

这里展示使用 Expressive Code 时代码块的外观。以下示例基于官方文档，你可以参考文档获取更多信息。

表达性代码#

语法高亮#

语法高亮

常规语法高亮#

1
console.log("此代码有语法高亮!");

渲染 ANSI 转义序列#

1
ANSI 颜色:
2
- 普通: 红 绿 黄 蓝 品红 青
3
- 加粗: 红 绿 黄 蓝 品红 青
4
- 暗淡: 红 绿 黄 蓝 品红 青
5

6
256 色（示例颜色 160–177）:
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
完整 RGB 色:
12
森林绿 - RGB(34, 139, 34)
13

14
文本格式: 加粗 暗淡 斜体 下划线

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

1
console.log("标题属性示例");

1
<div>文件名注释示例</div>

终端框架#

1
echo "这个终端窗口没有标题"

1
Write-Output "这个终端窗口有标题！"

覆盖框架类型#

1
echo "看，我没有外框！"

1
# 如果不覆盖，这段会显示为终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

标记整行和行范围#

1
// 行 1 - 由行号标记
2
// 行 2
3
// 行 3
4
// 行 4 - 由行号标记
5
// 行 5
6
// 行 6
7
// 行 7 - 由范围 "7-8" 标记
8
// 行 8 - 由范围 "7-8" 标记

选择行标记类型 (mark, ins, del)#

1
function demo() {
2
  console.log("此行被标记为删除");
3
  // 这行和下一行被标记为插入
4
  console.log("这是第二行插入内容");
5

6
  return "此行使用默认标记类型";
7
}

为行标记添加标签#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === "string" ? <span>{children}</span> : children)}
12
</button>

在单独行上添加长标签#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === "string" ? <span>{children}</span> : children)}
12
</button>

使用类似 diff 的语法#

1
这行将被标记为插入
2
这行将被标记为删除
3
这是一行普通文本

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+这是一份真实的 diff 文件
5
-所有内容将保持不变
6
 不会移除任何空白字符

结合语法高亮和类似 diff 的语法#

1
function thisIsJavaScript() {
2
  // 这一整个代码块仍会按 JavaScript 高亮，
3
  // 同时仍可应用 diff 标记！
4
  console.log('旧代码，将被移除')
5
  console.log('新的、更好的代码！')
6
}

标记行内的单独文本#

1
function demo() {
2
  // 可标记行内任意指定文本
3
  return "支持标记指定文本的多个匹配项";
4
}

正则表达式#

1
console.log("单词 yes 和 yep 会被标记。");

转义正斜杠#

1
echo "Test" > /home/test.txt

选择内联标记类型 (mark, ins, del)#

1
function demo() {
2
  console.log("这些是插入与删除标记类型");
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行

为每个块配置自动换行#

1
// wrap 示例
2
function getLongString() {
3
  return "这是一段非常长的字符串，如果容器不够宽，几乎不可能完全显示";
4
}

1
// wrap=false 示例
2
function getLongString() {
3
  return "这是一段非常长的字符串，如果容器不够宽，几乎不可能完全显示";
4
}

配置换行的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return "这是一段非常长的字符串，如果容器不够宽，几乎不可能完全显示";
4
}

1
// preserveIndent=false 示例
2
function getLongString() {
3
  return "这是一段非常长的字符串，如果容器不够宽，几乎不可能完全显示";
4
}

可折叠部分#

可折叠部分


5 collapsed lines
1
// 下方这些样板设置代码将被折叠
2
import { someBoilerplateEngine } from "@example/some-boilerplate";
3
import { evenMoreBoilerplate } from "@example/even-more-boilerplate";
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate());
6

7
// 这一部分将默认显示
8
engine.doSomething(1, 2, 3, calcFn);
9

10
function calcFn() {
11
  // 你可以拥有多个折叠区块
3 collapsed lines
12
  const a = 1;
13
  const b = 2;
14
  const c = a + b;
15

16
  // 这一部分保持可见
17
  console.log(`计算结果: ${a} + ${b} = ${c}`);
18
  return c;
19
}
20

4 collapsed lines
21
// 直到块末尾的所有代码将再次被折叠
22
engine.closeConnection();
23
engine.freeMemory();
24
engine.shutdown({ reason: "样板代码示例结束" });

行号#

行号

为每个块显示行号#

1
// 此代码块将显示行号
2
console.log("来自第 2 行的问候！");
3
console.log("我在第 3 行");

// 此代码块禁用行号
console.log("有人吗？");
console.log("呃，我在第几行？");

更改起始行号#

5
console.log("来自第 5 行的问候！");
6
console.log("我在第 6 行");

KaTeX 数学公式示例#

行内公式 (Inline)#

行内公式使用单个 $ 符号包裹。

例如：欧拉公式 $e^{i\pi} + 1 = 0$ 是数学中最优美的公式之一。

质能方程 $E = mc^2$ 也是家喻户晓。

块级公式 (Block)#

块级公式使用两个 $$ 符号包裹，会居中显示。

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

复杂示例#

矩阵 (Matrices)#

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} \alpha & \beta \\ \gamma & \delta \end{pmatrix} = \begin{pmatrix} a\alpha + b\gamma & a\beta + b\delta \\ c\alpha + d\gamma & c\beta + d\delta \end{pmatrix}

极限与求和 (Limits and Sums)#

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

\lim_{x \to 0} \frac{\sin x}{x} = 1

麦克斯韦方程组 (Maxwell’s Equations)#

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned}

化学方程式 (Chemical Equations)#

\ce{CH4 + 2O2 -> CO2 + 2H2O}

符号	代码	渲染结果
Alpha	`\alpha`	$\alpha$
Beta	`\beta`	$\beta$
Gamma	`\Gamma`	$\Gamma$
Pi	`\pi`	$\pi$
Infinity	`\infty`	$\infty$
Right Arrow	`\rightarrow`	$\rightarrow$
Partial	`\partial`	$\partial$

Markdown 中 Mermaid 图表完整指南#

流程图示例#

流程图非常适合表示流程或算法步骤。

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子过程] D --> E subgraph E [子过程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{另一个决策} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例#

时序图显示对象之间随时间的交互。

sequenceDiagram participant User as 用户 participant WebApp as 网页应用 participant Server as 服务器 participant Database as 数据库 User->>WebApp: 提交登录请求 WebApp->>Server: 发送认证请求 Server->>Database: 查询用户凭据 Database-->>Server: 返回用户数据 Server-->>WebApp: 返回认证结果 alt 认证成功 WebApp->>User: 显示欢迎页面 WebApp->>Server: 请求用户数据 Server->>Database: 获取用户偏好 Database-->>Server: 返回偏好设置 Server-->>WebApp: 返回用户数据 WebApp->>User: 加载个性化界面 else 认证失败 WebApp->>User: 显示错误消息 WebApp->>User: 提示重新输入 end

甘特图示例#

甘特图非常适合显示项目进度和时间线。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段需求分析 :a1, 2023-10-01, 7d UI设计 :a2, after a1, 10d 原型创建 :a3, after a2, 5d section 开发阶段前端开发 :b1, 2023-10-20, 15d 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 部署生产环境部署 :d1, after c3, 3d 发布 :milestone, after d1, 0d

类图示例#

类图显示系统的静态结构，包括类、属性、方法及其关系。

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : 写作 User "1" -- "*" Comment : 发表 Article "1" -- "*" Comment : 拥有 Article "1" -- "*" Category : 属于

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 拒绝审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 活跃活跃 --> 隐藏 : 临时隐藏隐藏 --> 活跃 : 恢复活跃 --> [*] 隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合显示比例和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "推荐链接" : 6.4 "其他来源" : 2.6

Stella forward

Firefly 简易指南

文章的 Front-matter#

自定义文章 URL (Slug)#

Slug 使用示例#

Slug 使用建议#

注意事项#

GitHub 仓库卡片#

提醒框#

基本语法#

自定义标题#

GitHub Syntax#

剧透 Spoiler#

代码块示例#

表达性代码#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器和终端框架#

代码编辑器框架#

终端框架#

覆盖框架类型#

文本和行标记#

标记整行和行范围#

选择行标记类型 (mark, ins, del)#

为行标记添加标签#

在单独行上添加长标签#

使用类似 diff 的语法#

结合语法高亮和类似 diff 的语法#

标记行内的单独文本#

正则表达式#

转义正斜杠#

选择内联标记类型 (mark, ins, del)#

自动换行#

为每个块配置自动换行#

配置换行的缩进#

可折叠部分#

行号#

为每个块显示行号#

更改起始行号#

KaTeX 数学公式示例#

行内公式 (Inline)#

块级公式 (Block)#

复杂示例#

矩阵 (Matrices)#

极限与求和 (Limits and Sums)#

麦克斯韦方程组 (Maxwell’s Equations)#

化学方程式 (Chemical Equations)#

更多符号#

Markdown 中 Mermaid 图表完整指南#

流程图示例#

时序图示例#

甘特图示例#

类图示例#

状态图示例#

饼图示例#

分享

目录