2747 字
14 分钟
Fuwari 博客完整使用指南

Fuwari 博客完整使用指南#

本博客模板使用 Astro 构建。对于本指南中未提及的内容,您可以在 Astro 文档 中找到答案。

1. 文章前置信息 (Front-matter)#

在创建新文章时,需要在文件开头添加前置信息,格式如下:

---
title: 我的第一篇博客文章
published: 2023-09-09
description: 这是我的新Astro博客的第一篇文章。
image: ./cover.jpg
tags: [Foo, Bar]
category: 前端
draft: false
---
属性描述
title文章标题
published文章发布日期
description文章简短描述,将在首页显示
image文章封面图片路径
1. 以 http://https:// 开头:使用网络图片
2. 以 / 开头:使用 public 目录中的图片
3. 无前缀:相对于Markdown文件的路径
tags文章标签
category文章分类
draft文章是否为草稿状态,草稿不会被显示

2. 文章文件存放位置#

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

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

3. 草稿文章#

如果您的文章仍在撰写中,可以将 draft 字段设置为 true,这样文章就不会对公众可见。

---
title: 草稿示例
published: 2022-07-01
tags: [Markdown, 博客, 演示]
category: 示例
draft: true
---

这篇文章目前处于草稿状态,尚未发布。因此,它不会对公众可见。内容仍在撰写中,可能需要进一步编辑和审核。

当文章准备好发布时,您可以将 Frontmatter 中的 “draft” 字段更新为 “false”:

---
title: 草稿示例
published: 2024-01-11T04:40:26.381Z
tags: [Markdown, 博客, 演示]
category: 示例
draft: false
---

4. Markdown 基本语法#

标题#

# 一级标题
## 二级标题
### 三级标题

一级标题#

二级标题#

三级标题#

段落和格式#

段落之间用空行分隔。

第二段。斜体粗体等宽字体

列表#

无序列表#

- 这个
- 那个
- 另一个
  • 这个
  • 那个
  • 另一个

注意 —— 不考虑星号 —— 实际文本内容从第 4 列开始。

有序列表#

1. 第一项
2. 第二项
3. 第三项
  1. 第一项
  2. 第二项
  3. 第三项

引用#

> 引用内容
> 是这样写的。
>
> 它们可以跨越多行,
> 如果你愿意的话。

引用内容 是这样写的。

它们可以跨越多行, 如果你愿意的话。

使用 3 个破折号表示 em 破折号。使用 2 个破折号表示范围(例如,“第 12—14 章都在”)。三个点 … 会被转换为省略号。支持 Unicode。☺

代码块#

# 让我重申一下 ...
for i in 1 .. 10 { do-something(i) }

如您所料,缩进 4 个空格。顺便说一下,您可以使用分隔块,如果您愿意:

define foobar() {
print "Welcome to flavor country!";
}

(这使得复制和粘贴更容易)。您可以选择标记分隔块,以便 Pandoc 进行语法高亮:

import time
# 快速,数到十!
for i in range(10):
# (但不要太快)
time.sleep(0.5)
print i

嵌套列表#

现在是一个嵌套列表:

  1. 首先,获取这些配料:

    • 胡萝卜
    • 芹菜
    • 小扁豆
  2. 烧一些水。

  3. 把所有东西都倒进锅里,然后按照这个算法操作:

    找到木勺
    揭开锅盖
    搅拌
    盖上锅盖
    将木勺 precariously 地放在锅柄上
    等待 10 分钟
    转到第一步(或者完成时关闭炉子)

    不要撞到木勺,否则它会掉下来。

再次注意文本如何总是对齐在 4 空格缩进(包括上面继续第 3 项的最后一行)。

链接#

这里有一个 网站 链接,一个 本地文档 链接,以及一个 当前文档的章节标题 链接。这里有一个脚注 1

表格#

表格可以像这样:

size material color


9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they’re made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:


keyword text


red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it’s not easy being.


水平线#

接下来是一条水平线。


定义列表#

这里有一个定义列表:

apples : 适合做苹果酱。 oranges : 柑橘类水果! tomatoes : tomatoe 中没有 “e”。

同样,文本缩进 4 个空格。(在每个术语/定义对之间放一个空行可以让内容更加分散)。

行块#

这里有一个”行块”:

| 第一行 | 第二行 | 第三行

图片#

图片可以像这样指定:

![示例图片](./demo-banner.png "示例性图片")

数学公式#

行内数学公式:ω=dϕ/dt\omega = d\phi / dt。显示数学公式应该有自己的一行,并用双美元符号括起来:

I=ρR2dVI = \int \rho R^{2} dV

π=3.1415926535  8979323846  2643383279  5028841971  6939937510  5820974944  5923078164  0628620899  8628034825  3421170679  \begin{equation*} \pi =3.1415926535 \;8979323846\;2643383279\;5028841971\;6939937510\;5820974944 \;5923078164\;0628620899\;8628034825\;3421170679\;\ldots \end{equation*}

另外请注意,您可以反斜杠转义任何您希望字面显示的标点字符,例如:`foo`、*bar* 等。

5. Markdown 扩展功能#

GitHub 仓库卡片#

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

Fabrizz
/
MMM-OnSpotify
Waiting for api.github.com...
00K
0K
0K
Waiting...

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

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

提示框 (Admonitions)#

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

NOTE

强调用户应该注意的信息,即使在浏览时也应该注意。

TIP

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

IMPORTANT

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

WARNING

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

CAUTION

某个操作的负面潜在后果。

基本语法#

:::note
强调用户应该注意的信息,即使在浏览时也应该注意。
:::
:::tip
帮助用户更成功的可选信息。
:::

自定义标题#

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

我的自定义标题

这是一个带有自定义标题的提示。

:::note[我的自定义标题]
这是一个带有自定义标题的提示。
:::

GitHub 语法#

TIP

GitHub 语法 也受支持。

> [!NOTE]
> GitHub 语法也受支持。
> [!TIP]
> GitHub 语法也受支持。

剧透#

您可以在文本中添加剧透内容,文本也支持 Markdown 语法。

内容 被隐藏的内容 !

内容 :spoiler[被隐藏的内容 **哦**]!

6. 嵌入视频#

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

---
title: 在文章中包含视频
published: 2023-10-19
// ...
---
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube#

Bilibili#

7. Expressive Code 使用#

在这里,我们将探讨使用 Expressive Code 的代码块外观。提供的示例基于官方文档,您可以参考这些文档获取更多详细信息。

语法高亮#

语法高亮

常规语法高亮#

console.log('这段代码有语法高亮!')

渲染 ANSI 转义序列#

Terminal window
ANSI 颜色:
- 常规: 红色 绿色 黄色 蓝色 洋红色 青色
- 粗体: 红色 绿色 黄色 蓝色 洋红色 青色
- 暗淡: 红色 绿色 黄色 蓝色 洋红色 青色
256 色(显示颜色 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
全 RGB 颜色:
ForestGreen - RGB(34, 139, 34)
文本格式:粗体 暗淡 斜体 下划线

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

my-test-file.js
console.log('标题属性示例')

src/content/index.html
<div>文件名注释示例</div>

终端框架#

Terminal window
echo "这个终端框架没有标题"

PowerShell 终端示例
Write-Output "这个有标题!"

覆盖框架类型#

echo "看,妈,没有框架!"

PowerShell Profile.ps1
# 如果不覆盖,这将是一个终端框架
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

标记整行和行范围#

// 第 1 行 - 通过行号定位
// 第 2 行
// 第 3 行
// 第 4 行 - 通过行号定位
// 第 5 行
// 第 6 行
// 第 7 行 - 通过范围 "7-8" 定位
// 第 8 行 - 通过范围 "7-8" 定位

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

line-markers.js
function demo() {
console.log('这行被标记为已删除')
// 这行和下一行被标记为已插入
console.log('这是第二行已插入的内容')
return '这行使用中性默认标记类型'
}

为行标记添加标签#

labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>

在单独的行上添加长标签#

labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>

使用类似 diff 的语法#

这行将被标记为已插入
这行将被标记为已删除
这是常规行

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是一个实际的 diff 文件
-所有内容将保持不变
也不会删除任何空白

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

function thisIsJavaScript() {
// 整个块都会高亮显示为 JavaScript,
// 我们仍然可以向其添加 diff 标记!
console.log('要删除的旧代码')
console.log('新的闪亮代码!')
}

标记行内的个别文本#

function demo() {
// 标记行内的任何给定文本
return '支持给定文本的多个匹配';
}

正则表达式#

console.log('会标记单词 yesyep。')

转义正斜杠#

Terminal window
echo "Test" > /home/test.txt

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

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

自动换行#

自动换行

为每个代码块配置自动换行#

// 带 wrap 的示例
function getLongString() {
return '这是一个很长的字符串,除非容器非常宽,否则很可能无法适应可用空间'
}

// wrap=false 的示例
function getLongString() {
return '这是一个很长的字符串,除非容器非常宽,否则很可能无法适应可用空间'
}

配置换行缩进#

// preserveIndent 的示例(默认启用)
function getLongString() {
return '这是一个很长的字符串,除非容器非常宽,否则很可能无法适应可用空间'
}

// preserveIndent=false 的示例
function getLongString() {
return '这是一个很长的字符串,除非容器非常宽,否则很可能无法适应可用空间'
}

可折叠部分#

可折叠部分

5 collapsed lines
// 所有这些样板设置代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// 您可以有多个折叠部分
3 collapsed lines
const a = 1
const b = 2
const c = a + b
// 这将保持可见
console.log(`计算结果:${a} + ${b} = ${c}`)
return c
}
4 collapsed lines
// 所有这些直到代码块末尾的代码将再次折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })

行号#

行号

为每个代码块显示行号#

// 这个代码块将显示行号
console.log('来自第 2 行的问候!')
console.log('我在第 3 行')

// 这个代码块的行号被禁用
console.log('你好?')
console.log('对不起,你知道我在第几行吗?')

更改起始行号#

console.log('来自第 5 行的问候!')
console.log('我在第 6 行')

Footnotes#

  1. 脚注文本在这里。

Fuwari 博客完整使用指南
https://ltreedo.icu/posts/使用指南/
作者
Fakeragments
发布于
2024-03-11
许可协议
CC BY-NC-SA 4.0