Fuwari

Markdown 扩展功能

Wed, 01 May 2024 00:00:00 GMT

GitHub 仓库卡片

可以在页面加载后展示 GitHub 仓库的信息卡片：

::github{repo="Fabrizz/MMM-OnSpotify"}

使用下列语法即可插入卡片：

::github{repo="owner/repository"}

提示块

支持 note、tip、important、warning 和 caution 五类提示块。

:::note 即使读者快速浏览文章，也应当注意这条信息。 :::

:::tip 这是一条帮助读者更高效完成任务的小提示。 :::

:::important 这是成功完成操作所必需的关键信息。 :::

:::warning 这条信息提醒读者立即留意可能的风险。 :::

:::caution 请在继续之前评估潜在的负面后果。 :::

自定义标题

可以在类型后面的方括号中指定标题：

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

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

GitHub 风格的提示块同样可用：

[!TIP] GitHub 提示语法同样受到支持。

剧透文本

剧透文本默认隐藏，并且可以包含 Markdown 语法。

答案是：:spoiler[保持好奇，持续记录。]

Expressive Code 代码展示

Wed, 10 Apr 2024 00:00:00 GMT

本文展示 Expressive Code 提供的代码块能力。它可以为文章中的代码自动加入语法高亮、编辑器边框和行号。

语法高亮

console.log('这行代码会获得语法高亮')

也可以渲染 ANSI 颜色：

ANSI 颜色：
- 普通：红 绿 黄 蓝 紫 青
- 粗体：红 绿 黄 蓝 紫 青

编辑器与终端边框

通过 title 属性为代码块设置文件名：

console.log('欢迎来到 Fuwari')

终端命令会使用终端边框：

echo "这是一条终端命令"

也可以手动覆盖边框类型：

echo "这个代码块没有边框"

行与文本标记

用行号标出关键位置：

function buildSite() {
  const content = '你好'
  const language = 'zh_CN'
  return { content, language }
}

插入和删除标记有助于展示改动：

const siteTitle = '示例站点'
const siteLanguage = '英文'
const siteTitle = '中文博客'
const siteLanguage = 'zh_CN'

自动换行与折叠

长行可通过 wrap 开启换行：

const description = '这是一段较长的说明文字，在较窄的阅读区域中会自动换行，避免横向滚动。'

折叠区域适合隐藏不需要立即阅读的初始化代码：

const config = loadConfig()
const posts = await loadPosts()
const index = createSearchIndex(posts)
prepareTheme(config)

render(posts)

function render(items) {
  console.log(`已渲染 ${items.length} 篇文章`)
}

index.save()
cleanup()
closeConnection()

行号

为代码块加入行号，并可指定起始行：

console.log('第五行')
console.log('第六行')

Fuwari 使用指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图片来源：Source

Fuwari 基于 Astro 构建，适合用来发布轻量、快速的静态博客。本文介绍最常用的内容配置方式；更多框架能力可查阅 Astro 文档。

文章 Frontmatter

每篇文章顶部都有一段 YAML 元数据，用于配置标题、发布日期、简介和分类等信息。

---
title: 我的第一篇博客
published: 2024-01-01
description: 这是我的第一篇博客文章。
image: ./cover.jpg
tags: [随笔, 入门]
category: 技术
draft: false
---

字段	说明
`title`	文章标题。
`published`	文章发布日期。
`description`	简短摘要，会显示在首页文章列表中。
`image`	封面图片路径；可使用远程链接、`public` 目录绝对路径或相对文章文件的路径。
`tags`	用于检索和归档的标签列表。
`category`	文章所属分类。
`draft`	设为 `true` 时文章不会公开显示。

放置文章文件

将文章放在 src/content/posts/ 下。你也可以为文章新建独立目录，将封面等资源与正文放在一起，便于维护。

src/content/posts/
├── 第一篇文章.md
└── 第二篇文章/
    ├── cover.png
    └── index.md

Markdown 写作示例

Sun, 01 Oct 2023 00:00:00 GMT

从 Markdown 开始写作

Markdown 用简单的纯文本语法表达结构。段落之间留一行空白；你可以使用斜体、粗体和 行内代码 来突出重点。

第一项
第二项
第三项

引用内容适合用来补充背景、摘录观点或强调一句值得回味的话。

列表与代码

有步骤的内容可使用有序列表：

整理要表达的主题。
写下清晰的标题和摘要。
发布前检查链接与图片。

缩进四个空格即可创建代码块，也可以使用围栏代码块并指定语言：

function greet(name) {
  console.log(`你好，${name}！`)
}

链接、表格与公式

可以链接到 Astro 官网，也可以链接到当前文章的上一节。脚注也很方便。^1

项目	说明
标题	用 `#` 到 `######` 创建层级标题。
链接	使用 `[文字](链接)`。
图片	使用 `![替代文字](图片链接)`。

行内公式例如 $E = mc^2$。独立公式可使用双美元符号：

$$ \int_a^b f(x),dx = F(b) - F(a) $$

在文章中嵌入视频

Tue, 01 Aug 2023 00:00:00 GMT

从 YouTube、Bilibili 或其他视频平台复制嵌入代码，然后粘贴到 Markdown 文件中即可。

<iframe
  width="100%"
  height="468"
  src="https://www.youtube.com/embed/5gIf0_xpFPI"
  title="YouTube 视频播放器"
  frameborder="0"
  allowfullscreen
></iframe>

YouTube

Bilibili