diff --git a/.changeset/lemon-months-carry.md b/.changeset/lemon-months-carry.md new file mode 100644 index 00000000000..5ba205f8bd8 --- /dev/null +++ b/.changeset/lemon-months-carry.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Updates Russian UI strings diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index b79cf4bafce..bdf806145c6 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -82,7 +82,7 @@ export default defineConfig({ 'pt-PT': 'Comece Aqui', ko: '여기서부터', tr: 'Buradan Başlayın', - ru: 'Начать отсюда', + ru: 'Первые шаги', hi: 'यहाँ से शुरू करे', uk: 'Почніть звідси', }, @@ -195,6 +195,7 @@ export default defineConfig({ fr: 'Ressources', 'pt-BR': 'Recursos', ja: 'リソース', + ru: 'Ресурсы', }, autogenerate: { directory: 'resources' }, }, diff --git a/docs/src/content/docs/ru/environmental-impact.md b/docs/src/content/docs/ru/environmental-impact.md index 85453305383..b8108a53673 100644 --- a/docs/src/content/docs/ru/environmental-impact.md +++ b/docs/src/content/docs/ru/environmental-impact.md @@ -8,7 +8,7 @@ description: Узнайте, как Starlight может помочь созда Расчет экологического воздействия веб-сайта включает в себя множество сложных факторов, но в данном руководстве перечислены несколько советов по снижению экологического следа вашего сайта с документацией. -Хорошая новость в том, что выбор Starlight - отличное начало. +Хорошая новость в том, что выбор Starlight — отличное начало. Согласно Website Carbon Calculator, этот сайт [чище, чем 99% протестированных веб-страниц][sl-carbon], производя 0,01 г CO₂ за каждое посещение страницы. @@ -17,13 +17,13 @@ description: Узнайте, как Starlight может помочь созда Чем больше данных передает веб-страница, тем больше энергетических ресурсов она требует. В апреле 2023 года, медианная веб-страница требовала от пользователя скачать более 2 000 КБ данных, согласно [данным из HTTP Archive][http]. -Starlight создает страницы легкими, настолько, насколько это возможно +Starlight создает страницы лёгкими, настолько, насколько это возможно Например, при первом посещении пользователь загрузит менее 50 КБ сжатых данных, что составляет всего 2,5% от медианного значения HTTP архива. При хорошей стратегии кэширования последующие навигации могут загружать всего 10 КБ. ### Изображения -Хоть Starlight и предлагает легкие страницы по-умолчанию, изображения, которые вы добавляете на страницы документации, могут быстро увеличивать вес вашей страницы. +Хоть Starlight и предлагает лёгкие страницы по умолчанию, изображения, которые вы добавляете на страницы документации, могут быстро увеличивать вес вашей страницы. Starlight использует [оптимизировацию ресурсов][assets] Astro для оптимизации локальных изображений в ваших файлах Markdown и MDX. ### UI компоненты @@ -31,13 +31,13 @@ Starlight использует [оптимизировацию ресурсов] Компоненты, на UI фреймворках, как React или Vue, могут легко добавлять большие объемы JavaScript на страницу. Поскольку Starlight основан на Astro, эти компоненты, по умолчанию **не загружают клиентский JavaScript** благодаря [Astro Островам][islands]. -### Кеширование +### Кэширование Кэширование управляет тем, как долго браузер хранит и повторно использует данные, которые он уже загрузил. Хорошая стратегия кэширования гарантирует, что пользователь получает новое содержание как можно быстрее, когда оно меняется, но также избегает бесполезной повторной загрузки одного и того же содержания снова и снова, когда оно не изменилось. -Самым распространенным способом настройки кэширования является использование [HTTP-заголовка `Cache-Control`][cache]. +Самым распространённым способом настройки кэширования является использование [HTTP-заголовка `Cache-Control`][cache]. При использовании Starlight вы можете установить длительное время кэширования для всего, что находится в каталоге `/_astro/`. Этот каталог содержит CSS, JavaScript и другие ресурсы, которые можно безопасно кэшировать навсегда, что позволяет снизить избыточные загрузки: @@ -60,7 +60,7 @@ Cache-Control: public, max-age=604800, immutable ## Потребление энергии -То, как реализована веб-страница может влиять на потребление энергии при ее запуске на устройстве пользователя. +То, как реализована веб-страница может влиять на потребление энергии при её запуске на устройстве пользователя. За счет минимального использования JavaScript, Starlight снижает объем вычислительных ресурсов, необходимых телефону, планшету или компьютеру пользователя для загрузки и отображения страниц. @@ -111,7 +111,7 @@ Cache-Control: public, max-age=604800, immutable | [Read the Docs][rtd-carbon] | 0.24g | | [GitBook][gb-carbon] | 0.71g | -Данные собраны 14 мая 2023 года. Чтобы увидеть актуальные цифры, перейдите по ссылке.. +Данные собраны 14 мая 2023 года. Чтобы увидеть актуальные цифры, перейдите по ссылке. [sl-carbon]: https://www.websitecarbon.com/website/starlight-astro-build-getting-started/ [vp-carbon]: https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/ @@ -136,10 +136,10 @@ Cache-Control: public, max-age=604800, immutable ### Статьи и выступления -- ["Построение более экологичного веба"](https://youtu.be/EfPoOt7T5lg), выступление Мишель Баркер -- ["Стратегии экологически устойчивый веб-разработки в организации"](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), статья Мишель Баркер -- ["Экологически устойчивый веб для каждого"](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), выступление Тома Гринвуда -- ["Как веб-контент может влиять на энергопотребление"](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), статья Бенджамина Пулена и Саймона Фрейзера. +- [Построение более экологичного веба](https://youtu.be/EfPoOt7T5lg), выступление Мишель Баркер +- [Стратегии устойчивого веб-развития в организации](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), статья Мишель Баркер +- [Экологически устойчивый веб для каждого](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), выступление Тома Гринвуда +- [Как веб-контент может влиять на энергопотребление](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), статья Бенджамина Пулена и Саймона Фрейзера. [sf]: https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/ [bbc]: https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think diff --git a/docs/src/content/docs/ru/getting-started.mdx b/docs/src/content/docs/ru/getting-started.mdx index 4338f271c18..8276d15b1b6 100644 --- a/docs/src/content/docs/ru/getting-started.mdx +++ b/docs/src/content/docs/ru/getting-started.mdx @@ -1,13 +1,17 @@ --- title: Введение -description: Узнайте, как начать создание вашего следующего сайта с документацией с помощью Starlight от Astro +description: Узнайте, как начать создание вашего следующего сайта с документацией с помощью Starlight от Astro. --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -## Создание нового проекта - Starlight — это полнофункциональная тема для документации, созданная на основе фреймворка [Astro](https://astro.build). +Это руководство поможет вам начать работу над новым проектом. +См. [инструкции по ручной настройке](/ru/manual-setup/), чтобы добавить Starlight в существующий проект Astro. + +## Быстрый старт + +### Создание нового проекта Вы можете создать новый проект на базе Astro + Starlight, используя следующую команду: @@ -15,7 +19,6 @@ Starlight — это полнофункциональная тема для до ```sh -# создать новый проект с помощью npm npm create astro@latest -- --template starlight ``` @@ -23,7 +26,6 @@ npm create astro@latest -- --template starlight ```sh -# создать новый проект с помощью pnpm pnpm create astro --template starlight ``` @@ -31,7 +33,6 @@ pnpm create astro --template starlight ```sh -# создать новый проект с помощью yarn yarn create astro --template starlight ``` @@ -45,48 +46,58 @@ yarn create astro --template starlight [откройте шаблон на StackBlitz](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics). ::: -## Создание контента с Starlight +### Запуск сервера разработки -Starlight готов к созданию нового контента или к интеграции уже существующих файлов! +При локальной работе [сервер разработки Astro](https://docs.astro.build/ru/reference/cli-reference/#astro-dev) позволяет предварительно просмотреть вашу работу и автоматически обновляет ваш браузер при внесении изменений. -### Форматы файлов +Внутри каталога вашего проекта выполните следующую команду, чтобы запустить сервер разработки: -Starlight поддерживает создание контента в форматах Markdown и MDX. (Вы можете добавить поддержку Markdoc, установив экспериментальную [интеграцию Astro Markdoc](https://docs.astro.build/ru/guides/integrations-guide/markdoc/).) + + -### Добавить страницы +```sh +npm run dev +``` -Автоматически добавляйте новые страницы на ваш сайт, создавая файлы `.md` или `.mdx` в директории `src/content/docs/`. -Добавляйте подпапки для организации ваших файлов и создания множественных сегментов пути: + + +```sh +pnpm dev ``` -src/content/docs/hello-world.md => ваш-сайт.com/hello-world -src/content/docs/guides/faq.md => ваш-сайт.com/guides/faq + + + + +```sh +yarn dev ``` -### Типобезопасные метаданные + + + +На ваш терминал будет отправлено сообщение с URL-адресом вашего локального предварительного просмотра. +Откройте этот URL-адрес, чтобы начать просмотр вашего сайта. -Все страницы Starlight используют настраиваемый [общий набор свойств метаданных](/ru/reference/frontmatter/) для контроля отображения страницы: +### Добавление контента -```md ---- -title: Привет, мир! -description: Это страница на моем сайте, работающем на Starlight ---- -``` +Starlight готов к созданию нового контента или к интеграции уже существующих файлов! -Если вы что-то забудете, Starlight сообщит вам об этом +Добавляйте новые страницы на свой сайт, создавая файлы Markdown в каталоге `src/content/docs/`. -## Развертывание вашего сайта на Starlight +Подробнее о файловой маршрутизации и поддержке файлов MDX и Markdoc читайте в руководстве [Страницы](/ru/guides/pages/). -После того как вы создали и настроили свой сайт на Starlight, вы можете развернуть его на веб-сервере или -платформе хостинга по вашему выбору, включая Netlify, Vercel, GitHub Pages и так далее. +### Следующие шаги -[Узнайте о развертывании сайта на Astro из документации Astro.](https://docs.astro.build/ru/guides/deploy/) +- **Настройка:** Узнайте об общих опциях в главе [Настройка Starlight](/ru/guides/customization/). +- **Навигация.** Настройте боковую панель с помощью руководства [Навигация по боковой панели](/ru/guides/sidebar/). +- **Компоненты.** Узнайте о встроенных карточках, вкладках и многом другом в руководстве [Компоненты](/ru/guides/components/). +- **Развёртывание.** Опубликуйте свою работу с помощью руководства [Развёртывание вашего сайта](https://docs.astro.build/ru/guides/deploy/) в документации Astro. ## Обновление Starlight :::tip -Поскольку Starlight еще в beta, будут частые обновления и улучшения. +Поскольку Starlight ещё в статусе beta, будут частые обновления и улучшения. Не забывайте регулярно обновлять Starlight! ::: @@ -96,24 +107,21 @@ Starlight является интеграцией Astro и обновляетс ```sh -# Обновление Starlight с npm -npm install @astrojs/starlight@latest +npx @astrojs/upgrade ``` ```sh -# Обновление Starlight с pnpm -pnpm upgrade @astrojs/starlight --latest +pnpm dlx @astrojs/upgrade ``` ```sh -# Обновление Starlight с yarn -yarn upgrade @astrojs/starlight --latest +yarn dlx @astrojs/upgrade ``` @@ -124,14 +132,11 @@ yarn upgrade @astrojs/starlight --latest ## Устранение проблем с Starlight -Информация о [конфигурации проекта Starlight](/ru/reference/configuration/) -и [конфигурации метаданных отдельной страницы](/ru/reference/frontmatter/) доступна в разделе Справочник этого сайта. -Используйте эти страницы, чтобы убедиться, что ваш сайт на Starlight настроен и работает корректно. - -Смотрите пополняющийся список руководств в боковой панели для помощи в добавлении контента и настройке вашего сайта на Starlight. +Используйте справочные страницы [конфигурация проекта](/ru/reference/configuration/) и [конфигурация метаданных отдельной страницы](/ru/reference/frontmatter/), чтобы убедиться, что ваш сайт Starlight настроен и работает правильно. +См. руководства на боковой панели, чтобы получить помощь в добавлении контента и настройке вашего сайта Starlight. Если вы не можете найти ответ в этой документации, пожалуйста, посетите [полную документацию Astro](https://docs.astro.build/ru/). -Ваш вопрос может быть решен узнав как в целом работает Astro под темой Starlight. +На ваш вопрос можно ответить, если вы поймете, как работает Astro в целом в рамках темы Starlight. Вы также можете узнать про любые известные [проблемы Starlight на GitHub](https://github.com/withastro/starlight/issues) и получить помощь в [Discord Astro](https://astro.build/chat/) от нашего активного, дружелюбного сообщества! diff --git a/docs/src/content/docs/ru/guides/authoring-content.md b/docs/src/content/docs/ru/guides/authoring-content.md index 3d700ae22d0..a389ef63f38 100644 --- a/docs/src/content/docs/ru/guides/authoring-content.md +++ b/docs/src/content/docs/ru/guides/authoring-content.md @@ -1,20 +1,34 @@ --- title: Создание контента в Markdown -description: Синтаксис Markdown, поддерживаемого Starlight. +description: Обзор синтаксиса Markdown, который поддерживается в Starlight. --- -Starlight поддерживает весь синтаксис [Markdown](https://daringfireball.net/projects/markdown/) в файлах с расширением `.md`, -а также синтаксис [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) для определения метаданных, таких как заголовок и описание. +Starlight поддерживает весь синтаксис [Markdown](https://daringfireball.net/projects/markdown/) в файлах с расширением `.md`, а также синтаксис [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) для определения метаданных, таких как заголовок и описание. -Пожалуйста, обратитесь к [документации MDX](https://mdxjs.com/docs/what-is-mdx/#markdown) или [документации Markdoc](https://markdoc.dev/docs/syntax), -если вы используете эти форматы файлов, так как синтаксисы могут различаться от Markdown. +Пожалуйста, обратитесь к [документации MDX](https://mdxjs.com/docs/what-is-mdx/#markdown) или [документации Markdoc](https://markdoc.dev/docs/syntax), если вы используете эти форматы файлов, поскольку поддержка и использование Markdown могут отличаться. -## Форматирование текста +## Метаданные + +Вы можете настроить отдельные страницы в Starlight, установив значения в их заглавной части. +Метаданные устанавливаются в верхней части ваших файлов между разделителями `---`: + +```md title="src/content/docs/example.md" +--- +title: Заголовок страницы +--- + +Содержимое страницы следует за вторым `---`. +``` -Текст может быть **жирным**, _курсивом_ или ~~зачеркнутым~~. +Каждая страница должна включать хотя бы заголовок. +См. [ссылку на метаданные](/ru/reference/frontmatter/) для получения информации обо всех доступных полях и о том, как добавлять настраиваемые поля. + +## Встроенные стили + +Текст может быть **жирным**, _курсивом_ или ~~зачёркнутым~~. ```md -Текст может быть **жирным**, _курсивом_ или ~~зачеркнутым~~. +Текст может быть **жирным**, _курсивом_ или ~~зачёркнутым~~. ``` Вы можете [ссылаться на другую страницу](/ru/getting-started/). @@ -31,18 +45,17 @@ Starlight поддерживает весь синтаксис [Markdown](https: ## Изображения -Изображения в Starlight используют [встроенную оптимизацию ресурсов в Astro](https://docs.astro.build/ru/guides/assets/). +Изображения в Starlight используют [встроенную оптимизацию ресурсов Astro](https://docs.astro.build/ru/guides/assets/). -Markdown и MDX поддерживают синтаксис Markdown для отображения изображений, -который включает альтернативный текст для экранных читателей и вспомогательных технологий. +Markdown и MDX поддерживают синтаксис Markdown для отображения изображений, который включает альтернативный текст для экранных читателей и вспомогательных технологий. -![Иллюстрация планет и звезд с надписью "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) +![Иллюстрация планет и звёзд с надписью "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) ```md -![Иллюстрация планет и звезд с надписью "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) +![Иллюстрация планет и звёзд с надписью "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) ``` -Также поддерживаются относительные пути к изображениям, хранящиеся локально в вашем проекте. +Относительные пути к изображениям также поддерживаются для изображений, хранящихся локально в вашем проекте. ```md // src/content/docs/page-1.md @@ -52,14 +65,11 @@ Markdown и MDX поддерживают синтаксис Markdown для от ## Заголовки -Вы можете структурировать контент, используя заголовки. -Заголовки в Markdown обозначаются количеством символов `#` в начале строки. +Вы можете структурировать контент, используя заголовки. Заголовки в Markdown обозначаются количеством символов `#` в начале строки. ### Как структурировать контент страницы -Starlight настроен так, чтобы автоматически использовать заголовок вашей страницы в качестве заголовка верхнего -уровня и включать заголовок "Обзор" в начале оглавления каждой страницы. Мы рекомендуем начинать каждую страницу -с обычного текстового содержания абзаца и использовать заголовки на странице от `

` и ниже: +Starlight настроен так, чтобы автоматически использовать заголовок вашей страницы в качестве заголовка верхнего уровня и включать заголовок «Обзор» в начале оглавления каждой страницы. Мы рекомендуем начинать каждую страницу с обычного текстового содержания абзаца и использовать заголовки на странице от `

` и ниже: ```md --- @@ -76,8 +86,7 @@ description: Как использовать Markdown в Starlight ### Автоматические якорные ссылки для заголовков -Использование заголовков в Markdown автоматически создает якорные ссылки, -позволяя вам ссылаться на определенные разделы вашей страницы: +Использование заголовков в Markdown автоматически создает якорные ссылки, позволяя вам ссылаться на определённые разделы вашей страницы: ```md --- @@ -87,29 +96,29 @@ description: Как использовать встроенные в Starlight ## Введение -Я могу создать ссылку на [заключение](#conclusion) ниже на этой же странице. +Я могу создать ссылку на [заключение](#заключение) ниже на этой же странице. ## Заключение -`https://my-site.com/page1/#introduction` навигирует непосредственно к разделу "Введение" на моей странице. +`https://my-site.com/page1/#введение` переходит непосредственно к моему Введению. ``` Заголовки уровня 2 (`

`) и уровня 3 (`

`) автоматически появятся в оглавлении страницы. +Узнайте больше о том, как Astro обрабатывает идентификаторы заголовков, в [документации Astro](https://docs.astro.build/ru/guides/markdown-content/#%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%8B-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2) + ## Вставки -Вставки, либо "предостережения" или "вызовы", полезны для отображения дополнительной информации рядом с основным контентом страницы. +Вставки полезны для отображения дополнительной информации рядом с основным контентом страницы. -Starlight предоставляет специальный синтаксис Markdown для отображения вставок. -Вставки должны быть обернуты парой тройных двоеточий `:::` и могут иметь тип `note`, `tip`, `caution` или `danger`. +Starlight предоставляет специальный синтаксис Markdown для отображения вставок. Вставки должны быть обернуты парой тройных двоеточий `:::` и могут иметь тип `note`, `tip`, `caution` или `danger`. Вы можете указывать любые типы контента Markdown внутри вставок, но вставки лучше всего подходят для коротких и лаконичных блоков информации. -### Вставка "Заметка" +### Вставка «Заметка» :::note -Starlight - это инструмент для создания сайтов с документацией, -построенный с использованием [Astro](https://astro.build/). Вы можете начать создавать запустив команду: +Starlight — это инструмент для создания сайтов с документацией, построенный с использованием [Astro](https://astro.build/ru/). Вы можете начать с этой команды: ```sh npm create astro@latest -- --template starlight @@ -119,8 +128,7 @@ npm create astro@latest -- --template starlight ````md :::note -Starlight - это инструмент для создания сайтов с документацией, -построенный с использованием [Astro](https://astro.build/). Вы можете начать создавать запустив команду: +Starlight — это инструмент для создания сайтов с документацией, построенный с использованием [Astro](https://astro.build/ru/). Вы можете начать с этой команды: ```sh npm create astro@latest -- --template starlight @@ -131,21 +139,21 @@ npm create astro@latest -- --template starlight ### Настраиваемые заголовки вставок -Вы можете указать свой заголовок вставки в квадратных скобках после типа вставки, например, `:::tip[Знали ли вы?]`. +Вы можете указать свой заголовок вставки в квадратных скобках после типа вставки, например, `:::tip[Небольшой совет]`. -:::tip -Astro позволяет создавать быстрые сайты с помощью ["архитектуры островов"](https://docs.astro.build/ru/concepts/islands/) +:::tip[Небольшой совет] +Astro позволяет создавать быстрые сайты с помощью [архитектуры островов](https://docs.astro.build/ru/concepts/islands/) ::: ```md -:::tip -Astro позволяет создавать быстрые сайты с помощью ["архитектуры островов"](https://docs.astro.build/ru/concepts/islands/) +:::tip[Небольшой совет] +Astro позволяет создавать быстрые сайты с помощью [архитектуры островов](https://docs.astro.build/ru/concepts/islands/) ::: ``` -### Больше типов вставок +### Другие типы вставок -Вставки "Caution" и "danger" полезны для привлечения внимания пользователя к деталям, которые могут сбивать с толку. +Вставки «Caution» и «danger» полезны для привлечения внимания пользователя к деталям, которые могут сбивать с толку. Если вы часто используете их, это может быть признаком того, что может быть нужно пересмотреть то, что вы документируете. :::caution @@ -155,7 +163,7 @@ Astro позволяет создавать быстрые сайты с пом :::danger Ваши пользователи могут быть более продуктивными и находить ваш продукт более простым в использовании благодаря полезным функциям Starlight. -- Четкая навигация +- Чёткая навигация - Цветовая тема, настраиваемая пользователем - [Поддержка i18n](/ru/guides/i18n) @@ -169,7 +177,7 @@ Astro позволяет создавать быстрые сайты с пом :::danger Ваши пользователи могут быть более продуктивными и находить ваш продукт более простым в использовании благодаря полезным функциям Starlight. -- Четкая навигация +- Чёткая навигация - Цветовая тема, настраиваемая пользователем - [Поддержка i18n](/ru/guides/i18n) @@ -190,8 +198,7 @@ Astro позволяет создавать быстрые сайты с пом ## Блоки кода -Блок кода обозначается блоком с тремя обратными апострофами ``` в начале и в конце. -Вы можете указать язык программирования после открывающих апострофов. +Блок кода обозначается блоком с тремя обратными апострофами ``` в начале и в конце. Вы можете указать язык программирования после открывающих апострофов. ```js // Javascript код с подсветкой синтаксиса. @@ -211,11 +218,153 @@ var fun = function lang(l) { ``` ```` -```md -Длинные блоки кода в одну строку не должны переноситься. Они должны прокручиваться горизонтально, если они слишком длинные. Эта строка должна быть достаточно длинной, чтобы продемонстрировать это. -``` +### Возможности Expressive Code + +Starlight использует [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) для расширения возможностей форматирования блоков кода. +Текстовые маркеры и плагины оконных рамок Expressive Code включены по умолчанию. +Рендеринг блоков кода можно настроить с помощью [параметра конфигурации `expressiveCode`](/ru/reference/configuration/#expressivecode) Starlight. + +#### Текстовые маркеры + +Вы можете выделить определённые строки или части блоков кода с помощью [текстовых маркеров Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#usage-in-markdown--mdx-documents) в первой строке вашего блока кода. +Используйте фигурные скобки (`{ }`), чтобы выделить целые строки, и кавычки, чтобы выделить строки текста. + +Существует три стиля выделения: нейтральный для привлечения внимания к коду, зелёный для обозначения вставленного кода и красный для обозначения удалённого кода. +И текст, и целые строки можно пометить с помощью маркера по умолчанию или в сочетании с `ins=` и `del=` для получения желаемого выделения. + +Expressive Code предоставляет несколько вариантов настройки внешнего вида примеров кода. +Многие из них можно комбинировать для получения наглядных примеров кода. +Ознакомьтесь с [документацией Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md), чтобы узнать о расширенных возможностях. доступный. +Некоторые из наиболее распространённых примеров показаны ниже: + +- [Пометка целых строк и диапазонов строк с помощью маркера `{ }`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges): + + ```js {2-3} + function demo() { + // Эта строка (#2) и следующая выделены + return 'Это строка №3 этого фрагмента.'; + } + ``` + + ````md + ```js {2-3} + function demo() { + // Эта строка (#2) и следующая выделены + return 'Это строка №3 этого фрагмента.'; + } + ``` + ```` + +- [Пометка выделенного текста с помощью маркера `" "` или регулярных выражений](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines): + + ```js "Отдельные термины" /даже.*выражения/ + // Отдельные термины также могут быть выделены + function demo() { + return 'Поддерживаются даже регулярные выражения'; + } + ``` + + ````md + ```js "Отдельные термины" /даже.*выражения/ + // Отдельные термины также могут быть выделены + function demo() { + return 'Поддерживаются даже регулярные выражения'; + } + ``` + ```` + +- [Пометка текста или строк как вставленных или удалённых с помощью `ins` или `del`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#selecting-marker-types-mark-ins-del): + + ```js "return true;" ins="вставленные" del="удалённые" + function demo() { + console.log('Это вставленные и удалённые типы маркеров'); + // Оператор return использует тип маркера по умолчанию + return true; + } + ``` + + ````md + ```js "return true;" ins="вставленные" del="удалённые" + function demo() { + console.log('Это вставленные и удалённые типы маркеров'); + // Оператор return использует тип маркера по умолчанию + return true; + } + ``` + ```` + +- [Объединение подсветки синтаксиса с синтаксисом типа `diff`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#combining-syntax-highlighting-with-diff-like-syntax): + + ```diff lang="js" + function thisIsJavaScript() { + // Весь этот блок выделяется как JavaScript, + // и мы можем добавить к нему маркеры различий! + - console.log('Старый код, который нужно удалить') + + console.log('Новый и блестящий код!') + } + ``` + + ````md + ```diff lang="js" + function thisIsJavaScript() { + // Весь этот блок выделяется как JavaScript, + // и мы можем добавить к нему маркеры различий! + - console.log('Старый код, который нужно удалить') + + console.log('Новый и блестящий код!') + } + ``` + ```` + +#### Рамки и заголовки + +Блоки кода могут отображаться внутри оконного фрейма. +Рамка, похожая на окно терминала, будет использоваться для языков сценариев оболочки (например, `bash` или `sh`). +Другие языки отображаются внутри рамки в стиле редактора кода, если они включают заголовок. + +Необязательный заголовок блока кода может быть установлен либо с помощью атрибута `title="..."` после открывающих обратных кавычек блока кода и идентификатора языка, либо с помощью комментария к имени файла в первых строках кода. + +- [Добавление вкладки имени файла с помощью комментария](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) + + ```js + // my-test-file.js + console.log('Привет, мир!'); + ``` + + ````md + ```js + // my-test-file.js + console.log('Привет, мир!'); + ``` + ```` + +- [Добавление заголовка в окне терминала](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) + + ```bash title="Установка зависимостей…" + npm install + ``` + + ````md + ```bash title="Установка зависимостей…" + npm install + ``` + ```` + +- [Отключение оконных рамок с помощью `frame="none"`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#overriding-frame-types) + + ```bash frame="none" + echo "Это не отображается как терминал, несмотря на использование языка bash" + ``` + + ````md + ```bash frame="none" + echo "Это не отображается как терминал, несмотря на использование языка bash" + ``` + ```` ## Другие возможности Markdown -Starlight поддерживает все синтаксические возможности Markdown, такие как списки и таблицы. -Посмотрите [шпаргалку по Markdown от The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) для изучения всех возможностей синтаксиса Markdown. +Starlight поддерживает все синтаксические возможности Markdown, такие как списки и таблицы. Посмотрите [шпаргалку по Markdown от The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) для изучения всех возможностей синтаксиса Markdown. + +## Расширенная конфигурация Markdown и MDX + +Starlight использует Markdown и рендерер MDX от Astro, основанный на `remark` и `rehype`. Вы можете добавить поддержку пользовательского синтаксиса и поведения, добавив `remarkPlugins` или `rehypePlugins` в свой файл конфигурации Astro. Дополнительную информацию см. в разделе [Настройка Markdown и MDX](https://docs.astro.build/ru/guides/markdown-content/#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-markdown-%D0%B8-mdx) в документации Astro. diff --git a/docs/src/content/docs/ru/guides/components.mdx b/docs/src/content/docs/ru/guides/components.mdx index 249e1485070..cb841c5cd50 100644 --- a/docs/src/content/docs/ru/guides/components.mdx +++ b/docs/src/content/docs/ru/guides/components.mdx @@ -3,21 +3,21 @@ title: Компоненты description: Использование компонентов в MDX со Starlight. --- -Компоненты позволяют вам легко повторно использовать фрагменты UI или стилизации. +Компоненты позволяют легко и последовательно переиспользовать часть пользовательского интерфейса или стиля. Примерами могут служить ссылочные карточки или встроенные видео YouTube. Starlight поддерживает использование компонентов в файлах [MDX](https://mdxjs.com/) и предоставляет некоторые общие компоненты для вашего использования. [Узнайте больше о создании компонентов в документации Astro](https://docs.astro.build/ru/core-concepts/astro-components/). -## Использование компонент +## Использование компонента Вы можете использовать компонент, импортировав его в ваш файл MDX, а затем отобразив его как тег JSX. Они выглядят как HTML-теги, но начинаются с заглавной буквы, соответствующей имени в вашем операторе `import`: ```mdx --- -# src/content/docs/index.mdx -title: Добро пожаловать на мою документацию +# src/content/docs/example.mdx +title: Добро пожаловать в мою документацию --- import SomeComponent from '../../components/SomeComponent.astro'; @@ -26,21 +26,19 @@ import AnotherComponent from '../../components/AnotherComponent.astro'; - Компоненты могут содержать **вложенный контент**. + Компоненты могут содержать **вложенное содержимое**. ``` -Поскольку Starlight работает на базе Astro, вы можете использовать компоненты, -созданные на любом [поддерживаемом UI-фреймворке (React, Preact, Svelte, Vue, Solid, Lit и Alpine)](https://docs.astro.build/en/core-concepts/framework-components/) -в ваших файлах MDX. -Узнайте больше о [использовании компонентов в MDX](https://docs.astro.build/ru/guides/markdown-content/#using-components-in-mdx) в документации Astro. +Поскольку Starlight работает на базе Astro, вы можете использовать в своих файлах MDX любые компоненты, созданные на [поддерживаемом UI-фреймворке (React, Preact, Svelte, Vue, Solid, Lit и Alpine)](https://docs.astro.build/ru/core-concepts/framework-components/). +Узнайте больше об [использовании компонентов в MDX](https://docs.astro.build/ru/guides/markdown-content/#использование-компонентов-в-mdx) в документации Astro. ### Совместимость со стилями Starlight Starlight применяет стандартные стили к вашему содержимому в формате Markdown, например, добавляет отступ между элементами. Если эти стили конфликтуют с внешним видом вашего компонента, установите класс `not-content` для вашего компонента, чтобы отключить их. -```astro +```astro 'class="not-content"' --- // src/components/Example.astro --- @@ -61,21 +59,32 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'; Вы можете отобразить интерфейс с вкладками, используя компоненты `` и ``. Каждый компонент `` должен иметь `label` для отображения пользователям. +Используйте дополнительный атрибут `icon`, чтобы включить один из [встроенных значков Starlight](#все-иконки) рядом с меткой. ```mdx +# src/content/docs/example.mdx + import { Tabs, TabItem } from '@astrojs/starlight/components'; - Сириус, Вега, Бетельгейзе - Ио, Европа, Ганимед + + Сириус, Вега, Бетельгейзе + + + Ио, Европа, Ганимед + ``` -Вышеуказанный код генерирует следующие вкладки на странице: +Вышеуказанный код сформирует следующие вкладки: - Сириус, Вега, Бетельгейзе - Ио, Европа, Ганимед + + Сириус, Вега, Бетельгейзе + + + Ио, Европа, Ганимед + ### Карточки @@ -85,15 +94,17 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; Вы можете отображать контент в блоке, со стилями Starlight, используя компонент ``. Оберните несколько карточек в компонент ``, чтобы отображать карточки рядом, когда есть достаточно места. -`` требует `title` и может дополнительно включать атрибут `icon`, установленный как название [одного из встроенных иконок Starlight](#все-иконки). +`` требует `title` и может дополнительно включать атрибут `icon`, установленный как название [одной из встроенных иконок Starlight](#все-иконки). ```mdx +# src/content/docs/example.mdx + import { Card, CardGrid } from '@astrojs/starlight/components'; Интересный контент, который вы хотите подсветить. - + Сириус, Вега, Бетельгейзе @@ -102,12 +113,12 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; ``` -Вышеуказанный код генерирует следующее на странице: +Вышеуказанный код сформирует следующий HTML: Интересный контент, который вы хотите подсветить. - + Сириус, Вега, Бетельгейзе @@ -117,7 +128,7 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; :::tip Используйте сетку карточек на вашей домашней странице для отображения ключевых функций вашего проекта. -Добавьте атрибут `stagger`, чтобы сдвинуть вторую колонку карточек по вертикали и добавить визуальный интерес: +Добавьте атрибут `stagger`, чтобы сместить вторую колонку карточек по вертикали и добавить визуальный интерес: ```astro @@ -131,12 +142,13 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; Используйте компонент `` для создания заметных ссылок на разные страницы. -`` требует атрибута `title` и атрибута [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). -По желанию вы можете добавить краткое `description` или другие атрибуты ссылки, такие как `target`. +`` требует атрибута `title` и атрибута [`href`](https://developer.mozilla.org/ru/docs/Web/HTML/Element/a#href). По желанию вы можете добавить краткое `description` или другие атрибуты ссылки, такие как `target`. Группируйте несколько компонентов `` в ``, чтобы отображать карточки рядом, когда есть достаточно места. ```mdx +# src/content/docs/example.mdx + import { LinkCard, CardGrid } from '@astrojs/starlight/components'; - + ``` -Вышеуказанный код генерирует следующее на странице: +Вышеуказанный код сформирует следующий HTML: import { LinkCard } from '@astrojs/starlight/components'; @@ -165,13 +174,200 @@ import { LinkCard } from '@astrojs/starlight/components'; /> - + +### Вставки + +Вставки полезны для отображения второстепенной информации рядом с основным содержанием страницы. + +У `