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

guangzan2026-02-06 17:55

背景

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

使用方式

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

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