小屋博客主题 xieluyang912/fuwari

🍥 Xieluyang 的小屋

我的个人博客——记录一些学习笔记、折腾过程，以及任何值得记下来的东西。

基于 Astro 构建，主题来自 Fuwari，并移植了 Mizuki 主题的看板娘、右侧栏和一组特色页面。

🖥️ 在线访问：007912.xyz

首页——横幅、个人资料卡、文章列表和右侧统计栏（亮色模式）

🌏 README 语言： English · 日本語 · 한국어 · Español · ไทย · Tiếng Việt · Bahasa Indonesia

✨ 功能特性

写作

- Markdown 扩展语法——提示块、GitHub 仓库卡片，以及支持行号和可折叠区块的 Expressive Code 代码块
- 每篇文章都带文内目录（TOC）
- 基于 Pagefind 的站内全文搜索，以及 RSS 订阅
- 基于 giscus 的评论区

外观

- 亮色 / 暗色模式，主题色和横幅图片均可自定义
- 响应式布局，页面过渡由 Swup 驱动
- 基于 Astro 和 Tailwind CSS 开发

在上游 Fuwari 主题之外

- 左下角的 Live2D 看板娘，由 oh-my-live2d 渲染
- 右侧第三栏——站点统计、文章日历和分类
- 特色页面：项目、技能、AI 工具 和 时间线

🚀 快速开始

1. 获取代码。 Fork 这个仓库，或者用它生成新仓库。

想直接使用不含上述改造的原版 Fuwari 主题？用下面的命令初始化即可：

npm create fuwari@latest
yarn create fuwari
pnpm create fuwari@latest
bun create fuwari@latest
deno run -A npm:create-fuwari@latest

2. 安装依赖，执行 pnpm install。还没装 pnpm 的话，先运行 npm install -g pnpm。
3. 配置你的博客，编辑 src/config.ts——站点标题、横幅、个人资料卡、导航栏、评论区、看板娘、右侧栏和特色页面都在这里配置。
4. 写第一篇文章，执行 pnpm new-post <文件名>，然后到 src/content/posts/ 目录中编辑。
5. 部署。 先修改 astro.config.mjs 里的 site 和 base，再参考 Astro 官方指南部署至 Vercel、Netlify、GitHub Pages 等平台。

📝 文章 Frontmatter

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
lang: zh_CN # 仅当文章语言与 config.ts 中的网站语言不同时才需要设置

🧩 Markdown 扩展语法

除了 Astro 默认支持的 GitHub Flavored Markdown，本站还启用了几个额外的 Markdown 特性：

- 提示块（Admonitions），用指令语法书写：

:::note
需要读者注意的信息。

:::tip
有助于读者更好理解的可选信息。

- GitHub 仓库卡片，通过 github 指令插入：

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

- 增强代码块，由 Expressive Code 提供，支持行号、可折叠区块和复制按钮。

⚡ 指令

下列指令均需要在项目根目录执行：

| Command | Action |
| pnpm install | 安装依赖 |
| pnpm dev | 在 localhost:4321 启动本地开发服务器 |
| pnpm build | 构建网站至 ./dist/ |
| pnpm preview | 本地预览已构建的网站 |
| pnpm check | 检查代码中的错误 |
| pnpm format | 使用 Biome 格式化代码 |
| pnpm new-post <filename> | 创建新文章 |
| pnpm astro ... | 执行 astro add、astro check 等指令 |
| pnpm astro --help | 显示 Astro CLI 帮助 |

🙏 致谢

- Fuwari —— 本站所基于的主题
- Mizuki —— 看板娘、右侧栏和「Others」菜单的移植来源
- oh-my-live2d —— 看板娘渲染库
- Astro · Svelte · Tailwind CSS
- Pagefind · Swup · giscus · Expressive Code

📄 许可

主题部分遵循 MIT License。文章内容采用 CC BY-NC-SA 4.0 协议。