Starlight 0.35 | Astro 框架

🌟 Starlight 0.35 希望成为您的夏季标志，此版本使您的文档自定义变得前所未有的简单。

让我们深入了解此版本的亮点

附注中的自定义图标
自动生成侧边栏链接的自定义属性
自定义页面 slug 处理

要升级现有的 Starlight 站点，请使用自动化的 @astrojs/upgrade CLI 工具。这将更新 Starlight、Astro 和您正在使用的任何其他集成。

npx @astrojs/upgrade

附注中的自定义图标

Starlight 的附注让您可以轻松地为文档页面添加带样式的注释、警告及其他类型的提示框。Starlight 0.35 更进一步，允许您覆盖附注的图标。

在您的附注中添加 icon 属性来自定义图标，支持 Markdown、MDX 和 Markdoc 页面。

:::tip{icon="heart"}
Show your love with a heart icon.
:::

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" icon="heart">
  Show your love with a heart icon.
</Aside>

{% aside type="tip" icon="heart" %}
Show your love with a heart icon.
{% /aside %}

目前，附注可以使用Starlight 的内置图标进行样式设置，但我们计划在未来的版本中将其扩展为包含自定义图标支持。

感谢Shubham Padia贡献此功能！

Starlight 0.35 增加了对自动生成的侧边栏组中所有链接应用自定义 HTML 属性的支持。这使得为侧边栏部分中的所有链接添加自定义样式或行为变得更加容易。

在您的侧边栏配置中使用新的autogenerate.attrs选项添加自定义属性。例如，您可以决定将特定自动生成组中的所有链接设置为斜体。

starlight({
  title: 'My docs',
  sidebar: [
    {
      label: 'Constellations',
      autogenerate: {
        // Autogenerate a group of links for the 'constellations' directory.
        directory: 'constellations',
        // Italicize all link labels in this group.
        attrs: { style: 'font-style: italic' },
      },
    },
  ],
}),

自定义页面 slug 处理

现在可以更轻松地自定义文档文件名如何映射到 URL。

默认情况下，Astro 使用流行的 github-slugger 包来标准化内容文件名。例如，Example.File.md 中的内容将在 /examplefile 提供服务。这确保了与许多常见平台的一致输出和 URL 兼容性。

但是，如果您需要自定义此标准化，现在可以在内容配置中将 generateId 选项传递给 Starlight 的 docsLoader()。以下示例避免了所有标准化，只是从内容文件中删除了文件扩展名。

import { defineCollection } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
  docs: defineCollection({
    loader: docsLoader({
      // Remove the `.md` or `.mdx` extension, but otherwise don’t process filenames.
      generateId: ({ entry }) => entry.split('.').slice(0, -1).join('.'),
    }),
    schema: docsSchema(),
  }),
};