Перейти до вмісту
Starlight

Ручне налаштування

Найшвидший спосіб створити новий сайт Starlight - це скористатися командою create astro як показано у Вступі. Якщо ви хочете додати Starlight до існуючого проекту Astro, цей посібник пояснить як.

Налаштування Starlight

Щоб слідувати цьому посібнику, вам знадобиться існуючий проєкт Astro.

Додайте інтеґрацію Starlight

Starlight є інтеґрацією Astro. Додайте її до свого сайту, виконавши команду astro add у кореневій директорії вашого проєкту:

sh npx astro add starlight

Це встановить необхідні залежності та додасть Starlight до масиву integrations у вашому конфіґураційному файлі Astro.

Налаштуйте інтеґрацію

Інтеґрація Starlight налаштовується у файлі astro.config.mjs.

Додайте title, щоб почати:

astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';


export default defineConfig({
  integrations: [
    starlight({
      title: 'Мій чудовий сайт документації',
    }),
  ],
});

Знайдіть усі доступні параметри в документації з налаштування Starlight.

Налаштуйте колекції контенту

Starlight побудований поверх колекцій вмісту в Astro, які налаштовуються в файлі src/content/config.ts.

Створіть або оновіть файл конфіґурації вмісту, додавши колекцію docs, яка використовує docsSchema від Starlight:

src/content/config.ts
import { defineCollection } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';


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

Додайте вміст

Starlight тепер налаштовано, і час додати трохи вмісту!

Створіть директорію src/content/docs/ і почніть з додавання файлу index.md. Це буде домашня сторінка вашого нового сайту:

src/content/docs/index.md
---
title: Моя документація
description: Дізнайтеся більше про мій проєкт на цьому сайті документації, створеному за допомогою Starlight.
---


Ласкаво просимо до мого проєкту!

Starlight використовує маршрутизацію на основі файлів, що означає, що кожен файл Markdown, MDX або Markdoc у src/content/docs/ стане сторінкою на вашому сайті. Метадані Frontmatter (поля title і description в наведеному вище прикладі) можуть змінити спосіб відображення кожної сторінки. Перегляньте всі доступні параметри в документації frontmatter.

Поради щодо існуючих сайтів

Якщо у вас вже є існуючий проект Astro, ви можете використовувати Starlight для швидкого додавання розділу документації на ваш сайт.

Використання Starlight з підшляхами

Щоб додати всі сторінки Starlight в підшлях, розмістіть весь свій вміст в підкаталозі src/content/docs/.

Наприклад, якщо Starlight сторінки повинні всі починатися з /guides/, додайте свій вміст в src/content/docs/guides/ каталог:

  • Каталогsrc/
    • Каталогcontent/
      • Каталогdocs/
        • Каталогguides/
          • guide.md
          • index.md
    • Каталогpages/
      • …
  • astro.config.mjs

У майбутньому ми плануємо краще підтримувати цей випадок, щоб уникнути необхідності в додатковій вкладеній директорії в src/content/docs/.

Використання Starlight з SSR

Щоб увімкнути SSR, дотримуйтесь посібника “Адаптери для рендерингу на вимогу” в документації Astro, щоб додати серверний адаптер до вашого проєкту Starlight.

Сторінки документації, згенеровані Starlight, попередньо рендеряться за замовчуванням незалежно від режиму виводу вашого проєкту. Щоб вимкнути попередній рендеринг ваших сторінок Starlight, встановіть параметр конфіґурації prerender у значення false.