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

背景

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

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

[code][/code]设计与实现

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

这个好，看起来很实用

分享、互助 让互联网精神温暖你我

热心回复！

东西不错很实用谢谢分享

分享、互助 让互联网精神温暖你我

yyds。多谢分享

很好很强大  我过来先占个楼 待编辑

感谢分享

感谢分享，学习下。

喜欢鼓捣这些软件，现在用得少，谢谢分享！

喜欢鼓捣这些软件，现在用得少，谢谢分享！

用心讨论，共获提升！

分享、互助 让互联网精神温暖你我

这个好，看起来很实用

谢谢楼主提供！

懂技术并乐意极积无私分享的人越来越少。珍惜

感谢发布原创作品，程序园因你更精彩

过来提前占个楼

不错，里面软件多更新就更好了