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

背景

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

使用方式

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

<script>const bio = `
- 我是一名**前端工程师**，练习时长两年半！**，xxxxx。
- 熟悉 **Next.js**、**Umi**、**React**、**TypeScript**​ 等前端技术，能够构建高质量、以用户为中心的应用。
- [Tona](https://github.com/guangzan/tona) 的创建者：专为博客园设计的皮肤开发框架。- 在 [Github](https://github.com/guangzan/tona) 上获得 **200+ stars**- [文档](https://www.yuque.com/r/awescnb/books) 有 **180k+ 阅读量**
- 为 [VueUse](https://vueuse.org/)、[Windi CSS](https://windicss.org/) 做过一点微小的贡献。
`;const BASE_URL = "https://blog-static.cnblogs.com/files/guangzan/";const groups = [{group: "技术栈",items: [{title: "TypeScript",href: "https://www.typescriptlang.org/",categories: ["Language"],lightIcon: `${BASE_URL}typescript.svg`,},],},{group: "我喜爱的工具",items: [{title: "Git",href: "https://git-scm.com/",categories: ["Tools"],lightIcon: `${BASE_URL}git.svg`,},],},];window.opts = {theme: {avatar: 'https://pic.cnblogs.com/avatar/1501373/20200819130243.png',},about: {enable: true,bio,tags: ['Frontend Engineer','热爱创造的用户体验工程师',]},itemGroups: {enable: true,groups,},};
</script>
<script src="https://blog-static.cnblogs.com/files/guangzan/shadcn.js?t=1770370892" fetchpriority="high" defer></script>

设计与实现

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 皮肤源码目录。