Blyの小破站~

我的Bly多账号管理~

Thu, 13 Aug 2026 00:00:00 GMT

我的Bly多账号管理

可以进行验证功能

可以进行批量加群，定时批量发消息，以及自动交互功能，代理ip功能，进行营销，养号，引流，打广告等各种用途曼波波波~

Cloudflare VS Vercel？！

Wed, 12 Aug 2026 00:00:00 GMT

引言 Vercel 和 Cloudflare 是目前较为常见的两个 Web 部署平台。Vercel 偏向前端生态和开发体验，Cloudflare 则依托其全球边缘网络提供底层计算和存储能力。两者都在往”全栈应用交付平台”的方向发展，但实现路径和适用场景有所不同。

本文将介绍双方的服务和异同点，希望能帮读者理清其中的差别，从而根据自身需求做出合适的选择。

Cloudflare Cloudflare 依托其全球边缘网络，将计算和存储部署在离用户较近的节点上。以下是其四个核心服务。

Workers Workers 是一个在 Cloudflare 全球网络上运行的无服务器计算平台，基于 Service Workers API，运行在 V8 隔离环境中，启动速度快。

能跑什么后端代码： Workers 运行在 V8 引擎上，不兼容完整的 Node.js API（没有 fs、net 等模块），但提供了 fetch、Request、Response 等 Web 标准 API。支持的编程语言包括 JavaScript、TypeScript、Rust（编译为 WASM）和 Python（通过 Pyodide）。

能运行什么框架：

Web 框架：Hono、Itty Router 全栈框架：Astro（SSR）、SvelteKit、Remix、SolidStart 静态站点：Hugo、Jekyll、Zola、Astro（静态模式）免费计划每天 10 万次请求，128 MB 内存。

D1 D1 是 Cloudflare 的无服务器关系型数据库，基于 SQLite，可通过 Workers 直接访问或通过 HTTP API 操作，无需管理连接池。免费计划 5 GB 存储。

KV Workers KV 是一个全局键值存储，数据被复制到 Cloudflare 的边缘节点，适合存储配置、缓存数据等。免费计划 10 万个键。

R2 R2 是 Cloudflare 的对象存储服务，兼容 S3 API，特点是不收取出口流量费。阿里云 OSS 属于同一类。它主要用于存储非结构化数据，所以可以存很多东西，甚于像本站一样的博客。免费计划 10 GB 存储。

Vercel Vercel 与前端的框架整合较好，提供了从开发到部署的一体化体验。

Node.js 运行时 Vercel 的核心无服务器函数基于 Node.js 运行时，也支持 Python、Go、Ruby、Bun。函数在 AWS Lambda 上执行，可以使用完整的 Node.js API。

能跑什么后端代码：函数运行在标准的 Node.js 环境中，可以访问 fs、net、http、child_process 等所有 Node.js 内置模块，也可以安装任何 npm 包。因此能跑大多数 Node.js 后端代码，包括 Express、Fastify、Apollo Server 等。注意函数有超时限制（Hobby 计划 60 秒），不适合长时间运行的后台任务。

能运行什么框架：

React 框架：Next.js（原生支持最好）、Remix Vue 框架：Nuxt Svelte 框架：SvelteKit 通用框架：Astro、VitePress、Docusaurus、Hexo 几乎所有前端框架都能自动检测并选择最佳构建配置免费计划每月 100 小时函数执行时间，单函数最大 50 MB。

数据库（PostgreSQL） Vercel 与 Neon 合作提供了 Vercel Postgres（现为 Vercel Storage 的一部分），是标准的 PostgreSQL 数据库。也可以用 pg 或 @vercel/postgres 连接外部 PG 实例，如 Supabase、AWS RDS 等。

构建系统 Vercel 的构建系统会为每次 git push 自动触发构建和部署，自动检测框架并生成预览环境。免费计划每月 6,000 分钟构建时长。

D1（SQLite）与 PG 的差异 D1 基于 SQLite，PostgreSQL（Neon）是一个独立的关系型数据库，两者差异不小：什么项目适合什么：

D1 适合个人博客、小型 API、配置管理、原型项目、边缘地理位置需要低延迟的场景。不需要复杂查询和高并发，追求简单和免运维。

PostgreSQL 适合需要事务完整性、复杂查询、高并发的项目：如电商系统、论坛、内容管理系统、数据分析后台等。如果已经有现成的 PG 应用迁移过来也更合适。

我的API中转站：blyciallololiyyds.xzy

Wed, 12 Aug 2026 00:00:00 GMT

我的中转站：blyciallololiyyds.xzy 他一般我自用，用我接入Agent来做各种事情，这个api中转站已经很久没管过了，打开我的api中转站得用VPN打开，进去注册账号，联系我可以送你额度（在说一下为什么取那么长的域名） Bly是我的名字 Ciallo~（不用多说，柚子厨旮旯给木） loliyyds（什么？是萝莉控！快跑！）曼波波波~

想开放软件自动化等的可以找我~

Wed, 12 Aug 2026 00:00:00 GMT

联系QQ：390237710

怎么用Netlify反代

Wed, 12 Aug 2026 00:00:00 GMT

首先去Netlify官网注册账号。再去你的github新建一个仓库，只要写一个netlify.toml（在根目录下），内容如下 redirects from = ”/*” to = “http://反代域名:反代端口/:splat” status = 200 force = true 你只要替换http://反代域名:反代端口/:splat 如果你实际要反代的url没有端口就不填，但一定要有端口后的 / 最后回netlify创建一个新项目，选择你刚创建的Github项目，部署即可最后绑定一下你的域名。

关键词监听机器人~

Thu, 13 Aug 2026 00:00:00 GMT

监控所有已加入的群聊，你设定的关键词，可监听所有的群聊，当有人发消息匹配到你的关键词，机器人将会把用户信息ID和哪个群（可一件定位）到所发消息的地方，把用户信息ID统一打包发给你，部署到服务器上面可24小时无间断监听~~~配合多账号管理太爽了~

Linux（Debian 系）上搭建 C++ 开发环境

Wed, 12 Aug 2026 00:00:00 GMT

介绍 Linux 做 C++ 开发确实舒服，工具链齐全，编译速度也快。这篇文章手把手教你在 Debian 系的 Linux 上，用 VS Code + Clang + CMake + Ninja + vcpkg 搭一套现代化的开发环境，最后还会用 C++20 模块跑一个示例项目。

需要装的东西编译器：Clang 项目构建器：CMake 本地构建器：Ninja 依赖包管理：vcpkg 安装和配置

安装 Clang 编译器 Clang 的错误提示比 GCC 友好很多，而且对新标准的支持一直很积极。截至 2026 年 4 月，最新稳定版是 Clang 22.1.3。Clang 23 已经有预发布版了，但建议还是用稳定的。

用 LLVM 官方脚本装最省事： wget https://apt.llvm.org/llvm.sh chmod +x llvm.sh sudo ./llvm.sh 22 脚本跑完会自动添加 LLVM 的 APT 仓库，然后装好 clang-22 和相关工具。

装完之后设一下默认版本，这样终端里直接输 clang 就能用： sudo update-alternatives —install /usr/bin/clang clang /usr/bin/clang-22 100 sudo update-alternatives —install /usr/bin/clang++ clang++ /usr/bin/clang++-22 100 sudo update-alternatives —install /usr/bin/clangd clangd /usr/bin/clangd-22 100 sudo update-alternatives —install /usr/bin/lldb lldb /usr/bin/lldb-22 100 sudo update-alternatives —install /usr/bin/lld lld /usr/bin/lld-22 100 sudo update-alternatives —install /usr/bin/clang-tidy clang-tidy /usr/bin/clang-tidy-22 100 sudo update-alternatives —install /usr/bin/clang-format clang-format /usr/bin/clang-format-22 100 跑完 clang —version 看一下，输出里有 “clang version 22.1.3” 就说明装好了。

安装 CMake 构建系统 CMake 是 C++ 项目构建的标配，能生成各种构建系统需要的文件。当前最新稳定版是 CMake 4.3.1。

从官方下载安装脚本： wget https://github.com/Kitware/CMake/releases/download/v4.3.1/cmake-4.3.1-linux-x86_64.sh

chmod +x cmake-4.3.1-linux-x86_64.sh sudo ./cmake-4.3.1-linux-x86_64.sh —prefix=/opt/cmake-4.3.1 —skip-license

然后配一下默认版本： sudo update-alternatives —install /usr/bin/cmake cmake /opt/cmake-4.3.1/bin/cmake 100 sudo update-alternatives —install /usr/bin/ctest ctest /opt/cmake-4.3.1/bin/ctest 100 sudo update-alternatives —install /usr/bin/cpack cpack /opt/cmake-4.3.1/bin/cpack 100 cmake —version 能看到 4.3.1 就 OK 了。

安装 Ninja 构建工具 Ninja 专注速度，配合 CMake 用编译特别快。目前最新稳定版是 1.13.2。

从 GitHub 下载预编译的二进制文件，解压放到系统路径里就行：

wget https://github.com/ninja-build/ninja/releases/download/v1.13.2/ninja-linux.zip unzip ninja-linux.zip sudo mv ninja /usr/bin/ninja sudo chmod +x /usr/bin/ninja ninja —version 4. 安装 vcpkg 包管理器 vcpkg 是微软出的 C++ 库管理器，装第三方库特别方便，不用手动折腾依赖。最新稳定版是 2026.04.08。 cd ~ git clone https://github.com/microsoft/vcpkg.git cd vcpkg ./bootstrap-vcpkg.sh 装好后把路径加到环境变量里，编辑 ~/.bashrc 或 ~/.zshrc： export PATH=/opt/cmake-4.3.1/bin:PATHexportVCPKGROOT= /vcpkgexportPATH=PATH export VCPKG_ROOT=~/vcpkg export PATH=PATHexportVCPKGROOT= /vcpkgexportPATH=VCPKG_ROOT:$PATH 改完重启终端或者 source ~/.bashrc，然后 vcpkg —version 看看版本就对了。

Visual Studio Code VS Code 做 C++ 开发挺好用的（当然你也可以用 CLion 之类的）。装好之后去扩展市场搜这几个插件：

Clangd（作者: LLVM）：代码补全、跳转、实时诊断，比微软的 C/C++ 插件好用。 CodeLLDB（作者: Vadim Chugunov）：本地调试器，跟 VS Code 集成得很好。 CMake Tools（作者: Microsoft）：直接在 VS Code 里配置、构建、运行 CMake 项目。 CMake（作者: Microsoft）：给 CMakeLists.txt 提供语法高亮。构建和运行你的第一个程序用 C++20 的模块特性来写第一个项目。

项目结构建一个项目文件夹，结构长这样：

CppProject/ ├── .vscode/ │ └── launch.json # 调试配置（后面会创建） ├── CMakeLists.txt # CMake 项目配置 ├── CMakePresets.json # CMake 预设 ├── main.cpp # 主程序 ├── utilities.ixx # 一个简单的 C++20 模块 └── vcpkg.json # vcpkg 依赖描述不知道这些文件里写什么的话，把这篇文章丢给 AI 让它帮你生成。

配置代码和调试器 utilities.ixx 模块文件： module; #include export module utilities; export auto get_greeting() { return “Hello from a C++20 Module!”; } 主程序 main.cpp： import utilities; #include <fmt/core.h> int main() { fmt::print(”{}\n”, get_greeting()); return 0; } 调试配置文件 .vscode/launch.json，注意 program 的路径要跟你的构建输出目录对上： { “version”: “0.2.0”, “configurations”: [ { “type”: “lldb”, “request”: “launch”, “name”: “Debug (LLDB)”, “program”: “workspaceFolder/build/linuxclang/Debug/Rocket","args":[],"cwd":"{workspaceFolder}/build/linux_clang/Debug/Rocket", "args": [], "cwd": "workspaceFolder/build/linuxclang/Debug/Rocket","args":[],"cwd":"{workspaceFolder}” } ] } 配置、构建与运行

选择预设在 VS Code 里打开项目文件夹，Ctrl+Shift+P 打开命令面板，输入 CMake: Select Configure Preset，根据你的系统和编译器选一个合适的预设。
开始构建再打开命令面板，输入 CMake: Build，或者直接按 F7。CMake 会调用 Clang 和 Ninja 来编译和链接。
运行与调试构建成功后，点 VS Code 底部的 ▶️ 按钮就能运行。设好断点按 F5 启动调试，F10 单步执行，变量值也能实时看到。

总结搞定了，你现在有了一套完整的现代化 C++ 开发环境。不管是自己学习还是团队协作都能用。

有两个要注意的地方：

装完所有工具后，记得用 —version 一个个验证版本，确保环境变量没配错。 launch.json 是项目的调试启动配置，新建项目的时候记得把这个文件复制过去，然后把 program 字段改成新项目的可执行文件路径。 CMakeLists.txt 和 CMakePresets.json 不知道怎么写的话，直接问 AI 就行。

Linux 上安装和使用 AstrBot

Wed, 12 Aug 2026 00:00:00 GMT

AstrBot 是什么 AstrBot 是一个开源的聊天机器人框架，轻量好用，能对接 QQ、微信、飞书这些平台。自带插件系统和可视化面板，社区里已经有上千款插件了，做自动回复、群管理、定时任务什么的都挺方便的。

安装在 Linux 终端里跑这个脚本就行： bash <(curl -sSL https://raw.githubusercontent.com/zhende1113/Antlia/refs/heads/main/Script/AstrBot/Antlia.sh) 如果你的系统没装 curl，用 wget 也行 wget -qO- https://raw.githubusercontent.com/zhende1113/Antlia/refs/heads/main/Script/AstrBot/Antlia.sh | bash 如果 uv sync 报错，可以试试设置环境变量： echo ‘export UV_LINK_MODE=copy’ >> ~/.bashrc source ~/.bashrc 然后正常启动： cd AstrBot uv run main.py 如果下载依赖时遇到网络问题，可以换成国内镜像源： echo ‘export UV_DEFAULT_INDEX=“https://pypi.tuna.tsinghua.edu.cn/simple”’ >> ~/.bashrc source ~/.bashrc

测试

Tue, 11 Aug 2026 00:00:00 GMT

测试 1241412 1512512 咕咕嘎嘎咕咕嘎嘎过

Firefly Wiki Link 内部链接示例

Sat, 03 Jan 1970 00:00:00 GMT

Firefly 支持在 Markdown、MDX 文章中使用 Obsidian 风格的 Wiki Link 内部链接。链接目标填写文章的 slug 或文件路径，都不需要包含扩展名，具体匹配规则见下文「链接目标的三种写法」。

文章链接卡片#

[[slug]] 单独成段时，会自动读取目标文章的标题、描述、发布时间、分类、标签和封面，渲染为链接卡片：

1
[[firefly]]
2

3
[[guide/index]]
4

5
[[markdown-extended]]

firefly

guide/index

Markdown 扩展功能

了解 Firefly 中的 Markdown 功能

1970-01-01文章示例#演示#示例#Markdown#Firefly

行内链接#

[[slug]] 出现在正文中间时，渲染为普通链接，链接文字自动使用目标文章的标题

1
请参阅 [[firefly]] 了解主题特性。

请参阅 firefly 了解主题特性。

自定义显示标题#

在 | 后填写链接的显示文字。行内链接会用它替换文章标题；单独成段时依然渲染为卡片，卡片标题使用自定义文字，描述、时间、分类、标签和封面仍然读取目标文章：

1
请参阅 [[firefly|主题介绍]] 了解主题特性。
2

3
[[firefly|Firefly 主题介绍]]

请参阅主题介绍了解主题特性。

Firefly 主题介绍

一个例外：如果 | 后的文字只是把链接目标又抄了一遍（[[guide/index|index]]），会被当作无效别名忽略，仍然显示文章标题。Obsidian 在插入的链接时会自动补上这样的别名，避免笔记里显示一长串路径，这个例外就是为它准备的。

链接目标的三种写法#

用 Obsidian 管理文章时，把 src/content/posts 目录本身作为 Obsidian 仓库（vault）打开。下文提到的「仓库根目录」都指这个目录，它正好也是 Firefly 解析链接路径的起点。

链接目标按以下顺序匹配：

写法	示例	在 Obsidian 中
frontmatter 的 `slug`	`[[firefly-wiki-link]]`	✗ 不支持
文件路径（相对仓库根目录）	`[[guide/firefly-layout-system]]`	✓ 需改设置（推荐）
裸文件名（仓库内唯一时）	`[[firefly-layout-system]]`	✓ 默认即是

第一种：slug#

slug 写法在 Obsidian 中不支持，slug 是 Firefly 自己的概念，Obsidian 不读取 frontmatter 里的 slug，所以按 slug 写的链接在 Obsidian 里既不会自动补全，也点不动，只有构建出的站点上能正常跳转。如果你主要在 Obsidian 里写作，用下面两种写法。

第二种：文件路径（推荐）#

文件路径写法需要改 Obsidian 设置，在 设置 → 文件与链接 → 链接 → 内部链接类型 中选择基于仓库根目录的绝对路径，Obsidian 插入的链接才会带上目录：

1
[[guide/firefly-layout-system|firefly-layout-system]]

guide/firefly-layout-system

因为仓库根目录就是 src/content/posts，Obsidian 写出的这个路径和 Firefly 需要的路径完全一致，不需要任何额外转换。

上面这行末尾的 |firefly-layout-system 是 Obsidian 自动补的别名，Firefly 会忽略它，卡片标题仍然取文章的 title，除非你把它修改和文件名不一致，才会变成你修改后的别名。

内部链接类型下拉框里的基于当前笔记的相对路径只在同目录内可用：它给同目录文章生成的是裸文件名，能正常匹配；但跨目录时会生成 ../ 前缀，Firefly 无法解析，链接会按原文显示。

第三种：裸文件名#

「内部链接类型」的默认值就是尽可能简短的形式：只要文件名在整个仓库里唯一，Obsidian 插入的链接就只有文件名，不带目录。这种写法不需要改任何设置，效果和写完整路径完全一致：

1
[[firefly-layout-system]]

firefly-layout-system

文件名重名时这种写法会失效，构建日志里会给出提示，改用完整文件路径即可，所以推荐直接修改 Obsidian 内部链接类型设置为基于仓库根目录的绝对路径，使用第二种文件路径写法，一劳永逸

链接到其他文章的标题#

在文章 slug 后添加 #标题。带标题锚点的链接始终渲染为普通链接：

查看代码块语法高亮

guide/firefly-layout-system#相关链接#相关链接

1
[[code-examples#语法高亮|查看代码块语法高亮]]
2

3
[[guide/firefly-layout-system#相关链接|firefly-layout-system]]

标题锚点使用与页面标题相同的 slug 规则，因此中文、空格和大小写都会按页面实际生成的 ID 处理。

链接到本页标题#

省略文章 slug，只填写标题即可链接到当前文章：

跳转到本页目标

1
[[#本页目标|跳转到本页目标]]

本页目标#

这是本页 Wiki Link 指向的标题。

不支持附件嵌入#

附件嵌入语法目前不会被转换，会按原文显示：

![[image.png]]

行内代码和代码块中的 [[firefly]] 也不会被转换。

Firefly 文章加密

Fri, 02 Jan 1970 00:00:00 GMT

这是一篇密码保护的示例文章，用于演示文章加密功能。

KaTeX 数学公式示例

Fri, 02 Jan 1970 00:00:00 GMT

本文展示了 Firefly 主题对 KaTeX 数学公式的渲染支持。

行内公式 (Inline)#

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

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

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

块级公式 (Block)#

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

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞e−x2dx=πx=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2a−b±b2−4ac

复杂示例#

矩阵 (Matrices)#

(abcd)(αβγδ)=(aα+bγaβ+bδcα+dγcβ+dδ)\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}(acbd)(αγβδ)=(aα+bγcα+dγaβ+bδcβ+dδ)

极限与求和 (Limits and Sums)#

∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞n21=6π2lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1x→0limxsinx=1

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

∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ε0∂E∂t\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}∇⋅E∇⋅B∇×E∇×B=ε0ρ=0=−∂t∂B=μ0J+μ0ε0∂t∂E

化学方程式 (Chemical Equations)#

\ceCH4+2O2−>CO2+2H2O\ce{CH4 + 2O2 -> CO2 + 2H2O}\ceCH4+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∂

MDX 格式文章示例

Fri, 02 Jan 1970 00:00:00 GMT

Tip

Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。

Markdown 和 MDX 的区别#

Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。

特性	Markdown	MDX
基础语法	支持 (CommonMark)	支持 (CommonMark)
HTML 标签	支持	支持 (作为 JSX)
组件导入	不支持	支持 (import)
动态数据	不支持	支持 (JS 表达式)
样式定制	有限 (class/style)	灵活 (className/CSS-in-JS)

使用组件#

这是一个图标组件：

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
  <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" />
5
  <span>火箭发射！</span>
6
</div>

火箭发射！

使用 JSX#

你也可以直接写 HTML/JSX：

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
3
</div>

这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。

简单的变量导出#

1
export const year = new Date().getFullYear()
2

3
今年是 {year} 年。

今年是 2026 年。

更多信息，请查看 MDX 文档

Markdown 扩展功能

Thu, 01 Jan 1970 00:00:00 GMT

GitHub 仓库卡片#

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

CuteLeaf

Firefly

Waiting for api.github.com...

00K

Waiting...

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

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

提醒框(Admonitions)配置#

Firefly 采用了 rehype-callouts 插件，支持了四种风格的提醒框主题：GitHub、Obsidian、VitePress 和 Docusaurus。您可以在 src/config/siteConfig.ts 中进行配置：

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  // ...
3
  rehypeCallouts: {
4
    // 选项: "github" | "obsidian" | "vitepress" | "docusaurus"
5
    theme: "github",
6
  },
7
  // ...
8
};

注意：更改配置后需要重启开发服务器才能生效。

以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。

1. GitHub 主题风格#

这是 GitHub 官方支持的 5 种基本类型。

GitHub

基本语法

1
> [!NOTE] NOTE
2
> 突出显示用户应该考虑的信息。
3

4
> [!TIP] TIP
5
> 可选信息，帮助用户更成功。
6

7
> [!IMPORTANT] IMPORTANT
8
> 用户成功所必需的关键信息。
9

10
> [!WARNING] WARNING
11
> 关键内容，需要立即注意。
12

13
> [!CAUTION] CAUTION
14
> 行动的负面潜在后果。
15

16
> [!NOTE] 自定义标题
17
> 这是一个带有自定义标题的示例。

展开收起

2. Obsidian 主题风格#

Obsidian 风格支持非常丰富的类型和别名。

点击展开 Obsidian 语法列表

1
> [!NOTE] NOTE
2
> 通用的笔记块。
3

4
> [!ABSTRACT] ABSTRACT
5
> 文章的摘要。
6

7
> [!SUMMARY] SUMMARY
8
> 文章的总结（同 Abstract）。
9

10
> [!TLDR] TLDR
11
> 太长不看（同 Abstract）。
12

13
> [!INFO] INFO
14
> 提供额外信息。
15

16
> [!TODO] TODO
17
> 需要完成的事项。
18

19
> [!TIP] TIP
20
> 实用技巧或提示。
21

22
> [!HINT] HINT
23
> 暗示（同 Tip）。
24

25
> [!IMPORTANT] IMPORTANT
26
> 重要信息（Obsidian 风格通常使用类似的图标）。
27

28
> [!SUCCESS] SUCCESS
29
> 操作成功。
30

31
> [!CHECK] CHECK
32
> 检查通过（同 Success）。
33

34
> [!DONE] DONE
35
> 已完成（同 Success）。
36

37
> [!QUESTION] QUESTION
38
> 提出问题。
39

40
> [!HELP] HELP
41
> 寻求帮助（同 Question）。
42

43
> [!FAQ] FAQ
44
> 常见问题（同 Question）。
45

46
> [!WARNING] WARNING
47
> 警告信息。
48

49
> [!CAUTION] CAUTION
50
> 注意事项（同 Warning）。
51

52
> [!ATTENTION] ATTENTION
53
> 引起注意（同 Warning）。
54

55
> [!FAILURE] FAILURE
56
> 操作失败。
57

58
> [!FAIL] FAIL
59
> 失败（同 Failure）。
60

61
> [!MISSING] MISSING
62
> 缺失内容（同 Failure）。
63

64
> [!DANGER] DANGER
65
> 危险操作警告。
66

67
> [!ERROR] ERROR
68
> 错误信息（同 Danger）。
69

70
> [!BUG] BUG
71
> 报告软件缺陷。
72

73
> [!EXAMPLE] EXAMPLE
74
> 展示一个例子。
75

76
> [!QUOTE] QUOTE
77
> 引用一段话。
78

79
> [!CITE] CITE
80
> 引证（同 Quote）。
81

82
> [!NOTE] 自定义标题
83
> 这是一个带有自定义标题的示例。

展开收起

Obsidian

3. VitePress 主题风格#

VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。

点击展开 VitePress 语法列表

1
> [!NOTE] NOTE
2
> 对应 GitHub 的 Note。
3

4
> [!TIP] TIP
5
> 对应 GitHub 的 Tip。
6

7
> [!IMPORTANT] IMPORTANT
8
> 对应 GitHub 的 Important。
9

10
> [!WARNING] WARNING
11
> 对应 GitHub 的 Warning。
12

13
> [!CAUTION] CAUTION
14
> 对应 GitHub 的 Caution。
15

16
> [!TIP] 自定义标题
17
> VitePress 风格同样支持自定义标题。

展开收起

VitePress

4. Docusaurus 主题风格#

Docusaurus 风格提供了一套现代化的提醒框样式，支持 5 种类型。

点击展开 Docusaurus 语法列表

支持以下类型的提醒框：note tip info warning danger

1
:::note
2
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
3
:::
4

5
:::tip
6
可选信息，帮助用户更成功。
7
:::
8

9
:::info
10
一般信息。
11
:::
12

13
:::warning
14
由于潜在风险需要用户立即注意的关键内容。
15
:::
16

17
:::danger
18
行动的负面潜在后果。
19
:::
20

21
:::tip[自定义标题]
22
可选信息，帮助用户更成功。
23
:::

展开收起

Docusaurus

剧透#

您可以为文本添加剧透。文本也支持 Markdown 语法。

内容被隐藏了哈哈！

1
内容 :spoiler[被隐藏了 **哈哈**]！

图片画廊网格 (Image Grid)#

您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。

自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。

图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。

示例图片一

示例图片二

基本语法

1
[grid]
2
![示例图片一](./images/firefly1.avif)
3
![示例图片二](./images/firefly2.avif)
4
![示例图片二](./images/firefly3.avif)
5
[/grid]

Markdown Mermaid 图表

Thu, 01 Jan 1970 00:00:00 GMT

Markdown 中 Mermaid 图表完整指南#

本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、ER 图、类图、状态图、XY 图、甘特图、思维导图等。

Mermaid 图表由 Merman 实现。Firefly 在 Astro 构建阶段生成亮色和深色两套静态 SVG，无需在浏览器中加载 Mermaid 渲染运行时。可以前往 Merman Playground 实时编辑语法并预览渲染结果。

流程图示例#

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

是

否

选项 1

选项 2

选项 3

子过程详情

子步骤 1

子步骤 2

子步骤 3

开始

条件检查

处理步骤 1

处理步骤 2

另一个决策

结果 1

结果 2

结果 3

结束

是

否

选项 1

选项 2

选项 3

子过程详情

子步骤 1

子步骤 2

子步骤 3

开始

条件检查

处理步骤 1

处理步骤 2

另一个决策

结果 1

结果 2

结果 3

结束

时序图示例#

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

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

ER 图示例#

ER 图（实体关系图）非常适合表示数据库结构。

writes

posts

has

belongs to

USER

int

string

username

string

datetime

created_at

ARTICLE

int

string

title

text

content

datetime

published

int

author_id

COMMENT

int

text

content

datetime

created_at

int

user_id

int

article_id

类图示例#

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

写作

发表

拥有

属于

User

+String username

+String password

+String email

+Boolean active

+login()

+logout()

+updateProfile()

Article

+String title

+String content

+Date publishDate

+Boolean published

+publish()

+edit()

+delete()

Comment

+String content

+Date commentDate

+addComment()

+deleteComment()

状态图示例#

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

提交

拒绝

批准

发布

归档

撤回

草稿

审核中

已批准

已归档

已发布

临时隐藏

恢复

活跃

隐藏

提交

拒绝

批准

发布

归档

撤回

草稿

审核中

已批准

已归档

已发布

临时隐藏

恢复

活跃

隐藏

XY 图示例#

XY 图表非常适合展示趋势和对比数据。

月度访问量趋势1月2月3月4月5月6月5000450040003500300025002000150010005000访问量

饼图示例#

饼图适合直观展示各部分在整体中的占比。

45%30%15%10%内容类型占比技术文章 [45]项目记录 [30]生活随笔 [15]其他 [10]

甘特图示例#

甘特图可以按时间轴展示项目阶段、任务依赖和当前进度。

07/0107/0307/0507/0707/0907/1107/1307/1507/17需求整理视觉设计功能实现内容迁移构建检查正式上线准备开发发布博客版本发布计划

思维导图示例#

思维导图适合梳理主题层级和知识结构。

Firefly

内容

技术文章

生活记录

体验

搜索

深色模式

图表

工程

Astro

Svelte

Merman

Firefly

内容

技术文章

生活记录

体验

搜索

深色模式

图表

工程

Astro

Svelte

Merman

时间线示例#

时间线用于按年份或阶段呈现项目的重要事件。

2024建立博客完成基础主题2025加入搜索与图库完善内容系统2026升级 Astro 7使用 Merman 渲染图表Firefly 演进时间线

用户旅程图示例#

用户旅程图能够描述用户在不同阶段的行为和体验评分。

读者

发现内容

发现内容读者

打开首页

打开首页读者

搜索主题

阅读文章

阅读文章读者

浏览正文

浏览正文读者

查看图表

继续探索

继续探索读者

查看相关文章

查看相关文章读者

分享文章

分享文章读者浏览文章的旅程

读者

发现内容

发现内容读者

打开首页

打开首页读者

搜索主题

阅读文章

阅读文章读者

浏览正文

浏览正文读者

查看图表

继续探索

继续探索读者

查看相关文章

查看相关文章读者

分享文章

分享文章读者浏览文章的旅程

Git 图示例#

Git 图可以清晰展示分支、提交和合并历史。

mainfeatureinitadd-diagramspolish-themesmerge-featurerelease

看板示例#

看板适合展示任务在不同工作阶段之间的分布。

待办

进行中

已完成

整理需求

准备示例

接入 Merman

服务端渲染

亮暗主题

待办

进行中

已完成

整理需求

准备示例

接入 Merman

服务端渲染

亮暗主题

Sankey 图示例#

Sankey 图通过连线宽度展示流量在不同节点之间的流向。

Home 1650Post list 1200Search 450Post detail 1220Related posts 260External shares 180

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了流程图、时序图、ER 图、类图、状态图、XY 图、饼图、甘特图、思维导图、时间线、用户旅程图、Git 图、看板和 Sankey 图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。图表会在构建时自动渲染为 SVG，无需客户端 JavaScript 加载。

可以前往 Merman Playground 尝试更多语法，再将图表代码粘贴到文章中。

Markdown PlantUML 图表

Thu, 01 Jan 1970 00:00:00 GMT

Markdown 中 PlantUML 图表指南#

PlantUML 是一种使用纯文本描述图表的工具。你只需要写一段结构化语法，就可以生成时序图、类图、用例图、活动图等常见工程图。

它特别适合写在技术博客和项目文档里：

图表和正文一起版本管理，便于协作与审阅
修改图只需要改文本，适合频繁迭代
能和 Markdown 无缝结合，保持文档统一

在 Firefly 中，plantuml 代码块会在构建阶段编码并生成服务器 SVG 地址，页面端再根据亮暗主题自动切换图源，并支持缩放、拖拽和全屏交互。

如果你想快速上手，可以记住这个最小模板：

活动图示例#

状态图示例#

用例图示例#

组件图示例#

部署图示例#

ER 图示例#

时序图示例（登录与刷新令牌）#

C4 风格容器图示例#

Markdown 教程

Thu, 01 Jan 1970 00:00:00 GMT

这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。

块级元素
- 段落与换行
- 标题
- 引用
- 列表
- 代码块
- 分割线
- 表格
内联元素
- 链接
- 强调
- 行内代码
- 图片
- 删除线
杂项
- 自动链接
- 反斜杠转义
内联 HTML

块级元素#

段落与换行#

段落#

HTML 标签：<p>

使用一个或多个空行分隔段落。（仅包含空格或制表符的行也视为空行。）

代码：

1
This will be
2
inline.
3

4
This is second paragraph.

预览：

This will be inline.

This is second paragraph.

换行#

HTML 标签：<br />

在行末添加两个或更多空格来产生换行。

代码：

1
This will be not
2
inline.

预览：

This will be not
inline.

标题#

Markdown 支持两种标题样式：Setext 与 atx。

Setext#

HTML 标签：<h1>，<h2>

使用等号 (=) 表示 <h1>、使用短横线 (-) 表示 <h2>，数量不限，作为“下划线”。

代码：

1
This is an H1
2
=============
3
This is an H2
4
-------------

预览：

This is an H1#

This is an H2#

atx#

HTML 标签：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>

在行首使用 1-6 个井号 (#)，对应 <h1> 至 <h6>。

代码：

1
# This is an H1
2
## This is an H2
3
###### This is an H6

预览：

This is an H1#

This is an H2#

This is an H6#

可选：你可以在行尾“闭合” atx 标题。末尾的井号数量不必与开头一致。

代码：

1
# This is an H1 #
2
## This is an H2 ##
3
### This is an H3 ######

预览：

This is an H1#

This is an H2#

This is an H3#

引用#

HTML 标签：<blockquote>

Markdown 使用邮件风格的 > 作为引用符号。若手动换行并在每行前加 >，显示效果最佳。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown 允许“偷懒”：在一个硬换行段落中，只在第一行前加 > 即可。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

引用可以嵌套（引用中的引用），通过增加 > 层级实现。

代码：

1
> This is the first level of quoting.
2
>
3
> > This is nested blockquote.
4
>
5
> Back to the first level.

预览：

This is the first level of quoting.
This is nested blockquote.
Back to the first level.

引用内可包含其他 Markdown 元素，包括标题、列表与代码块。

代码：

1
> ## This is a header.
2
>
3
> 1.   This is the first list item.
4
> 2.   This is the second list item.
5
>
6
> Here's some example code:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

预览：

This is a header.#

This is the first list item.

This is the second list item.

Here’s some example code:
1
return shell_exec("echo $input | $markdown_script");

列表#

Markdown 支持有序（数字）与无序（圆点）列表。

无序列表#

HTML 标签：<ul>

无序列表可使用 星号 (*)、加号 (+) 或 短横线 (-)。

代码：

1
*   Red
2
*   Green
3
*   Blue

预览：

Red
Green
Blue

等价于：

代码：

1
+   Red
2
+   Green
3
+   Blue

或者：

代码：

1
-   Red
2
-   Green
3
-   Blue

有序列表#

HTML 标签：<ol>

有序列表使用数字加英文句点：

代码：

1
1.  Bird
2
2.  McHale
3
3.  Parish

预览：

Bird
McHale
Parish

注意：像下面这样可能会“意外触发”有序列表：

代码：

1
1986. What a great season.

预览：

What a great season.

你可以用反斜杠转义 (\) 句点：

代码：

1
1986\. What a great season.

预览：

1986. What a great season.

列表中的缩进内容#

列表项里的引用#

在列表项内放置引用，需要将 > 符号整体缩进：

代码：

1
*   A list item with a blockquote:
2

3
    > This is a blockquote
4
    > inside a list item.

预览：

A list item with a blockquote:

This is a blockquote inside a list item.

列表项里的代码块#

在列表项内放置代码块，需要缩进两层——8 个空格或两个 Tab：

代码：

1
*   A list item with a code block:
2

3
        <code goes here>

预览：

A list item with a code block:
```
1
<code goes here>
```

嵌套列表#

代码：

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

预览：

A
- A1
- A2
B
C

代码块#

HTML 标签：<pre>

将代码块中的每行缩进至少4 个空格或1 个制表符。

代码：

1
This is a normal paragraph:
2

3
    This is a code block.

预览：

This is a normal paragraph:

1
This is a code block.

代码块会一直持续，直到遇到未缩进的行（或文末）。

在代码块内，与号 (&) 和尖括号 (< >) 会自动转为 HTML 实体。

代码：

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

预览：

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。

围栏代码块#

使用成对的反引号围起来（如下所示），就不需要四空格缩进了。

代码：

1
Here's an example:
2

3
```
4
function test() {
5
  console.log("notice the blank line before this function?");
6
}
7
```

预览：

Here’s an example:

1
function test() {
2
  console.log("notice the blank line before this function?");
3
}

语法高亮#

在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。

代码：

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

预览：

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

分割线（水平线）#

HTML 标签：<hr /> 一行中放置三个或以上的短横线 (-)、星号 (*) 或下划线 (_)。符号之间允许有空格。

代码：

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

预览：

表格#

HTML 标签：<table>

这是扩展语法。

用竖线 (|) 分隔列，用短横线 (-) 分隔表头，使用冒号 (:) 指定对齐方式。

两侧的竖线 (|) 与对齐可选。用于表头分隔时，每列至少需要 3 个短横线。

代码：

1
| Left | Center | Right |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

预览：

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

内联元素#

链接#

HTML 标签：<a>

Markdown 支持两种链接样式：行内链接与引用式链接。

行内链接#

行内链接格式：[文本](URL "标题")

标题可选。

代码：

1
This is [an example](http://example.com/ "Title") inline link.
2

3
[This link](http://example.net/) has no title attribute.

预览：

This is an example inline link.

This link has no title attribute.

如果引用同一站点的本地资源，可以使用相对路径：

代码：

1
See my [About](/about/) page for details.

预览：

See my About page for details.

引用式链接#

可以预定义链接引用。定义格式：[id]: URL "标题"

标题同样可选。引用时使用：[文本][id]

代码：

1
[id]: http://example.com/  "Optional Title Here"
2
This is [an example][id] reference-style link.

预览：

This is an example reference-style link.

说明：

方括号中包含链接标识（不区分大小写，可在左侧缩进最多三格空格）；
随后是冒号；
再跟一个或多个空格（或 tab）；
然后是链接 URL；
URL 可选地用尖括号包裹；
可选地跟随标题属性，用引号或圆括号包裹。

以下三种定义等价：

代码：

1
[foo]: http://example.com/  "Optional Title Here"
2
[foo]: http://example.com/  'Optional Title Here'
3
[foo]: http://example.com/  (Optional Title Here)
4
[foo]: <http://example.com/>  "Optional Title Here"

如果使用空的方括号，则链接文本本身会作为名称。

代码：

1
[Google]: http://google.com/
2
[Google][]

预览：

Google

强调#

HTML 标签：<em>，<strong>

Markdown 使用 星号 (*) 或 下划线 (_) 表示强调。一个分隔符对应 <em>；两个分隔符对应 <strong>。

代码：

1
*single asterisks*
2

3
_single underscores_
4

5
**double asterisks**
6

7
__double underscores__

预览：

single asterisks

single underscores

double asterisks

double underscores

但如果两侧有空格，则会被视作普通字符而非强调语法。

你可以使用反斜杠进行转义：

代码：

1
\*this text is surrounded by literal asterisks\*

预览：

*this text is surrounded by literal asterisks*

行内代码#

HTML 标签：<code>

用反引号 (`) 包裹。

代码：

1
Use the `printf()` function.

预览：

Use the printf() function.

若行内代码中需要包含反引号字符，可使用多重反引号作为定界符：

代码：

1
``There is a literal backtick (`) here.``

预览：

There is a literal backtick (`) here.

行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：

代码：

1
A single backtick in a code span: `` ` ``
2

3
A backtick-delimited string in a code span: `` `foo` ``

预览：

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

图片#

HTML 标签：<img />

Markdown 的图片语法与链接类似，支持行内与引用两种方式。

行内图片#

行内图片语法：![替代文本](URL "标题")

标题可选。

代码：

1
![Alt text](/path/to/img.jpg)
2

3
![Alt text](/path/to/img.jpg "Optional title")

预览：

Alt text

说明：

一个感叹号 !；
后接方括号，放置图片的替代文本；
再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。

引用式图片#

引用式图片语法：![替代文本][id]

代码：

1
[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
2
![Alt text][img id]

预览：

Alt text

删除线#

HTML 标签：<del>

这是扩展语法。

GFM 增加了删除线语法。

代码：

1
~~Mistaken text.~~

预览：

Mistaken text.

杂项#

自动链接#

Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。

代码：

1
<http://example.com/>
2

3
<address@example.com>

预览：

http://example.com/

address@example.com

GFM 会自动识别标准 URL 并转换为链接。

代码：

1
https://github.com/emn178/markdown

预览：

https://github.com/emn178/markdown

反斜杠转义#

Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。

代码：

1
\*literal asterisks\*

预览：

*literal asterisks*

以下字符可通过反斜杠转义以按字面量输出：

Code:

1
\   backslash
2
`   backtick
3
*   asterisk
4
_   underscore
5
{}  curly braces
6
[]  square brackets
7
()  parentheses
8
#   hash mark
9
+   plus sign
10
-   minus sign (hyphen)
11
.   dot
12
!   exclamation mark

内联 HTML#

对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。

代码：

1
This is a regular paragraph.
2

3
<table>
4
    <tr>
5
        <td>Foo</td>
6
    </tr>
7
</table>
8

9
This is another regular paragraph.

预览：

This is a regular paragraph.

Foo

This is another regular paragraph.

请注意：在块级 HTML 标签内不会处理 Markdown 语法。

与块级标签不同，在行内级标签内会处理 Markdown 语法。

代码：

1
<span>**Work**</span>
2

3
<div>
4
    **No Work**
5
</div>

预览：

Work

**No Work**

***

在文章中嵌入视频

Thu, 01 Jan 1970 00:00:00 GMT

只需从 YouTube 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。

1
---
2
title: 在文章中嵌入视频
3
published: 2023-10-19
4
// ...
5
---
6

7
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

Blyの小破站~

我的Bly多账号管理~

Cloudflare VS Vercel？！

我的API中转站：blyciallololiyyds.xzy

想开放软件自动化等的可以找我~

怎么用Netlify反代

关键词监听机器人~

Linux（Debian 系）上搭建 C++ 开发环境

Linux 上安装和使用 AstrBot

测试

Firefly Wiki Link 内部链接示例

文章链接卡片#

行内链接#

自定义显示标题#

链接目标的三种写法#

第一种：slug#

第二种：文件路径（推荐）#

第三种：裸文件名#

链接到其他文章的标题#

链接到本页标题#

本页目标#

不支持附件嵌入#

Firefly 文章加密

KaTeX 数学公式示例

行内公式 (Inline)#

块级公式 (Block)#

复杂示例#

矩阵 (Matrices)#

极限与求和 (Limits and Sums)#

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

化学方程式 (Chemical Equations)#

更多符号#

MDX 格式文章示例

Markdown 和 MDX 的区别#

使用组件#

使用 JSX#

简单的变量导出#

Markdown 扩展功能

GitHub 仓库卡片#

提醒框(Admonitions)配置#

1. GitHub 主题风格#

2. Obsidian 主题风格#

3. VitePress 主题风格#

4. Docusaurus 主题风格#

剧透#

图片画廊网格 (Image Grid)#

Markdown Mermaid 图表

Markdown 中 Mermaid 图表完整指南#

流程图示例#

时序图示例#

ER 图示例#

类图示例#

状态图示例#

XY 图示例#

饼图示例#

甘特图示例#

思维导图示例#

时间线示例#

用户旅程图示例#

Git 图示例#

看板示例#

Sankey 图示例#

总结#

Markdown PlantUML 图表

Markdown 中 PlantUML 图表指南#

活动图示例#

状态图示例#

用例图示例#

组件图示例#

部署图示例#

ER 图示例#

时序图示例（登录与刷新令牌）#

C4 风格容器图示例#

Markdown 教程

块级元素#

段落与换行#

段落#

换行#

标题#

Setext#