预览

什么是 Trito？

Trito（发音为 "try-toe"）是一个 VitePress 主题，用于决定由 VitePress 生成的网站的外观和风格。

Trito 自称为 “视觉焕然一新的 VitePress 默认主题”，因此它的功能与默认主题完全一致，不增不减。使其区别于默认主题的，纯粹是 UI/UX 上的改进。

Trito 被设计为默认主题的 开箱即用式替代品，对默认主题的 API 干预极小。如果你想让你的网站在所有其他 VitePress 网站中脱颖而出，请选择 Trito 🌊。

为何要构建 Trito？

VitePress 的默认主题已然十分出色，为何还要构建 Trito？

为了独特性。

不可否认，VitePress 默认主题的美学设计已经超越了 95% 的网站。初次访问使用默认主题的网站时，大多数人都会对霓虹风格的首页感到惊叹。然而，当一位经验丰富的开发者——一位多年来深入项目文档海洋的人——访问该网站时，他或她几乎肯定会感到乏味。原因很简单——所有 VitePress 网站看起来都一样。

仅仅为了些许视觉糖衣就重新造轮子，显然不值得。自定义主题的真正价值在于其潜在影响——实现更好的个人品牌塑造，并表明用户体验比开发效率更受重视。这也是像 VoidZero 这样的组织会打造他们自己的主题的原因。

如何使用 Trito？

首先，使用你喜欢的包管理器进行安装。根据你的用例决定是否将其作为 devDependency，这里以 npm 为例：

npm add vitepress-theme-trito

然后将你的 .vitepress/theme/index.ts 或 .vitepress/theme/index.js 文件修改如下：

import Trito from 'vitepress-theme-trito';
export default Trito;

接着进入 .vitepress/config.ts 或 .vitepress/config.js 文件，进行以下修改：

// ... 其他导入
import { ThemeConfig } from 'vitepress-theme-trito'; // 特别适用于 TypeScript
import { defineConfig } from 'vitepress';

export default defineConfig<ThemeConfig>({
  // [特别适用于 TypeScript] 类型参数使 VitePress 能识别该主题
  // ... 你的配置
  vite: {
    ssr: {
      noExternal: ['vitepress-theme-trito'], // 确保网站能够成功构建
    },
  },
});

关于 Trito 的扩展、CSS 变量以及主题配置选项的更多细节，请查阅其 GitHub 页面。

许可证

本项目基于 MIT 许可证 开源。