Starlight

Starlight 是 Astro 的默认文档主题，提供了丰富的功能和灵活的配置选项。

写作

引入其他文件

使用 Vite 的 ?raw 导入后缀将任何代码文件作为字符串导入。 然后，你可以将此导入的字符串传递给<Code>组件，以将其包含在你的页面上。

例如：

import { Code } from "@astrojs/starlight/components";
import importedCode from "/src/env.d.ts?raw";

<Code code={importedCode} lang="ts" title="src/env.d.ts" />

定制

自定义 CSS 样式

通过提供额外的 CSS 文件来修改或扩展 Starlight 的默认样式，从而自定义应用于 Starlight 网站的样式。

1. 在 src/styles 目录下添加一个 CSS 文件。例如，你可以设置一个更宽的默认列宽和更大的页面标题文本大小：

   src/styles/custom.css

   :root {
     --sl-content-width: 50rem;
     --sl-text-5xl: 3.5rem;
   }

2. 在 astro.config.mjs 中的 customCss 数组中添加你的 CSS 文件的路径：

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'Docs With Custom CSS',
         customCss: [
           // 你的自定义 CSS 文件的相对路径
           './src/styles/custom.css',
         ],
       }),
     ],
   });

你可以在 GitHub 上的 props.css 文件 中查看 Starlight 使用的所有 CSS 自定义属性，你可以设置这些属性来自定义你的网站。

参考资料

• Starlight 文档