Astro博客

fuwari-modified — Astro 博客模板

作者 ANcRyel

基于 Fuwari 修改的 Astro 博客主题，升级到 Astro v5、Tailwind v4，用 Alpine.js 替换 Svelte，并新增背景图卡片透叠、首页文字与滚动进度条。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Fuwari 修改的 Astro 博客主题，保留原版页面结构与阅读体验

升级到 Astro v5 与 Tailwind v4，并用 Alpine.js 替换原版的 Svelte

新增背景图配合卡片透叠的视觉处理

新增首页文字展示与阅读滚动进度条

站点配置、文章与关于页分别集中在 src/config.ts、src/content/posts/ 和 src/content/spec/about.md

模板详细介绍

fuwari-modified 是 ANcRyel 在 saicaca 的 Fuwari 模板基础上修改而来的 Astro 博客主题，采用 MIT 许可。它保留了原版 Fuwari 的页面结构与阅读体验，主要变化集中在技术栈与少量界面功能上。

技术层面，主题升级到 Astro v5 与 Tailwind v4，把原版使用的 Svelte 替换为 Alpine.js，TypeScript 相关版本未在资料中给出具体依赖锁定信息。功能层面新增了三项：背景图配合卡片透叠效果、首页文字展示，以及阅读时的滚动进度条。README 中仍保留“升级至 Astro v7”“升级至 TypeScript v6”等未勾选条目，说明这些方向尚未完成。

使用上，站点配置位于 src/config.ts，文章放在 src/content/posts/，关于页对应 src/content/spec/about.md。部署、主题定制与项目结构等更完整说明需要参考原版 Fuwari 的 README。README 也提示项目内不少文案为 AI 翻译，可能存在不准确之处。

Astro博客

适合你的项目吗？

适用场景

搭建以文章阅读为主的个人博客，并希望沿用 Fuwari 的页面结构
需要在 Fuwari 基础上获得背景图、卡片透叠与滚动进度条等界面变化
希望使用 Alpine.js 而非 Svelte 的 Astro 博客项目
参考该仓库对 Fuwari 的修改方式，自行调整配置或继续二次开发

适合人群

熟悉 Astro 并愿意按 src/config.ts 与 src/content/posts/ 组织内容的开发者
接受以原版 Fuwari README 作为部署与定制主要参考的使用者
需要 MIT 许可下可修改、可分发的博客主题的个人或团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
README 标注 Node.js >= 22、pnpm >= 11，具体依赖版本以仓库锁定文件为准
2
站点配置在 src/config.ts，文章在 src/content/posts/，关于页在 src/content/spec/about.md
3
部署、主题定制与项目结构等更多说明需参考原版 Fuwari 的 README
4
README 提示项目内许多内容为 AI 翻译，可能存在不准确之处
5
演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/ANcRyel/fuwari-modified/blob/main/LICENSE https://github.com/ANcRyel/fuwari-modified/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: Astro
网站类型: 博客

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-10-01
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 640fd77753f650bab9bb30e776b08263715135b1c9e3cdac42ec8fbcb874bf1c

2026-10-02T09:35:57.022Z

来源文件 / 仓库

<div align="center">

<br/>

<table>
<tr>
<td valign="middle" align="center">

# 🍥 Fuwari-Modified

**基于 Fuwari 修改的 Astro 博客主题**

*保持优雅 · 技术焕新 · 功能增强*

</td>
<td valign="middle" align="left">

[**🖥️ 在线预览**](https://ancryel.github.io/fuwari-modified-demo)

[**📦 上游仓库**](https://github.com/saicaca/fuwari)

[**🐛 提交反馈**](https://github.com/ancryel/fuwari-modified/issues)

</td>
</tr>
</table>

<br/>

<table>
<tr>
<td valign="middle" align="center">

[![Astro](https://img.shields.io/badge/Astro-5.x-FF5D01?logo=astro&logoColor=white&style=for-the-badge)](https://astro.build)
[![Alpine.js](https://img.shields.io/badge/Alpine.js-3.x-8BC0D0?logo=alpinedotjs&logoColor=white&style=for-the-badge)](https://alpinejs.dev)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.x-06B6D4?logo=tailwindcss&logoColor=white&style=for-the-badge)](https://tailwindcss.com)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript&logoColor=white&style=for-the-badge)](https://www.typescriptlang.org)

</td>
<td valign="middle" align="center">

[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D%2022-5FA04E?logo=nodedotjs&logoColor=white)](#)
[![pnpm](https://img.shields.io/badge/pnpm-%3E%3D%2011-F69220?logo=pnpm&logoColor=white)](#)

[![License](https://img.shields.io/badge/License-MIT-22c55e)](#)

</td>
</tr>
</table>

<br/>

📖 **README** · 简体中文 &nbsp;|&nbsp; [繁體中文](docs/README.zh-TW.md) &nbsp;|&nbsp; [English](README.en.md)

<br/>

</div>

---

![Preview Image](docs/preview.jpeg)

> [!TIP]
> 这是一款基于 [Astro](https://astro.build) 框架和 [Fuwari](https://github.com/saicaca/fuwari) 模板修改的博客主题。
>
> 项目中许多内容是 AI 翻译，如有不准欢迎提交 [Pull Request](https://github.com/ancryel/fuwari-modified/pulls) 修正。

## ✨ 功能特性

在保留 Fuwari 原版优雅设计与阅读体验的基础上，完成了以下修改与新增：

### &nbsp;&nbsp;技术焕新
- [x] 升级至 Astro v5
- [ ] 升级至 Astro v7
- [x] Svelte 替换为 Alpine.js
- [x] 升级至 Tailwind v4
- [ ] 升级至 TypeScript v6

### &nbsp;&nbsp;功能增强
- [x] 背景图 + 卡片透叠
- [x] 首页文字
- [x] 滚动进度条

## 📖 使用说明

| 项目 | 路径 |
|:---|:---|
| 站点配置 | `src/config.ts` |
| 文章 | `src/content/posts/` |
| 关于页 | `src/content/spec/about.md` |

> 更多内容（部署、主题定制、项目结构等）请参考 [原版 Fuwari README](https://github.com/saicaca/fuwari#readme)。

## 🙏 特别致谢

一切基于 [saicaca](https://github.com/saicaca) 开发的 [fuwari](https://github.com/saicaca/fuwari) 模板。

### &nbsp;&nbsp;技术栈

Astro 5 · Alpine.js 3 · Tailwind CSS 4 · TypeScript 5.9

Pagefind · Expressive Code · KaTeX · PhotoSwipe · Swup

### &nbsp;&nbsp;参考借鉴
- [fuwari](https://github.com/saicaca/fuwari), MIT 协议
- [Firefly](https://github.com/CuteLeaf/Firefly), MIT 协议 *（参考了首页文字功能）*
- [Mizuki](https://github.com/matsuzaka-yuki/Mizuki), MIT 协议 *（参考了背景图 + 卡片透叠功能）*

> `滚动进度条`功能的参考项目已找不到原始出处，如有知情者请[提交 Issue](https://github.com/ancryel/fuwari-modified/issues)告知。

## 📄 许可协议

遵循 [MIT License](https://mit-license.org/) 开源协议。

- 原项目版权：Copyright (c) 2024 saicaca (Fuwari)
- 修改部分版权：Copyright (c) 2026 ANcRyel (Fuwari-Modified)

详细条款见 [LICENSE](./LICENSE)。

反馈内容错误