Fuwari 简易指南

封面图片来源: Source

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

文章的 Front-matter#

1
---
2
title: My First Blog Post
3
published: 2023-09-09
4
description: This is the first post of my new Astro blog.
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

Attribute	Description
`title`	文章标题。
`published`	文章发布日期。
`description`	文章的简短描述，会显示在首页。
`image`	文章封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：使用 `public` 目录中的图片 3. 若无前缀：相对于当前 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`draft`	若标记为草稿，则不会显示该文章。

文章文件应放置的位置#

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

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

GitHub Repository Cards#

你可以添加动态卡片来链接 GitHub 仓库，在页面加载时，仓库信息会从 GitHub API 拉取。

Fabrizz

MMM-OnSpotify

Waiting for api.github.com...

00K

Waiting...

使用代码 ::github{repo="<owner>/<repo>"} 来创建一个 GitHub 仓库卡片。

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

Admonitions#

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

Basic Syntax#

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

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

Custom Titles#

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

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

GitHub Syntax#

[!TIP] > GitHub 风格语法同样被支持。

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

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

Spoiler#

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

The content is hidden ayyy!

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

Expressive Code#

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

Syntax Highlighting#

Syntax Highlighting

Regular syntax highlighting#

1
console.log("这段代码具有语法高亮效果！");

Rendering ANSI escape sequences#

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
文本格式: 加粗 暗淡 斜体 下划线

Editor & Terminal Frames#

Editor & Terminal Frames

Code editor frames#

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

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

Terminal frames#

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

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

Overriding frame types#

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

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

Text & Line Markers#

Text & Line Markers

Marking full lines & line ranges#

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

Selecting line marker types (mark, ins, del)#

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

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

Adding labels to line markers#

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>

Adding long labels on their own lines#

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>

Using diff-like syntax#

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

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

Combining syntax highlighting with diff-like syntax#

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

Marking individual text inside lines#

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

Regular expressions#

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

Escaping forward slashes#

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

Selecting inline marker types (mark, ins, del)#

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

Word Wrap#

Word Wrap

Configuring word wrap per block#

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

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

Configuring indentation of wrapped lines#

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

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

Collapsible Sections#

Collapsible Sections


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: "样板代码示例结束" });

Line Numbers#

Line Numbers

Displaying line numbers per block#

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

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

Changing the starting line number#

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

Lovely firefly!

In Finalized Morrow, I Full Bloom