ZipperBlog

你好，ZipperBlog

Mon, 07 Sep 2026 00:00:00 GMT

这个博客是干什么的#

记录三件事：编程学习、项目开发、生活随想。算是把很多年前养成的习惯捡回来——初中的时候在博客园用「技术宅一枚」的 ID 写过两篇给新人的小教程，教人用 C 语言读写文件、怎么缩进代码。那时候写得很糙，但”把东西讲给别人听”的习惯，一直留到了现在。

为什么现在开博客#

整理自己：学过的、踩过的坑、做过的项目，写下来才算真正过了一遍；
留下痕迹：从初中那些控制台小游戏到现在，代码写了有上万行，值得有个地方好好安放；
保持输出：备考、实习、毕设排得很满，但输出这件事不该停。

技术栈#

本站基于 Astro + Firefly 主题构建，纯静态站点：

无后台、无数据库，写作就是 Markdown + Git；
本地构建、产物直接部署，维护成本约等于零；
自带全文搜索、代码高亮、明暗模式。

详细的搭建过程与规范会另写文章，这里不展开。

更新节奏#

实习与备考期间精力有限，佛系更新。不承诺频率，只保证写出来的每篇都是认真写的。

那么，出发吧。

代码需要如何缩进（萌新向）

Sat, 07 Aug 2021 00:00:00 GMT

本文原载博客园（2021-08-07，SZ54「技术宅一枚」），2026-09 搬运至 ZipperBlog。原文链接

虽说目前市面上比较常见的几款IDE，如：VS、VSC、IDEA等，都用代码自动缩进的功能，但我们仍然需要养成一个良好的代码缩进习惯，特别是对于初学者来说。很多初学者可能不以为意，但一段高效且简洁的代码的可读性肯定是非常高的，而其中有一半的因素就是代码缩进。所以我将对一些常见的缩进错误做一些讲解，以及代码应当如何缩进。

　　因为我常用的C语言，同时也是我觉得萌新在代码编写中缩进最差的语言，所以本博文将会以它为例。

　　先来看一张图

　　这张图中画圈的地方是有问题的，这连个地方的缩进我们完全可以把括号与前面的if语句对齐（这张图来自我的编程交流群，如有冒犯或侵权，请联系我）。当然，这种错误的缩进对可读性产生的影响并不是很大，但接下来这张图就不一样了。

　　这张图对于一些萌新来说可能会有一点既视感，因为我常在交流群中遇到这种代码，将代码全部与前面的某个地方对齐。这种缩进方式让代码的可读性很低，但有些萌新可能觉得很正常，能看清楚，那么我们将它与下图作对比。

　　很明显，scanf和printf函数究竟是处于哪个块（打括号）中变得一目了然，即使是视觉上也舒适了很多。但可能还有些萌新觉得这样做没必要，很麻烦。让你们这么想地其中一个原因，是你们使用的IDE的问题，比如VC++6.0，这个IDE甚至连代码不全都非常不完善（我也不推荐使用这个IDE，我更推荐初学者使用dev，而且不推荐直接就用VS），当然这只是次要的，更加重要的，是当你们写上了几百行甚至更多代码时

　　以这样图中的代码为例，这样的缩进让代码变得层次分明，可读性很高，也更能方便我们后续对代码的修改。

　　最后来讲讲该怎么缩进。一般的缩进，都以一个Tap键（4个空格）为基本单位，我也为它的常用方法总结了以下几点：

　　　　1、凡是在块（打括号）中的代码都要进行一次缩进,且块（打括号）应当与上一条语句对齐

　　　　2、goto语句的标签同意向前做进一个单位

　　　　3、case标签下的语句统一向后缩进一个单位

　　　　4、如果某条语句因为参数太多而太长，可以将参数换行带入，但后续的参数应当至少与函数向后缩进一个单位

　　目前市面上大部分的IDE都有自动缩进的功能，比如VS在一条语句输入结束后能自动缩进，但对于dev等一些IDE却就只能自己一个Tap一个Tap的按了。其实大可不必，dev是有自己的自动缩进方法的，快捷键：Ctrl+Shift+A，也能设置缩进选项，其他的大部分IDE也都有，大家可以自行百度。

如何用C语言进行文件读写

Sun, 19 Apr 2020 00:00:00 GMT

本文原载博客园（2020-04-19，SZ54「技术宅一枚」），2026-09 搬运至 ZipperBlog。原文链接

如何用C语言进行文件读写#

一：打开文件、关闭文件#

函数：fopen();

包含头文件：stdio.h

声明：FILE * fopen(const char *filename,const char *mode);

参数一：文件流

参数二：文件打开模式

1
          文件打开模式参考如下：

模式	操作	区别	要求
r	读	从文件头开始	文件须存在。
r+	读写	从文件头开始	文件须存在。
w	写	从文件头开始	若文件存在，则减其长度截为零；若不存在，则创建文件。
w+	读写	从文件头开始	若文件存在，则将其长度截为零；如不存在，则创建文件。
a	写	从文件末尾开始	若文件存在，则从文件末尾开始添加；若不存在，则创建文件。
a+	读写	从文件末尾开始	若文件存在，则可以读取整个文件，但只能在文件末尾添加；若不存在，则创建文件。

函数：fclose();

包含文件头：stdio.h

声明：int fclose(FILE *file);

参数一：文件流

代码示例：

1
#include<stdio.h>
2
int main(void)
3
{
4
　　FILE *fp;
5
　　fp = fopen("a.txt","r");
6
　　if(fp == NULL)
7
　　{
8
　　　　printf("error!");
9
　　　　return 0;
10
　　}
11
　　fclose(fp)
12
　　return 0;
13
}

二：文件写入#

1、字符写入#

函数：fputc();

包含文件头：stdio.h

声明：int fputc(char c,FILE *file)

参数一：写入字符

参数二：文件流

代码示例:

1
#include<stdio.h>
2
int main(void)
3
{
4
　　 FILE *fp = fopen("a.txt", "w");
5
　　 if(fp == NULL)
6
　　{
7
　　　　 printf("error!\n");
8
　　　　 return 0;
9
　　 }
10
　　 char name[] = "Hello World!";
11
　　 int i;
12
　　 for(i = 0; i < strlen(name); i++)
13
　　 {
14
　　　　 fputc(name[i], fp);
15
　　 }
16
　　 fputc('\n', fp);
17
　　 fclose(fp);
18
　　 return 0;
19
}

展开收起

2、字符串写入#

函数：fputs();

包含头文件：stdio.h

声明：int fputs(char *s,FILE *file);

参数一：写入字符串

参数二：文件流

代码示例：

1
#include<stdio.h>
2
int main(void)
3
{
4
　　 FILE *fp = fopen("a.txt", "w");
5
　　 if(fp == NULL)
6
　　 {
7
　　　　printf("error!\n");
8
　　　　 return 0;
9
　　 }
10
　　 char name[] = "Hello Word!\n";
11
　　 fputs(name, fp);
12
　　 fclose(fp);
13
　　 return 0;
14
}

3、数据块写入#

函数：fwrite();

包含头文件：stdio.h

声明：size_t fwrite(count void *ptr,size_t size,size_t nmemb,FILE *file);

参数一：写入数据地址

参数二：写入数据单字节数

参数三：写入项目个数

参数四：文件流

1
#include<stdio.h>
2
int main(void)
3
{
4
　　 FILE *fp = fopen("a.txt", "wb+");
5
　　 if(fp == NULL)
6
　　 {
7
　　　　 printf("error!\n");
8
　　　　 return 0;
9
　　 }
10
　　 char name[] = "Hello World!\n";
11
　　 fwrite(name, strlen(name), 1, fp);
12
　　 fclose(fp);
13
　　 return 0;
14
}

4、格式化写入#

函数：fprintf();

包含头文件：stdio.h

声明：int fprintf(FILE *file,count char *format,…);

参数一：文件流

参数二：指定格式控制字符串

参数三：输出项

注：用法与printf();函数类似

代码示例：

1
#include<stdio.h>
2
int main(void)
3
{
4
　　 FILE *fp = fopen("a.txt", "wb+");
5
　　 if(fp == NULL)
6
　　 {
7
　　 　　printf("error!\n");
8
　　　　 return 0;
9
　　 }
10
　　 char name[] = "Hello World!\n";
11
　　 fprintf(fp, "this is %s\n", name);
12
　　 fclose(fp);
13
　　 return 0;
14
}

三：文件读取#

1、字符读取#

函数：fgetc();

包含头文件：stdio.h

声明：int fgetc(FILE *file);

参数一：文件流

代码示例：

1
#include<stdio.h>
2
int main(void)
3
{
4
　　 FILE *fp = fopen("a.txt", "r");
5
　　 if(fp == NULL)
6
　　 {
7
　　　　 printf("error!\n");
8
　　　　 return 0;
9
　　 }
10
　　 char c;
11
　　 while((c = fgetc(fp)) != EOF)
12
　　 {
13
　　　　 printf("%c", c);
14
　　 }
15
　　 fclose(fp);
16
　　 return 0;
17
}

展开收起

2、字符串读取#

函数：fgets();

包含头文件：stdio.h

声明：char *fgets(char *buf,int bufsize,FILE *file);

参数一：储存读取数据

参数二：储存数据大小

参数三：文件流

代码示例：

1
#include <stdio.h>
2
int main()
3
{
4
    FILE *fp = fopen("a.txt", "r");
5
    if(fp == NULL)
6
    {
7
        printf("error!\n");
8
        return 0;
9
    }
10
    char buf[1024] = {0};
11
    while(fgets(buf, 1024, fp) != NULL)
12
    {
13
        printf("%s", buf);
14
    }
15
    fclose(fp);
16
    return 0;
17
}

展开收起

3、数据块读取#

函数：fread();

包含头文件：stdio.h

声明：size_t fread(count void *str,size_t size,size_t count,FILE *file);

参数一：储存读取数据

参数二：要读取数据的字节数

参数三：要读取数据项

参数四：文件流

代码示例：

1
#include <stdio.h>
2
int main()
3
{
4
    FILE *fp = fopen("a.txt", "r");
5
    if(fp == NULL)
6
    {
7
        printf("error!\n");
8
        return 0;
9
    }
10
    char buf[102400] = {0};
11
    fread(buf, 1024, 100, fp);
12
    printf("%s", buf);
13
    fclose(fp);
14
    return 0;
15
}

展开收起

4、格式化读取#

函数：fscanf();

包含头文件：sdtio.h

声明：int fscanf(FILE *file,count char *format,…);

参数一：文件流

参数二：读取格式

参数三：读取输入项

代码示例：

1
#include <stdio.h>
2
int main()
3
{
4
    FILE *fp = fopen("a.txt", "r");
5
    if(fp == NULL)
6
    {
7
        printf("error!\n");
8
        return 0;
9
    }
10
    char buf[1024] = {0};
11
    fscanf(fp, "%s", buf);
12
    printf("%s\n", buf);
13
    fclose(fp);
14
    return 0;
15
}

展开收起

Firefly 代码块示例

Sat, 03 Jan 1970 00:00:00 GMT

在这里，我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。

表达性代码#

语法高亮#

语法高亮

常规语法高亮#

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

渲染 ANSI 转义序列#

Terminal window展开收起

1
Standard ANSI colors:
2
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
3
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
4
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
5
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
6

7
8-bit colors (showing colors 160-171 as an example):
8
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12

13
24-bit colors (full RGB):
14
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18

19
Font styles:
20
- Default
21
- Bold
22
- Dimmed
23
- Italic
24
- Underline
25
- Reversed
26
- Strikethrough

展开收起

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

my-test-file.js

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

src/content/index.html

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

终端框架#

Terminal window

1
echo "此终端框架没有标题"

PowerShell 终端示例

1
Write-Output "这个有标题!"

覆盖框架类型#

1
echo "看，没有框架!"

PowerShell Profile.ps1

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)#

line-markers.js

1
function demo() {
2
  console.log('此行标记为已删除')
3
  // 此行和下一行标记为已插入
4
  console.log('这是第二个插入行')
5

6
  return '此行使用中性默认标记类型'
7
}

为行标记添加标签#

labeled-line-markers.jsx

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>

在单独行上添加长标签#

labeled-line-markers.jsx展开收起

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

展开收起

使用类似 diff 的语法#

1
此行将标记为已插入
2
此行将标记为已删除
3
这是常规行

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

结合语法高亮和类似 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 将被标记。')

转义正斜杠#

Terminal window

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

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

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

自动换行#

自动换行

为每个块配置自动换行#

1
// 启用换行的示例
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行')

Tab 代码块#

由 rehype-code-group 提供，语法与 VitePress 代码组一致：用 ::: code-group labels=[...] 包裹多个代码块，即可合并成一组标签页。

Note

labels=[...] 中的标签按顺序对应组内的代码块，用英文逗号分隔；::: 与 code-group 之间的空格不能省略。

基本用法#

1
::: code-group labels=[code.js, code.py, code.html]
2

3
```js
4
export function greet(name) {
5
  return `Hello, ${name}!`;
6
}
7
```
8

9
```py
10
def greet(name):
11
    return f"Hello, {name}!"
12
```
13

14
```html
15
<p>Hello, world!</p>
16
```
17

18
:::

展开收起

渲染效果：

code.jscode.pycode.html

1
export function greet(name) {
2
  return `Hello, ${name}!`;
3
}

1
def greet(name):
2
    return f"Hello, {name}!"

1
<p>Hello, world!</p>

标签中使用 Emoji#

标签支持 emoji 短代码，构建时会自动转换成 emoji：

1
::: code-group labels=[:package: npm, :package: pnpm, :yarn: yarn]

📦 npm📦 pnpm🧶 yarn

Terminal window

1
npm create astro@latest

Terminal window

1
pnpm create astro@latest

Terminal window

1
yarn create astro

与其他代码块特性组合#

组内仍是普通的 Expressive Code 代码块，标题、行号、行标记、折叠、终端框架等特性都可以照常使用。

配置文件终端折叠

astro.config.mjs

1
export default {
2
  theme: "firefly",
3
  codeGroup: true,
4
};

部署

1
pnpm build && pnpm preview


3 collapsed lines
1
// 这三行默认折叠
2
import { a } from "a";
3
import { b } from "b";
4

5
console.log(a, b);

不止是代码块#

标签页内可以放任意内容，例如文字、列表或图片：

说明列表

这是一段普通的段落内容。

列表项一
列表项二

Tip

标签栏在构建期生成，默认展开第一项；支持鼠标点击与键盘 ← / → / Home / End 切换。

在提醒框内使用（MDX 组件）#

::: code-group 和 ::: tip 等 Docusaurus 风格提醒框都使用 ::: 容器语法，而 micromark-directive 规定父子容器的冒号数必须不同，因此 ::: code-group 无法嵌套在 ::: tip 等提醒框内（整块会失效）。

这种情况改用 MDX 组件 TabGroup：MDX 组件不经过 ::: 指令解析，在提醒框内外都能正常使用，也方便日后扩展更多 UI 组件。把文章后缀改为 .mdx，从统一入口 @/components/firefly-mdx 引入（可一次引入多个组件）：

1
import { TabGroup } from "@/components/firefly-mdx";
2

3
:::tip
4

5
<TabGroup labels={["test.js", "test.py"]} client:load>
6
  ```js
7
  console.log(1)
8
  ```
9

10
  ```py
11
  print("hello world")
12
  ```
13
</TabGroup>
14

15
:::

展开收起

Tip

labels 数组给每个代码块声明标签，顺序一一对应
组件用 client:load 激活标签切换

Markdown 扩展功能

Thu, 01 Jan 1970 00:00:00 GMT

GitHub 仓库卡片#

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

CuteLeaf

Firefly

🍀Firefly, fresh and aesthetic Astro blog theme template.

—

MIT

Astro

使用代码 ::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]