跳转到内容
ThinkTapFast | Docs
GitHub

入门

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

先决条件

Section titled “先决条件”

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

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

安装

Section titled “安装”

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

    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 = never, const TFontFamilies extends FontFamily[] = never>(config: AstroUserConfig<TLocales, TDriver, TFontFamilies>): AstroUserConfig<TLocales, TDriver, TFontFamilies>
    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, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = 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?: {
    name: string;
    hooks: {
        'i18n:setup'?: ((args_0: {
            injectTranslations: (args_0: Record<string, Record<string, string>>) => void;
        }) => void | Promise<void>) | undefined;
        'config:setup'?: ((args_0: {
            ...;
        }) => void | Promise<...>) | undefined;
        setup?: ((args_0: {
            ...;
        }) => void | Promise<...>) | undefined;
    };
}[] | 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 网站.

选项

Section titled “选项”
Section titled “nav”

你可以通过将一些对象传递到 ‘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',
      },
    },
  ],
})