Astro博客

astro-sumi — Astro 博客模板

作者 kpab

墨色与和纸风格的极简 Astro 博客主题，文章页零 JavaScript，首页含 WebGL 墨迹模拟。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

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

明暗主题通过 light-dark() 和 color-scheme 实现，切换仅需一个属性，且无 JS 时跟随系统偏好。

文章页面零外部 JavaScript，主题切换仅内联数百字节。

首页 WebGL 墨迹模拟基于 Navier-Stokes，支持光标交互，并自动降级为静态渐变。

内容集合 schema 校验，缺失日期或标签会导致构建失败。

内置 SEO 全套：canonical、OG、Twitter cards、JSON-LD、sitemap、RSS、robots.txt 和 llms.txt。

构建时用 satori 生成每篇文章的社交分享图，风格统一。

模板详细介绍

astro-sumi 是一款以墨、和纸和留白为设计核心的 Astro 博客主题。它通过单一 token 集同时提供明暗两套配色，文章页面不加载任何客户端 JavaScript，而首页则带有一个可交互的 WebGL 流体墨迹模拟，用光标即可搅动墨迹。整体视觉克制，强调负空间，适合追求沉浸阅读体验的个人博客。

主题在技术细节上相当考究：颜色使用 light-dark() 和 color-scheme 驱动，无外部请求，拉丁字体自托管并子集化，日文则回退到系统明朝体；内容集合带 schema 校验，缺失日期或错误标签会直接导致构建失败；SEO 方面内置 canonical、Open Graph、Twitter cards、JSON-LD、sitemap、RSS 等，并支持在构建时生成每篇文章的社交分享图。墨迹模拟在 GPU 上运行，限制 DPR、离屏暂停，并尊重 prefers-reduced-motion 和 WebGL2 支持情况。

需要留意的是，该主题要求 Node.js 22.12 或更高版本，且 Astro 7 已用 Sätteri 取代 remark/rehype，因此不兼容 remark 插件。若关闭首页的墨迹模拟，整个站点将无外部 JavaScript。部署前务必在 src/config.ts 中设置 SITE.url，否则 canonical、sitemap、feed 和 OG 图片 URL 会不正确。

Astro博客

适合你的项目吗？

适用场景

个人技术博客或写作站点，重视阅读体验和视觉风格。
希望部署为静态站点，且对前端性能有较高要求。
需要多语言支持（尤其日文）且不想加载大型 CJK 字体。
偏好通过配置文件集中管理站点元数据和导航。

适合人群

熟悉 Astro 和 Node.js 的开发者，愿意阅读文档进行定制。
需要零客户端 JavaScript 的文章页面，但首页可接受 WebGL 模拟。
希望开箱即用 SEO 和社交分享图的博客项目。

上手与定制指南

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

1
克隆仓库后需 Node.js 22.12+，运行 npm install && npm run dev。
2
主要配置集中在 src/config.ts，包括站点 URL、作者信息、导航和博客分页等。
3
部署到 Cloudflare Pages、Netlify 或 Vercel 时，需设置构建命令为 npm run build，输出目录为 dist，Node 版本为 24。
4
若关闭 INK.hero 和 INK.divider，则全站无外部 JavaScript。

查看仓库使用说明