Skip to content

Commit

Permalink
Merge branch 'main' into overrides-0108
Browse files Browse the repository at this point in the history
  • Loading branch information
liruifengv authored Jan 8, 2025
2 parents 1e167dd + aa69440 commit 719ab1b
Show file tree
Hide file tree
Showing 10 changed files with 67 additions and 35 deletions.
6 changes: 3 additions & 3 deletions docs/src/content/docs/zh-cn/components/using-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ sidebar:
示例可能包括链接卡片或嵌入 YouTube。
Starlight 支持使用 [MDX](https://mdxjs.com/)[Markdoc](https://markdoc.dev/) 文件中的组件,并提供了一些常用组件供你使用。

[在 Astro 文档中了解有关构建组件的更多信息](https://docs.astro.build/zh-cn/core-concepts/astro-components/)
[在 Astro 文档中了解有关构建组件的更多信息](https://docs.astro.build/zh-cn/basics/astro-components/)

## 在 MDX 中使用组件

Expand All @@ -30,7 +30,7 @@ import CustomCard from '../../components/CustomCard.astro';
<CustomCard>组件还可以包含 **嵌套内容**。</CustomCard>
```

由于 Starlight 由 Astro 提供支持,因此你可以在 MDX 文件中添加由 [受支持的 UI 框架(React、Preact、Svelte、Vue、Solid 和 Alpine)](https://docs.astro.build/zh-cn/core-concepts/framework-components/) 构建的组件。
由于 Starlight 由 Astro 提供支持,因此你可以在 MDX 文件中添加由 [受支持的 UI 框架(React、Preact、Svelte、Vue、Solid 和 Alpine)](https://docs.astro.build/zh-cn/guides/framework-components/) 构建的组件。
在 Astro 文档中了解有关 [在 MDX 中使用组件](https://docs.astro.build/zh-cn/guides/integrations-guide/mdx/#在-mdx-中使用组件) 的更多信息。

## 在 Markdoc 中使用组件
Expand Down Expand Up @@ -87,7 +87,7 @@ Starlight 将默认样式应用于 Markdown 内容,例如,在元素之间添
---
// src/components/Example.astro
import type { ComponentProps } from 'astro/types';
import { Icon } from '@astrojs/starlight/icon';
import { Icon } from '@astrojs/starlight/components';
type IconProps = ComponentProps<typeof Icon>;
---
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/zh-cn/environmental-impact.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,6 @@ Cache-Control: public, max-age=604800, immutable
[sf]: https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/
[bbc]: https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think
[http]: https://httparchive.org/reports/state-of-the-web
[assets]: https://docs.astro.build/zh-cn/guides/assets/
[assets]: https://docs.astro.build/zh-cn/guides/images/
[islands]: https://docs.astro.build/zh-cn/concepts/islands/
[wcc]: https://www.websitecarbon.com/
2 changes: 1 addition & 1 deletion docs/src/content/docs/zh-cn/guides/authoring-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ title: 我的页面标题

## 图片

Starlight 中的图片使用 [Astro 的内置优化资源支持](https://docs.astro.build/zh-cn/guides/assets/)
Starlight 中的图片使用 [Astro 的内置优化资源支持](https://docs.astro.build/zh-cn/guides/images/)

Markdown 和 MDX 支持用于显示图片的 Markdown 语法,其中包括屏幕阅读器和辅助技术的 alt-text。

Expand Down
23 changes: 20 additions & 3 deletions docs/src/content/docs/zh-cn/guides/overriding-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,24 @@ import Default from '@astrojs/starlight/components/SocialIcons.astro';
在自定义组件中渲染内置组件时:

- 展开传入 `Astro.props`。这样可以确保它接收到渲染所需的所有数据。
- 在默认组件内部添加一个 [`<slot />`](https://docs.astro.build/zh-cn/core-concepts/astro-components/#插槽)。这样,如果组件传入了任何子元素,Astro 就知道在哪里渲染它们。
- 在默认组件内部添加一个 [`<slot />`](https://docs.astro.build/zh-cn/basics/astro-components/#插槽)。这样,如果组件传入了任何子元素,Astro 就知道在哪里渲染它们。

如果你要复用包含 [命名插槽](https://docs.astro.build/zh-cn/basics/astro-components/#命名插槽)[`PageFrame`](/zh-cn/reference/overrides/#pageframe)[`TwoColumnContent`](/zh-cn/reference/overrides/#twocolumncontent) 组件,你还需要 [传递](https://docs.astro.build/zh-cn/basics/astro-components/#传递插槽) 这些插槽。

下面的示例展示了一个自定义组件,它复用了 `TwoColumnContent` 组件,该组件需要传递一个额外的 `right-sidebar` 命名插槽:

```astro {9}
---
// src/components/CustomContent.astro
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/TwoColumnContent.astro';
---
<Default {...Astro.props}>
<slot />
<slot name="right-sidebar" slot="right-sidebar" />
</Default>
```

## 使用页面数据

Expand Down Expand Up @@ -124,7 +141,7 @@ const { title } = Astro.props.entry.data;
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Footer.astro';
const isHomepage = Astro.props.slug === '';
const isHomepage = Astro.props.id === '';
---
{
Expand All @@ -138,4 +155,4 @@ const isHomepage = Astro.props.slug === '';
}
```

了解更多关于条件渲染的内容,请参阅 [Astro 模板语法指南](https://docs.astro.build/zh-cn/core-concepts/astro-syntax/#动态-html)
了解更多关于条件渲染的内容,请参阅 [Astro 模板语法指南](https://docs.astro.build/zh-cn/basics/astro-syntax/#动态-html)
7 changes: 3 additions & 4 deletions docs/src/content/docs/zh-cn/guides/project-structure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ description: 了解如何组织 Starlight 项目中的文件。

本指南将向你展示 Starlight 项目的组织方式以及项目中的不同文件的作用。

Starlight 项目通常遵循与其他 Astro 项目相同的文件和目录结构。有关更多详细信息,请参阅 [Astro 的项目结构文档](https://docs.astro.build/zh-cn/core-concepts/project-structure/)
Starlight 项目通常遵循与其他 Astro 项目相同的文件和目录结构。有关更多详细信息,请参阅 [Astro 的项目结构文档](https://docs.astro.build/zh-cn/basics/project-structure/)

## 文件和目录

- `astro.config.mjs` — Astro 配置文件;包括 Starlight 集成和配置。
- `src/content/config.ts` — 内容集合配置文件;将 Starlight 的 frontmatter 模式添加到你的项目中。
- `src/content.config.ts` — 内容集合配置文件;将 Starlight 的 frontmatter 模式添加到你的项目中。
- `src/content/docs/` — 内容文件。Starlight 将此目录中的每个 `.md``.mdx``.mdoc` 文件转换为站点上的一个页面。
- `src/content/i18n/` (可选) — 支持[国际化](/zh-cn/guides/i18n/)的翻译数据。
- `src/` — 项目的其他源代码和文档(组件、样式、图像等)。
Expand Down Expand Up @@ -39,8 +39,7 @@ import { FileTree } from '@astrojs/starlight/components';
- 01-getting-started.md
- 02-advanced.md
- index.mdx
- config.ts
- env.d.ts
- content.config.ts
- astro.config.mjs
- package.json
- tsconfig.json
Expand Down
11 changes: 6 additions & 5 deletions docs/src/content/docs/zh-cn/guides/site-search.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -124,18 +124,19 @@ DocSearch 默认只提供了英语 UI 文本。

<Steps>

1.`src/content/config.ts` 中给 Starlight 的 `i18n` 内容集合定义添加 DocSearch schema:
1.`src/content.config.ts` 中给 Starlight 的 `i18n` 内容集合定义添加 DocSearch schema:

```js ins={4} ins=/{ extend: .+ }/
// src/content/config.ts
```js ins={5} ins=/{ extend: .+ }/
// src/content.config.ts
import { defineCollection } from 'astro:content';
import { docsLoader, i18nLoader } from '@astrojs/starlight/loaders';
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
import { docSearchI18nSchema } from '@astrojs/starlight-docsearch/schema';

export const collections = {
docs: defineCollection({ schema: docsSchema() }),
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
i18n: defineCollection({
type: 'data',
loader: i18nLoader(),
schema: i18nSchema({ extend: docSearchI18nSchema() }),
}),
};
Expand Down
6 changes: 6 additions & 0 deletions docs/src/content/docs/zh-cn/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ description: Starlight 帮助你使用 Astro 构建漂亮、高性能的文档
template: splash
editUrl: false
lastUpdated: false
banner:
content: |
更新到 Astro 5?
<a href="https://github.com/withastro/starlight/releases/tag/%40astrojs/starlight%400.30.0">
了解如何升级
</a>
hero:
title: Starlight <br/> 使你的文档闪耀夺目
tagline: 快速、易用、易于访问 —— 构建卓越文档网站所需的一切。
Expand Down
16 changes: 10 additions & 6 deletions docs/src/content/docs/zh-cn/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,20 +62,24 @@ export default defineConfig({

### 配置内容集合

Starlight 是建立在 Astro 的[内容集合](https://docs.astro.build/zh-cn/guides/content-collections/)之上的,这些集合在 `src/content/config.ts` 文件中配置。
Starlight 是建立在 Astro 的[内容集合](https://docs.astro.build/zh-cn/guides/content-collections/)之上的,这些集合在 `src/content.config.ts` 文件中配置。

创建或更新内容配置文件,添加一个使用 Starlight 的 `docsSchema``docs` 集合:
创建或更新内容配置文件,添加一个使用 Starlight 的 `docsLoader``docsSchema``docs` 集合:

```js ins={3,6}
// src/content/config.ts
```js ins={3-4,7}
// src/content.config.ts
import { defineCollection } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({ schema: docsSchema() }),
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
};
```

Starlight 也支持 [`legacy.collections` 标志](https://docs.astro.build/zh-cn/reference/legacy-flags/),其中集合使用旧版的内容集合实现处理。
这对于你有一个现有的 Astro 项目,目前无法对集合进行任何更改以使用加载器的情况非常有用。

### 添加内容

现在 Starlight 已经配置好了,是时候添加一些内容了!
Expand Down Expand Up @@ -124,6 +128,6 @@ import { FileTree } from '@astrojs/starlight/components';

### 结合 SSR 使用 Starlight

要启用 SSR,请按照 Astro 文档中的 [“按需渲染适配器”](https://docs.astro.build/zh-cn/guides/server-side-rendering/) 指南将服务器适配器添加到你的 Starlight 项目中。
要启用 SSR,请按照 Astro 文档中的 [“按需渲染适配器”](https://docs.astro.build/zh-cn/guides/on-demand-rendering/) 指南将服务器适配器添加到你的 Starlight 项目中。

无论项目的输出模式如何,Starlight 生成的文档页面都默认为预渲染。要选择不对 Starlight 页面进行预渲染,请将 [`prerender` 配置选项](/zh-cn/reference/configuration/#prerender) 设置为 `false`
4 changes: 2 additions & 2 deletions docs/src/content/docs/zh-cn/reference/configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ Starlight 默认使用 Sarah Drasner 的 [Night Owl 主题](https://github.com/s
**类型:** `boolean`
**默认值:** `true`

定义 Starlight 页面是应预渲染为静态 HTML 还是由 [SSR 适配器](https://docs.astro.build/zh-cn/guides/server-side-rendering/) 按需渲染。
定义 Starlight 页面是应预渲染为静态 HTML 还是由 [SSR 适配器](https://docs.astro.build/zh-cn/guides/on-demand-rendering/) 按需渲染。

默认情况下,Starlight 页面是预渲染的。
如果你正在使用 SSR 适配器并希望按需渲染 Starlight 页面,请设置为 `prerender: false`
Expand Down Expand Up @@ -563,7 +563,7 @@ starlight({
**类型:** `boolean`
**默认值:** `false`

禁用注入 Starlight 的默认 [404 页面](https://docs.astro.build/zh-cn/core-concepts/astro-pages/#自定义-404-错误页面)。要在项目中使用自定义的 `src/pages/404.astro` 路由,请将此选项设置为 `true`
禁用注入 Starlight 的默认 [404 页面](https://docs.astro.build/zh-cn/basics/astro-pages/#自定义-404-错误页面)。要在项目中使用自定义的 `src/pages/404.astro` 路由,请将此选项设置为 `true`

### `components`

Expand Down
25 changes: 15 additions & 10 deletions docs/src/content/docs/zh-cn/reference/frontmatter.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ description: 了解更多关于此项目的信息。

**类型:** `string`

覆盖页面的slug。有关更多详细信息,请参阅 Astro文档中的 [ "定义自定义slugs"](https://docs.astro.build/zh-cn/guides/content-collections/#定义自定义-slugs) 部分。
覆盖页面的slug。有关更多详细信息,请参阅 Astro文档中的 [ "定义自定义 ID"](https://docs.astro.build/zh-cn/guides/content-collections/#定义自定义-id) 部分。

### `editUrl`

Expand Down Expand Up @@ -396,19 +396,20 @@ sidebar:

## 自定义 frontmatter schema

Starlight 的 `docs` 内容集合的 frontmatter schema 在 `src/content/config.ts` 中使用 `docsSchema()` 辅助函数进行配置:
Starlight 的 `docs` 内容集合的 frontmatter schema 在 `src/content.config.ts` 中使用 `docsSchema()` 辅助函数进行配置:

```ts {3,6}
// src/content/config.ts
```ts {4,7}
// src/content.config.ts
import { defineCollection } from 'astro:content';
import { docsLoader, i18nLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({ schema: docsSchema() }),
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
};
```

了解更多关于内容集合模式的信息,请参阅 Astro 文档中的 [“定义集合模式”](https://docs.astro.build/zh-cn/guides/content-collections/#定义集合模式) 部分。
了解更多关于内容集合模式的信息,请参阅 Astro 文档中的 [“定义集合模式”](https://docs.astro.build/zh-cn/guides/content-collections/#定义集合模式schema) 部分。

`docsSchema()` 采用以下选项:

Expand All @@ -422,13 +423,15 @@ export const collections = {

在下面的示例中,我们为 `description` 提供了一个更严格的类型,使其成为必填项,并添加了一个新的可选的 `category` 字段:

```ts {8-13}
// src/content/config.ts
```ts {10-15}
// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({
loader: docsLoader(),
schema: docsSchema({
extend: z.object({
// 将内置字段设置为必填项。
Expand All @@ -443,13 +446,15 @@ export const collections = {

要利用 [Astro `image()` 辅助函数](https://docs.astro.build/zh-cn/guides/images/#内容集合中的图像),请使用返回 schema 扩展的函数:

```ts {8-13}
// src/content/config.ts
```ts {10-15}
// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({
loader: docsLoader(),
schema: docsSchema({
extend: ({ image }) => {
return z.object({
Expand Down

0 comments on commit 719ab1b

Please sign in to comment.