Шаблон документации на базе SvelteKit, MDsveX и Tailwind CSS.
Создавайте брендированные сайты документации с автогенерируемой навигацией, поиском, подсветкой синтаксиса, тёмной темой и полной SEO-поддержкой.
npm install
npm run devСервер разработки запускается автоматически. Откройте локальный URL из терминала. Главная страница редиректит на /docs.
Файлы, которые нужно обновить сразу после клонирования шаблона:
| Приоритет | Файл | Что менять |
|---|---|---|
| 1 | apps/web/src/lib/config/site.ts |
Имя сайта, URL, описание, автор, ссылки GitHub/email, ключевые слова |
| 2 | apps/web/src/lib/config/branding.ts |
Имя бренда и пути к логотипам |
| 3 | apps/web/src/routes/layout.css |
Акцентный цвет (--accent в :root и .dark), базовый оттенок, радиус |
| 4 | apps/web/static/ |
Замените favicon.png, light_logo.png, dark_logo.png, og-image.jpg на свои |
| 5 | apps/web/static/site.webmanifest |
Имя приложения, описание, цвет темы |
| 6 | apps/web/src/app.html |
<html lang>, дефолтный <title> |
| 7 | package.json / apps/web/package.json |
Имя пакета, версия, описание |
| 8 | README.md |
Этот файл — замените на README своего проекта |
Весь контент документации находится в:
apps/web/src/lib/content/[N]Документация{docs}/
Директория использует систему имён с тремя уровнями:
| Префикс | Назначение | Пример |
|---|---|---|
[N] |
Секция (верхний уровень) | [N]Документация{docs} → URL: /docs |
[C] |
Категория (вложенная группа) | [C]Настройки{settings} → группирует страницы под заголовком в боковой панели |
[A] |
Страница (статья) | [A]Frontmatter{frontmatter}.svx → URL: /docs/settings/frontmatter |
- Создайте
.svxфайл внутри директории секции документации. - Используйте паттерн именования
[A]Заголовок{slug}.svx. - Добавьте frontmatter в начале файла:
---
title: Моя новая страница
description: Краткое описание для SEO и навигации.
---
# Моя новая страница
Здесь контент...-
Чтобы объединить страницы в категории, создайте подкаталог
[C]Название категории{slug}/и поместите.svxфайлы внутри него. -
Навигация, sitemap, поисковый индекс и оглавление генерируются автоматически — ручная конфигурация не требуется.
.svx— Markdown со встроенными компонентами Svelte (для большинства контента).svelte— Полноценный компонент Svelte (для интерактивных кастомных страниц)
Шаблон поставляется с самодокументирующимися страницами: frontmatter, форматирование, брендинг, система имён, кастомные страницы и предпросмотр компонентов. Откройте /docs после запуска dev-сервера или прочитайте исходники в:
apps/web/src/lib/content/[N]Документация{docs}/
Документация исходного проекта: https://opensophy.com/docs/opensophy-docs
- SvelteKit — фреймворк, SSR/SSG, маршрутизация
- MDsveX — Markdown с компонентами Svelte
- Tailwind CSS v4 — стилизация, тёмная тема через CSS-переменные
- Shiki — подсветка синтаксиса
- KaTeX — математические формулы
- carbon-icons-svelte — UI-иконки
| Команда | Описание |
|---|---|
npm run dev |
Запуск dev-сервера |
npm run build |
Сборка для продакшена (статический сайт) |
npm run preview |
Предпросмотр продакшен-сборки |
npm run check |
Тип-проверка через svelte-check |
npm run test |
Запуск unit-тестов (Vitest) |
npm run lint |
Линтинг через ESLint |
npm run format |
Форматирование через Prettier |
MIT