入门

一个基于 Starlight 的现代 / 漂亮的主题.

你需要先创建一个 Starlight 网站.

如果你还没有, 你可以通过 “开始使用” 指南在 Starlight文档中创建一个.

1. Starlight Nova 主题是一个 Starlight 插件, 你可以使用自己喜欢的包管理器安装

   • pnpm
   • npm
   • yarn
   • bun

   pnpm add starlight-theme-nova

2. 在 astro.config.mjs 中 配置 Starlight 插件.

   // astro.config.mjs
   import starlightfunction starlight(userOpts: StarlightUserConfigWithPlugins): AstroIntegration from '@astrojs/starlight'
   import { defineConfigfunction defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName | SessionDriverConfig = never, const TFontProviders extends Array<FontProvider> = never>(config: AstroUserConfig<TLocales, TDriver, TFontProviders>): AstroUserConfig<TLocales, TDriver, TFontProviders>
   See the full Astro Configuration API Documentation
   https://astro.build/config } from 'astro/config'
   import starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin from 'starlight-theme-nova'
   
   export default defineConfigdefineConfig<never, never, never>(config: AstroUserConfig<never, never, never>): AstroUserConfig<never, never, never>
   See the full Astro Configuration API Documentation
   https://astro.build/config({
     integrationsAstroUserConfig<TLocales extends Locales = never, TDriver extends SessionDriverName | SessionDriverConfig | undefined = never, TFontProviders extends Array<FontProvider> = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[] | undefined
   @docs@nameintegrations@typeraw{AstroIntegration[]}@descriptionExtend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
   
   Read our [Integrations Guide](https://docs.astro.build/en/guides/integrations-guide/) for help getting started with Astro Integrations.
   
   ```js
   import react from '@astrojs/react';
   import mdx from '@astrojs/mdx';
   {
     // Example: Add React + MDX support to Astro
     integrations: [react(), mdx()]
   }
   ```: [
       starlightfunction starlight(userOpts: StarlightUserConfigWithPlugins): AstroIntegration({
         plugins
   plugins?: {
       hooks: {
           'i18n:setup'?: $InferInnerFunctionType<ZodTuple<readonly [ZodObject<{
               injectTranslations: ZodFunction<ZodTuple<readonly [ZodRecord<ZodString, ZodRecord<ZodString, ZodString>>], null>, ZodVoid>;
           }, $strip>], null>, ZodPromise<ZodVoid>> | undefined;
           'config:setup'?: $InferInnerFunctionType<ZodTuple<readonly [ZodObject<{
               config: ZodType<StarlightUserConfigWithPlugins, StarlightUserConfigWithPlugins>;
               ... 8 more ...;
               absolutePathToLang: ZodFunction<...>;
           }, $strip>], null>, ZodPromise<...>> | undefined;
           setup?: $InferInnerFunctionType<...> | undefined;
       };
       name: string;
   }[] | undefined
   A list of plugins to extend Starlight with.
   @example// Add Starlight Algolia plugin.
   starlight({
   	plugins: [starlightAlgolia({ … })],
   }): [
           starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin(/* options */), 
         ],
         titletitle: string | Record<string, string>
   Title for your website. Will be used in metadata and as browser tab title.: 'My Docs',
       }),
     ],
   })

   在下面的 Options 部分获取可用项.

3. 启动开发服务器 以预览主题.

就是这样! 现在你应该可以看到 Starlight Nova 主题已经应用到你的 Starlight 网站.

你可以通过将一些对象传递到 ‘nav’ 选项以在顶部导航栏添加一些可选的导航项.

starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin({
  navThemeNovaOptions.nav?: NavItem[] | undefined: [
    { labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.: 'Quick start', hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.: '/guide/getting-started' },
    { labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.: 'External link', hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.: 'https://example.com' },
  ],
})

如果需要支持多语言, 你可以将每个不同语言环境的值传递给 label 和 href 对象。当使用 object 对象时, 键值必须是相应语言的 BCP-47 标签 (例如 en, ar, 或者 zh-CN) 或 root 键来设置默认值：

starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin({
  navThemeNovaOptions.nav?: NavItem[] | undefined: [
    {
      labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.: {
        enen: string: 'Quick start',
        'zh-CN': '快速开始',
      },
      hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.: {
        enen: string: '/guide/getting-started',
        'zh-CN': '/zh-cn/guide/getting-started',
      },
    },
  ],
})

你可以选择将 Tailwind CSS 与 Starlight Nova 主题一起使用。为此，你需要：

1. 安装 Tailwind CSS 及其依赖项：

   npm install tailwindcss @tailwindcss/vite

2. 创建 ./src/styles/global.css 文件并添加以下内容：

   /** ./src/styles/global.css */
   @import 'tailwindcss';
   @import 'starlight-theme-nova/tailwind.css';

3. 配置你的 Astro 配置文件：

   // astro.config.mjs
   import starlight from '@astrojs/starlight'
   import tailwindcss from '@tailwindcss/vite'
   import { defineConfig } from 'astro/config'
   import starlightThemeNova from 'starlight-theme-nova'
   
   export default defineConfig({
     vite: {
       plugins: [tailwindcss()], 
     integrations: [
       starlight({
         plugins: [starlightThemeNova()],
         title: 'My Docs',
         customCss: ['./src/styles/global.css'], 
       }),
     ],
   })