为博客园注入现代 UI 体验：shadcn 皮肤上线

背景

tona-shadcn 是基于 tona 和现代 UI 组件系统 shadcn/ui 的博客园皮肤实现，它让传统博客园主题具备一致的设计语言、深色模式支持和响应式布局能力。其价值在于将成熟设计组件与博客园生态结合，为内容创作者提供既专业又现代的阅读体验。

使用方式

1. 进入博客园后台「设置」页面；
2. 博客皮肤选择「Custom」；
3. 勾选「禁用模板默认CSS」，并填入此 CSS文件 中的代码；
4. 在「页首 HTML」中填写以下内容（可根据自身需求修改），完成后保存即可生效。

设计与实现

Inspired by tailwindcss.com/ui.shadcn.com/voidzero.dev/chanhdai.com.

• Preact：使用 Preact 轻量级视图库。
• Tailwind CSS：使用 Tailwind CSS 编写样式。
• Base UI：使用 Base UI 作为组件原语。
• shadcn/ui：使用 shadcn/ui 设计体系。

参考资料

• https://github.com/guangzan/tona Tona 源码仓库。
• https://github.com/guangzan/tona/tree/main/themes/shadcn 皮肤源码目录。