使用规范 - Zhouyeshan Blog

基础语法与markdown一样

文章前言#

1
---
2
title: 第一篇博客
3
published: 2025-09-09
4
description: 这是我发布的第一篇博客
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

属性	描述
`title`	文章标题
`published`	文章发布的具体时间
`description`	文章的简要介绍，会显示在首页上
`image`	文章的封面地址 1. 使用 `http://` 或 `https://` 开头的网络图片 2. 以 `/`在项目中的图片 3. 没有任何前缀的markdown文件
`tags`	文章标签
`category`	文章类别
`draft`	是否为草稿，草稿不会再主页显示 true是 false否

文章文件保存规范#

文章文件应放置在 src/content/posts/ 目录中。可以创建子目录来更好地组织文章和资源。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

在文章中添加视频#

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

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

Bilibili

语法高亮#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 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
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

文本与线条标记器#

标记完整行及行区间#

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

选择行标记类型（标记、插入、删除）#

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
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

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
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

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

将语法高亮显示与类似差异显示的语法相结合#

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

在线条内部标注单独的文字内容#

1
function demo() {
2
  // Mark any given text inside lines
3
  return 'Multiple matches of the given text are supported';
4
}

正则表达式#

1
console.log('The words yes and yep will be marked.')

避开前引号符号#

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

选择内联标记类型（标记、插入、删除）#

1
function demo() {
2
  console.log('These are inserted and deleted marker types');
3
  // The return statement uses the default marker type
4
  return true;
5
}

自动换行#

按块设置换行功能#

1
// Example with wrap
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with wrap=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

设置换行后的行的缩进情况#

1
// Example with preserveIndent (enabled by default)
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with preserveIndent=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

折叠部分#


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

显示每个块的行号#

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

更改起始行号#

5
console.log('Greetings from line 5!')
6
console.log('I am on line 6')

拓展#

GitHub 仓库卡片#

可以添加可动态显示的卡片，这些卡片可链接至 GitHub 仓库。在页面加载时，会从 GitHub API 中获取仓库的相关信息。

Fabrizz

MMM-OnSpotify

Waiting for api.github.com...

00K

Waiting...

创建一个包含代码的 GitHub 仓库卡片 ::github{repo="<owner>/<repo>"}.

1
::github{repo="saicaca/fuwari"}

警告标识#

note tip important warning caution

NOTE
突出用户在浏览时也应留意的重要信息。

TIP
可选信息

IMPORTANT
对于用户而言至关重要的成功所需的信息。

WARNING
具有关键性且需要用户立即关注的内容，因为其可能存在风险。

CAUTION
该行为可能带来的负面后果。

基本语法#

1
:::note
2
突出用户在浏览时也应留意的重要信息。
3
:::
4

5
:::tip
6
可选信息，旨在帮助用户取得更大的成功。
7
:::

自定义标题#

该告诫的标题是可以自定义设置的。

MY CUSTOM TITLE
这是一张带有个性化标题的便条。

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

GitHub 语法#

TIP
The GitHub syntax is also supported.

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.