导航
Part 3

配置

自定义 AstroGlass 以匹配您的品牌。

AstroGlass 通过 src/config/ 中的文件和标准 CSS 自定义属性进行配置。

配置文件

  • src/
    • config/
      • themes.ts — 主题定义（名称、颜色、区块、高级标记）
      • locales.ts — 支持的语言和语言环境元数据
      • navigation.ts — 主站导航结构
      • docs.ts — 文档侧边栏和版本配置

使用 Tailwind CSS v4 设置样式

本项目使用 Tailwind CSS v4，通过 @tailwindcss/vite 插件集成。没有 tailwind.config.mjs 文件——所有配置通过 CSS 完成。

颜色和主题变量在 src/styles/global.css 和 src/styles/_themes.css 中定义为 CSS 自定义属性：

global.css
:root {
  --p: 260 80% 60%;   /* 主色（HSL） */
  --s: 310 80% 60%;   /* 次要色 */
  --a: 190 90% 60%;   /* 强调色 */
  --b1: 220 20% 10%;  /* 基础背景 */
  --bc: 220 20% 90%;  /* 基础内容（文字） */
}
💡
更改颜色

要更改站点的配色方案，请更新 src/styles/global.css 中的 HSL 值。主题特定的覆盖在 src/styles/_themes.css 中，使用 [data-theme="..."] 选择器。

主题配置

每个主题在 src/config/themes.ts 中注册，集中管理所有主题元数据：

themes.ts
export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: 'Fluid, organic design with smooth animations',
  },
  // ... 另外 5 个主题（Glass、Neo、Luxury、Minimal、Aurora）
];

语言环境配置

语言在 src/config/locales.ts 中管理。要添加新语言，添加条目并设置 enabled: true：

locales.ts
export const localesConfig: LocaleConfig[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧', direction: 'ltr', enabled: true },
  { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺', direction: 'ltr', enabled: true },
];