1781 字
9 分钟
Examples

本篇合并了 Fuwari 模板的所有示例文章,涵盖 Markdown 基础语法、扩展功能、Expressive Code 代码块、嵌入视频以及使用指南。


Markdown 基础语法#

标题与段落#

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

  • this one
  • that one
  • the other one

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all in chapters 12—14”). Three dots … will be converted to an ellipsis. Unicode is supported. ☺

有序列表#

  1. first item
  2. second item
  3. third item

代码块#

import time
# Quick, count to ten!
for i in range(10):
# (but not *too* quick)
time.sleep(0.5)
print(i)

表格#

sizematerialcolor
9leatherbrown
10hempcanvas natural
11glasstransparent

数学公式#

Inline math equations go in like so: ω=dϕ/dt\omega = d\phi / dt. Display math should get its own line and be put in in double-dollarsigns:

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

π=3.1415926535  8979323846  2643383279  5028841971  6939937510  5820974944\begin{equation*} \pi = 3.1415926535 \; 8979323846 \; 2643383279 \; 5028841971 \; 6939937510 \; 5820974944 \end{equation*}

脚注#

Here’s a footnote 1.


Markdown 扩展功能#

GitHub 仓库卡片#

Fabrizz
/
MMM-OnSpotify
Waiting for api.github.com...
00K
0K
0K
Waiting...
::github{repo="saicaca/fuwari"}

Admonitions 提示框#

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

自定义标题#

自定义标题

This is a note with a custom title.

GitHub 语法#

TIP

The GitHub syntax is also supported.

Spoiler 剧透#

The content is hidden ayyy!


Expressive Code 代码块#

语法高亮#

console.log('This code is syntax highlighted!')

编辑器与终端框架#

代码编辑器框架#

my-test-file.js
console.log('Title attribute example')

终端框架#

Terminal window
echo "This terminal frame has no title"

覆盖框架类型#

echo "Look ma, no frame!"

文本与行标记#

标记整行#

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

选择标记类型#

line-markers.js
function demo() {
console.log('this line is marked as deleted')
// This line and the next one are marked as inserted
console.log('this is the second inserted line')
return 'this line uses the neutral default marker type'
}

Diff 语法#

this line will be marked as inserted
this line will be marked as deleted
this is a regular line
function thisIsJavaScript() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
console.log('Old code to be removed')
console.log('New and shiny code!')
}

可折叠区域#

5 collapsed lines
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// You can have multiple collapsed sections
3 collapsed lines
const a = 1
const b = 2
const c = a + b
// This will remain visible
console.log(`Calculation result: ${a} + ${b} = ${c}`)
return c
}
4 collapsed lines
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

行号#

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

自动换行#

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

嵌入视频#

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

YouTube#

Bilibili#


Fuwari 使用指南#

文章 Front-matter#

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---
AttributeDescription
titleThe title of the post.
publishedThe date the post was published.
descriptionA short description of the post. Displayed on index page.
imageThe cover image path of the post.
1. Start with http:// or https://: Use web image
2. Start with /: For image in public dir
3. With none of the prefixes: Relative to the markdown file
tagsThe tags of the post.
categoryThe category of the post.
draftIf this post is still a draft, which won’t be displayed.

文件放置位置#

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

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

博客使用指南#

创建新文章#

src/content/posts/ 目录下新建 .md 文件,文件头部使用以下 front-matter:

---
title: 我的第一篇文章
published: 2025-09-20
description: 这是文章的简短描述,会显示在首页列表中。
image: ./cover.jpg # 可选,文章封面图
tags: [学习, 教程] # 可选,标签
category: 学习经历 # 可选,分类
draft: false # 是否草稿(草稿不会显示)
---
字段说明
title文章标题
published发布日期
description简短描述,显示在首页
image封面图路径。1. http:// 开头:网络图片 2. / 开头:public 目录 3. 无前缀:相对于 md 文件
tags标签数组
category分类名称
draft是否为草稿

如何添加 Projects 项目#

打开 src/pages/projects.astro,在顶部的 projects 数组中添加你的项目即可。

添加一个有 GitHub 链接的项目#

{
name: "🏠 我的博客",
description: "基于 Astro + Fuwari 搭建的个人博客。",
date: "2025-09",
primaryUrl: "https://github.com/Visa-Aliso/Asipe",
links: [
{ icon: "fa6-brands:github", url: "https://github.com/Visa-Aliso/Asipe" },
],
}

添加一个有多个链接的项目#

{
name: "🤖 刷课机",
description: "自动选课脚本。",
date: "2025-08",
primaryUrl: "https://github.com/Visa-Aliso/AutoElective",
links: [
{ icon: "fa6-brands:github", url: "https://github.com/Visa-Aliso/AutoElective" },
{ icon: "material-symbols:description-outline-rounded", url: "https://docs.example.com" },
{ icon: "fa6-solid:flask", url: "https://demo.example.com" },
],
}

添加一个占位项目#

还没有内容时用占位卡片填充:

{ name: "📐 Coming Soon", description: "Work in progress, stay tuned.", date: "", links: [], placeholder: true }

字段说明#

字段必填说明
name项目名称,建议以 emoji 开头
description一行描述
date格式 YYYY-MM,越新的越靠前;占位项目留空
primaryUrl点击项目名称跳转的链接
links底部图标按钮数组;占位项目为空 []
placeholder设为 true 表示占位卡片(虚线边框 + 半透明)

排序与折叠规则#

  • 项目按 date 从新到旧自动排序,占位项目排最后
  • 每个分区超过 4 个项目时自动折叠,点击「展开更多」展开
  • 分区只有 ProjectsLearning 两个,不要随意增减

可用图标#

图标来自 Iconify,常用图标集:

图标集前缀示例
Material Symbolsmaterial-symbols:material-symbols:description-outline-rounded
FA6 Brandsfa6-brands:fa6-brands:github
FA6 Solidfa6-solid:fa6-solid:flask

前往 icones.js.org 搜索图标,复制名称填入 icon 字段即可。

添加友链#

编辑 src/pages/links.astro 文件顶部的 friends 数组:

const friends = [
{
name: "KiloxGo",
description: "Homepage",
avatar: "https://github.com/KiloxGo.png", // 头像 URL
url: "https://profile.kilox.top", // 站点链接
},
// 添加更多友链...
];

可用图标#

本站使用 Iconify 图标库,支持以下图标集:

图标集前缀示例
Material Symbolsmaterial-symbols:material-symbols:home-outline-rounded
Font Awesome 6 Brandsfa6-brands:fa6-brands:github
Font Awesome 6 Regularfa6-regular:fa6-regular:address-card
Font Awesome 6 Solidfa6-solid:fa6-solid:star

前往 icones.js.org 搜索图标,复制图标名称即可使用。

在 Projects 中使用图标#

links: [
{ icon: "fa6-brands:github", url: "https://github.com/..." },
{ icon: "material-symbols:article-outline-rounded", url: "https://docs.example.com" },
{ icon: "fa6-solid:flask", url: "https://demo.example.com" },
]

在 Profile 侧栏使用图标#

编辑 src/config.ts 中的 profileConfig.links

links: [
{ name: "GitHub", icon: "fa6-brands:github", url: "https://github.com/Visa-Aliso" },
{ name: "Bilibili", icon: "fa6-brands:bilibili", url: "https://space.bilibili.com/..." },
{ name: "Email", icon: "material-symbols:mail-outline-rounded", url: "mailto:xxx@example.com" },
]

修改主题色#

在线调色#

点击导航栏右侧的调色板图标 🎨,拖动滑块即可实时切换整站色相(0-360)。颜色会保存在浏览器的 localStorage 中。

修改默认色相#

编辑 src/config.ts

export const siteConfig: SiteConfig = {
themeColor: {
hue: 250, // 0-360,250 = 青色,0 = 红色,300 = 紫色,345 = 粉色
fixed: false, // 设为 true 则隐藏调色器,锁定颜色
},
};

修改站点信息#

编辑 src/config.ts

export const siteConfig: SiteConfig = {
title: "Aliso' Blog", // 站点标题
subtitle: "技术宅拯救世界", // 副标题
lang: "zh_CN", // 语言
banner: {
enable: true, // 是否显示横幅
src: "/images/seele.jpg", // 横幅图片
},
};

评论系统配置#

评论使用 Giscus(基于 GitHub Discussions)。编辑 src/components/misc/Giscus.astro 顶部的默认参数,或前往 giscus.app 获取你的配置:

const {
repo = "Visa-Aliso/Visa-Aliso.github.io",
repoId = "R_kgDOPp3XLg",
category = "Announcements",
categoryId = "DIC_kwDOPp3XLs4Cvl5a",
} = Astro.props;

评论会自动出现在每篇博客文章底部和友链页面,主题跟随 fuwari 的亮色/暗色模式切换。

Footnotes#

  1. Footnote text goes here.

Examples
https://visa-aliso.github.io/posts/examples/
作者
Aliso
发布于
2024-01-01
许可协议
CC BY-NC-SA 4.0
评论