Fuwari for Typecho#

特性#

• 完整复刻 Fuwari 的界面：卡片布局、侧边栏、入场动画、滚动交互
• Swup 页面切换动画（无刷新跳转 + 淡入淡出过渡）
• 亮色 / 暗色 / 跟随系统 三态切换，主题色 Hue 调色盘（访客可调，可在后台禁止）
• 顶部 Banner（可选），带视差滚动与首页放大效果
• 即时搜索（导航栏搜索框，基于本主题内置的 JSON 接口）
• 文章目录 TOC（超宽屏显示在右侧，滚动高亮当前章节）
• highlight.js 代码高亮（GitHub Dark 配色）+ 行号 + 复制按钮 + 语言徽章
• :::note :::tip :::important :::warning :::caution 提示块，
  同时支持 GitHub 风格 > [!NOTE] 语法
• 字数统计与预计阅读时间
• 归档时间线页面、分类/标签/搜索结果时间线
• Fuwari 风格的原生评论区（支持嵌套回复、分页）
• KaTeX 数学公式（可选开启）
• PhotoSwipe 图片灯箱、OverlayScrollbars 自定义滚动条

安装#

1. 将 fuwari-typecho 文件夹重命名为 Fuwari（可选），放入 Typecho 的 usr/themes/ 目录
2. 后台 → 外观 → 启用本主题
3. 后台 → 外观 → 设置外观，按需配置主题色、Banner、侧边栏资料、社交链接等

要求：Typecho 1.2+，PHP 7.4+（推荐 8.x），文章使用 Markdown 撰写。

使用说明#

归档页面#

后台「创建页面」→ 展开高级选项 → 自定义模板选择「归档页面」，即可获得与 Fuwari /archive/ 一致的时间线页面。建议将该页面加入导航栏。

文章封面图#

编辑文章时展开「自定义字段」，添加字段 cover，值为图片 URL，即可在首页文章卡片和文章页顶部显示封面。

文章摘要#

默认自动截取正文前 120 字。也可添加自定义字段 description 手动指定摘要。

导航栏链接#

主题设置中「导航栏链接」每行一条，格式 名称|链接，如：

主页|/
归档|/archives.html
关于|/about.html
GitHub|https://github.com/yourname

以 http 开头且非本站的链接会显示外链图标并新窗口打开。留空则自动显示 主页 + 所有独立页面。

社交链接#

主题设置中「社交链接」每行一条，格式 名称|图标|链接，如：

GitHub|fa6-brands:github|https://github.com/yourname
Bilibili|fa6-brands:bilibili|https://space.bilibili.com/xxx
RSS|fa6-solid:rss|/feed/

内置常用图标：fa6-brands 的 github / gitlab / bilibili / qq / weibo / zhihu / telegram / discord / youtube / twitch / x-twitter / twitter / steam / mastodon / facebook / instagram / linkedin / reddit，以及 fa6-solid:rss、fa6-solid:envelope 等。

提示块#

Markdown 中书写：

:::tip[小技巧]
这里是内容
:::

或 GitHub 风格：

> [!NOTE]
> 这里是内容

二次开发#

主题的 CSS/JS 由 build/ 目录（仓库根部）编译产出，修改样式或脚本后：

cd build
npm install
npm run build

• build/src/style.css → assets/css/style.css（Tailwind）
• build/src/main.js → assets/js/main.js（esbuild 打包 Swup、PhotoSwipe、highlight.js 等）
• build/scripts/gen-icons.mjs → inc/icons.php（Iconify 图标内联为 SVG）

直接修改 PHP 模板中的 Tailwind class 后也需要重新编译 CSS。

许可#

• 原主题 Fuwari：MIT License © saicaca
• 本移植版同样以 MIT License 发布
• 图标数据来自 Iconify（Material Symbols: Apache-2.0；Font Awesome Free: CC BY 4.0）