@@ -27,7 +27,7 @@ Starlight 提供了合理的默认样式和功能,因此你可以快速开始
27
27
28
28
2 . 在 ` astro.config.mjs ` 中,将 logo 的路径添加到 Starlight 的 [ ` logo.src ` ] ( /zh-cn/reference/configuration/#logo ) 选项:
29
29
30
- ``` js
30
+ ``` diff lang="js"
31
31
// astro.config.mjs
32
32
import { defineConfig } from 'astro/config';
33
33
import starlight from '@astrojs/starlight';
@@ -37,7 +37,7 @@ Starlight 提供了合理的默认样式和功能,因此你可以快速开始
37
37
starlight({
38
38
title: '带有我的标志的页面',
39
39
logo: {
40
- src: ' ./src/assets/my-logo.svg' ,
40
+ + src: './src/assets/my-logo.svg',
41
41
},
42
42
}),
43
43
],
@@ -48,7 +48,7 @@ Starlight 提供了合理的默认样式和功能,因此你可以快速开始
48
48
如果你的 logo 图像已经包含了网站标题,你可以通过设置 ` replacesTitle ` 选项来在视觉上隐藏标题文本。
49
49
标题文本仍包含在屏幕阅读器中,以便标题保持可访问性。
50
50
51
- ``` js
51
+ ``` js {5}
52
52
starlight ({
53
53
title: ' 带有我的 logo 的页面' ,
54
54
logo: {
@@ -77,12 +77,12 @@ starlight({
77
77
78
78
2 . 在 ` astro.config.mjs ` 中,将 logo 变体的路径添加为 ` light ` 和 ` dark ` 选项,而不是 ` src ` :
79
79
80
- ``` js
80
+ ``` diff lang="js"
81
81
starlight({
82
82
title: '带有我的标志的页面',
83
83
logo: {
84
- light: ' ./src/assets/light-logo.svg' ,
85
- dark: ' ./src/assets/dark-logo.svg' ,
84
+ + light: './src/assets/light-logo.svg',
85
+ + dark: './src/assets/dark-logo.svg',
86
86
},
87
87
}),
88
88
```
@@ -91,7 +91,7 @@ starlight({
91
91
92
92
Starlight 内置了生成站点地图(sitemap)的支持。通过在 ` astro.config.mjs ` 中把 ` site ` 字段设置为你的 URL 来启用站点地图生成:
93
93
94
- ``` js
94
+ ``` js {4}
95
95
// astro.config.mjs
96
96
export default defineConfig ({
97
97
site: ' https://stargazers.club' ,
@@ -106,7 +106,7 @@ export default defineConfig({
106
106
你可以通过在页面的正文中设置 [ ` template: splash ` ] ( /zh-cn/reference/frontmatter/#template ) 来应用更宽的页面布局,而去除侧边栏。
107
107
这对于主页面特别有效,你可以在本站点的[ 主页] ( /zh-cn/ ) 上看到它的效果。
108
108
109
- ``` md
109
+ ``` md {5}
110
110
---
111
111
# src/content/docs/index.md
112
112
@@ -124,7 +124,7 @@ Starlight 在每个页面上显示目录,使读者更容易跳转到他们正
124
124
<Tabs >
125
125
<TabItem label = " Frontmatter" >
126
126
127
- ``` md
127
+ ``` md {4-6}
128
128
---
129
129
# src/content/docs/example.md
130
130
title: 只在目录中包含 H2 的页面
@@ -137,13 +137,13 @@ tableOfContents:
137
137
</TabItem >
138
138
<TabItem label = " 全局配置" >
139
139
140
- ``` js
140
+ ``` js {7}
141
141
// astro.config.mjs
142
142
143
143
defineConfig ({
144
144
integrations: [
145
145
starlight ({
146
- title: ' ' ,
146
+ title: ' 具有自定义目录配置的文档 ' ,
147
147
tableOfContents: { minHeadingLevel: 2 , maxHeadingLevel: 2 },
148
148
}),
149
149
],
@@ -158,7 +158,7 @@ defineConfig({
158
158
<Tabs >
159
159
<TabItem label = " frontmatter " >
160
160
161
- ``` md
161
+ ``` md {4}
162
162
---
163
163
# src/content/docs/example.md
164
164
title: 没有目录的页面
@@ -169,7 +169,7 @@ tableOfContents: false
169
169
</TabItem >
170
170
<TabItem label = " 全局配置" >
171
171
172
- ``` js
172
+ ``` js {7}
173
173
// astro.config.mjs
174
174
175
175
defineConfig ({
@@ -192,7 +192,7 @@ Starlight 内置了对通过 Starlight 集成中的 [`social`](/zh-cn/reference/
192
192
你可以在 [ 配置参考] ( /zh-cn/reference/configuration/#social ) 中找到完整的支持链接图标列表。
193
193
如果你需要支持其他服务,请在 GitHub 或 Discord 上告诉我们!
194
194
195
- ``` js
195
+ ``` js {9-12}
196
196
// astro.config.mjs
197
197
import { defineConfig } from ' astro/config' ;
198
198
import starlight from ' @astrojs/starlight' ;
@@ -225,7 +225,7 @@ Starlight 可以在每个页面的页脚中显示“编辑此页”链接。这
225
225
226
226
下面的示例显示了为 Starlight 文档配置的编辑链接,这些文档位于 GitHub 上名为 ` withastro/starlight ` 的存储库的 ` main ` 分支的 ` docs/ ` 子目录中:
227
227
228
- ``` js
228
+ ``` js {9-11}
229
229
// astro.config.mjs
230
230
import { defineConfig } from ' astro/config' ;
231
231
import starlight from ' @astrojs/starlight' ;
@@ -259,8 +259,9 @@ Starlight 网站默认显示一个简单的 404 页面。你可以通过向 `src
259
259
260
260
你可以在 404 页面中使用 Starlight 的所有页面布局和自定义技术。例如,默认的404页面在 frontmatter 中使用 [ ` splash ` ] ( #页面布局 ) 模板和 [ ` hero ` ] ( /zh-cn/reference/frontmatter/#hero ) 组件:
261
261
262
- ``` md
262
+ ``` md {4,6-8}
263
263
---
264
+ # src/content/docs/404.md
264
265
title: '404'
265
266
template: splash
266
267
editUrl: false
@@ -312,7 +313,7 @@ hero:
312
313
313
314
3 . 将 ` font-face.css ` 文件的路径添加到 Starlight 的 ` astro.config.mjs ` 配置文件中的 ` customCss ` 数组中:
314
315
315
- ``` js
316
+ ``` diff lang="js"
316
317
// astro.config.mjs
317
318
import { defineConfig } from 'astro/config';
318
319
import starlight from '@astrojs/starlight';
@@ -322,8 +323,8 @@ hero:
322
323
starlight({
323
324
title: '使用自定义字体的页面',
324
325
customCss: [
325
- // @font-face CSS文件的相对路径。
326
- ' ./src/fonts/font-face.css' ,
326
+ + // @font-face CSS文件的相对路径。
327
+ + './src/fonts/font-face.css',
327
328
],
328
329
}),
329
330
],
@@ -368,7 +369,7 @@ hero:
368
369
369
370
3 . 将 Fontsource 的 CSS 文件添加到 Starlight 的 ` astro.config.mjs ` 配置文件中的 ` customCss ` 数组中:
370
371
371
- ``` js
372
+ ``` diff lang="js"
372
373
// astro.config.mjs
373
374
import { defineConfig } from 'astro/config';
374
375
import starlight from '@astrojs/starlight';
@@ -378,9 +379,9 @@ hero:
378
379
starlight({
379
380
title: '使用自定义字体的文档',
380
381
customCss: [
381
- // 用于普通和半粗字重的Fontsource文件 。
382
- ' @fontsource/ibm-plex-serif/400.css' ,
383
- ' @fontsource/ibm-plex-serif/600.css' ,
382
+ + // 用于普通和半粗字重的 Fontsource 文件 。
383
+ + '@fontsource/ibm-plex-serif/400.css',
384
+ + '@fontsource/ibm-plex-serif/600.css',
384
385
],
385
386
}),
386
387
],
0 commit comments