diff --git a/src/content/docs/ru/guides/cms/index.mdx b/src/content/docs/ru/guides/cms/index.mdx new file mode 100644 index 0000000000000..3531372221d66 --- /dev/null +++ b/src/content/docs/ru/guides/cms/index.mdx @@ -0,0 +1,50 @@ +--- +title: Использование CMS с Astro +description: Как использовать CMS для добавления контента в Astro +sidebar: + label: Обзор CMS +i18nReady: true +--- +import CMSGuidesNav from '~/components/CMSGuidesNav.astro'; +import FeaturedCMSGuidesNav from '~/components/FeaturedCMSGuidesNav.astro'; +import ReadMore from '~/components/ReadMore.astro'; +import Badge from "~/components/Badge.astro" + +**Готовы подключить Headless CMS к вашему проекту Astro?** Следуйте одному из наших руководств для интеграции CMS. + +:::tip +Найдите [интеграции, поддерживаемые сообществом](https://astro.build/integrations/?search=cms) для подключения CMS к вашему проекту в нашем каталоге интеграций. +::: + +## Избранные CMS + + + +## Руководства по CMS + +Обратите внимание, что многие из этих страниц являются **заготовками**: это коллекции ресурсов, ожидающих вашего вклада! + + + +## Зачем использовать CMS? + +Система управления контентом позволяет создавать контент и управлять ресурсами за пределами вашего проекта Astro. + +Это открывает новые возможности для работы с контентом. Большинство CMS предоставляют визуальный редактор контента, возможность определять стандартные типы контента и способ совместной работы с другими. + +CMS может быть полезна для контента, который следует определённой структуре, часто предоставляя опыт, похожий на панель управления, и инструменты редактирования WYSIWYG. Вы можете использовать CMS для написания постов в блоге с помощью продвинутого текстового редактора CMS вместо Markdown-файлов. Или вы можете использовать CMS для управления списком товаров в интернет-магазине, сделав определённые поля обязательными, чтобы избежать неполных записей. + +Ваш проект Astro затем может получить контент из вашей CMS и отобразить его где угодно и как угодно на вашем сайте. + + +## Какие CMS хорошо работают с Astro? + +Поскольку Astro отвечает за _представление_ вашего контента, вам следует выбрать _headless_ CMS, например, из списка выше. Это означает, что CMS помогает вам писать контент, но не генерирует сайт для его отображения. Вместо этого вы получаете данные контента и используете их в своём проекте Astro. + +Некоторые headless CMS, например Storyblok, предоставляют [интеграцию Astro](/ru/guides/integrations/), которая помогает получать контент специально для Astro-сайта. Другие предоставляют JavaScript SDK — библиотеку, которую вы устанавливаете и используете для получения удалённого контента. + + Изучите [список из более чем 100 headless систем управления контентом](https://jamstack.org/headless-cms/) , где можно фильтровать по типу (например, на основе Git, через API) и лицензии (открытая или закрытая). + +## Можно ли использовать Astro без CMS? + +Да! Astro предоставляет встроенную поддержку [Markdown](/ru/guides/markdown-content/). diff --git a/src/content/docs/ru/guides/cms/statamic.mdx b/src/content/docs/ru/guides/cms/statamic.mdx new file mode 100644 index 0000000000000..11b343657f79e --- /dev/null +++ b/src/content/docs/ru/guides/cms/statamic.mdx @@ -0,0 +1,126 @@ +--- +title: Headless Statamic и Astro +description: Добавьте контент в проект Astro, используя Statamic в качестве CMS +sidebar: + label: Statamic +type: cms +stub: false +logo: statamic +i18nReady: true +--- +import Grid from '~/components/FluidGrid.astro' +import Card from '~/components/ShowcaseCard.astro' + +[Statamic](https://statamic.com/) — это современная файловая CMS. Она позволяет разработчикам легко создавать динамические веб-сайты и приложения, предоставляя редакторам контента интуитивно понятный и удобный интерфейс для управления контентом. + +## Интеграция с Astro + +Statamic поставляется со встроенными [REST API](https://statamic.dev/rest-api) и [GraphQL API](https://statamic.dev/graphql) для подключения ваших данных к Astro. + +### Предварительные требования + +Для начала вам понадобится следующее: + +1. REST API и GraphQL API доступны только в Pro-версии Statamic. Вы можете бесплатно попробовать Pro-версию на [локальном компьютере](https://statamic.dev/tips/how-to-enable-statamic-pro#trial-mode). +2. **Проект Astro** — если вам ещё нужен проект Astro, наше [руководство по установке](/ru/install-and-setup/) поможет вам быстро начать работу. +3. **Сайт на Statamic** — если вам нужен сайт на Statamic, [это руководство](https://statamic.dev/quick-start-guide) поможет вам начать. +Не забудьте [включить REST API](https://statamic.dev/rest-api#enable-the-api) или [GraphQL API](https://statamic.dev/graphql#enable-graphql), добавив `STATAMIC_API_ENABLED=true` или `STATAMIC_GRAPHQL_ENABLED=true` в файл `.env`, и включите необходимые ресурсы в конфигурационном файле API. + +:::caution +Все примеры предполагают, что на вашем сайте есть коллекция `posts` с чертежом под названием `post`, и этот чертёж имеет поле title (тип поля text) и content (тип поля markdown). +::: + +### Получение данных +:::caution +Если вы используете Statamic и Astro на локальном компьютере, не забудьте использовать `127.0.0.1` вместо `localhost` при получении данных через API. + +При запросе с сервера Astro `localhost` не обрабатывается правильно, как в браузере, и любой запрос к любому API завершится неудачей. +::: + +#### REST API + +Получите данные Statamic из URL REST API вашего сайта. По умолчанию это `https://[YOUR-SITE]/api/`. Затем вы можете отобразить свойства данных, используя директиву Astro `set:html={}`. + +Например, для отображения списка заголовков и их контента из выбранной [коллекции](https://statamic.dev/collections): + +```astro title="src/pages/index.astro" +--- +const res = await fetch("https://[YOUR-SITE]/api/collections/posts/entries?sort=-date") +const posts = await res.json() +--- +

Astro + Statamic 🚀

+{ + posts.map((post) => ( +

+

+ )) +} +``` + +#### GraphQL + +Получите данные Statamic с помощью URL GraphQL API вашего сайта. По умолчанию это `https://[YOUR-SITE]/graphql/`. Затем вы можете отобразить свойства данных, используя директиву Astro `set:html={}`. + +Например, для отображения списка заголовков и их контента из выбранной [коллекции](https://statamic.dev/collections): + +```astro title="src/pages/index.astro" +--- +const graphqlQuery = { + query: ` + query Entries($page: Int, $locale: String) { + entries( + collection: "posts" + sort: "date asc" + limit: 20 + page: $page + filter: { locale: $locale } + ) { + current_page + has_more_pages + data { + title + ... on Entry_Posts_Post { + content + } + } + } + } + `, + variables: { + page: page, + locale: locale, + }, +}; + +const res = await fetch("https://[YOUR-SITE]/graphql", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(graphqlQuery), +}) + +const { data } = await res.json(); +const entries = data?.entries; +--- +

Astro + Statamic 🚀

+{ + entries.data.map((post) => ( +

+

+ )) +} +``` + +### Публикация вашего сайта + +Для развёртывания сайта Astro посетите наши [руководства по развёртыванию](/ru/guides/deploy/) и следуйте инструкциям для выбранного вами хостинг-провайдера. + +## Ресурсы сообщества + +- [Как создать статический сайт, используя Statamic как headless CMS](https://buddy.works/guides/statamic-rest-api) +- [Реализация живых превью в headless Statamic с использованием Astro](https://maciekpalmowski.dev/implementing-live-previews-in-headless-statamic-when-using-astro/) + +## Темы + + + + diff --git a/src/content/docs/ru/guides/cms/wordpress.mdx b/src/content/docs/ru/guides/cms/wordpress.mdx new file mode 100644 index 0000000000000..e019d9faaac11 --- /dev/null +++ b/src/content/docs/ru/guides/cms/wordpress.mdx @@ -0,0 +1,222 @@ +--- +title: Headless WordPress и Astro +description: Добавьте контент в проект Astro, используя WordPress в качестве CMS +sidebar: + label: WordPress +type: cms +stub: false +logo: wordpress +i18nReady: true +--- +import { FileTree } from '@astrojs/starlight/components'; +import Grid from '~/components/FluidGrid.astro' +import Card from '~/components/ShowcaseCard.astro' +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + +[WordPress](https://wordpress.org/) — это система управления контентом, которая включает собственный фронтенд, но также может использоваться как headless CMS для предоставления контента вашему проекту Astro. + +## Интеграция с Astro + +WordPress поставляется со встроенным [WordPress REST API](https://developer.wordpress.org/rest-api/) для подключения данных WordPress к Astro. Вы также можете установить [WPGraphQL](https://wordpress.org/plugins/wp-graphql/) или [Gato GraphQL](https://wordpress.org/plugins/gatographql/) на свой сайт для использования GraphQL. + +### Предварительные требования + +Для начала вам понадобится следующее: + +1. **Проект Astro** — если у вас ещё нет проекта Astro, наше [руководство по установке](/ru/install-and-setup/) поможет вам быстро начать работу. +2. **Сайт на WordPress** — REST API вашего сайта находится по адресу `[YOUR_SITE]/wp-json/wp/v2/` и доступен по умолчанию на любом сайте WordPress. Также можно [установить WordPress в локальной среде](https://wordpress.org/support/article/installing-wordpress-on-your-own-computer/). + +### Настройка учётных данных + +Ваш WordPress REST API по умолчанию доступен для внешних запросов на получение данных без аутентификации. Это не позволяет пользователям изменять ваши данные или настройки сайта и позволяет использовать ваши данные в проекте Astro без каких-либо учётных данных. + +При необходимости вы можете [потребовать аутентификацию](https://developer.wordpress.org/rest-api/frequently-asked-questions/#require-authentication-for-all-requests). + +### Получение данных + +Получите данные WordPress через уникальный URL REST API вашего сайта и маршрут для вашего контента. (Для блога это обычно будет `posts`.) Затем вы можете отобразить свойства данных, используя директиву Astro `set:html={}`. + +Например, для отображения списка заголовков постов и их контента: + +```astro title="src/pages/index.astro" +--- +const res = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts"); +const posts = await res.json(); +--- +

Astro + WordPress 🚀

+{ + posts.map((post) => ( +

+

+ )) +} +``` + +WordPress REST API включает [глобальные параметры](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/), такие как `_fields` и `_embed`. + +Через этот API доступно большое количество данных, поэтому вы можете захотеть получать только определённые поля. Вы можете ограничить ответ, добавив параметр [`_fields`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_fields) к URL API, например: `[YOUR-SITE]/wp/v2/posts?_fields=author,id,excerpt,title,link` + +API также может возвращать контент, связанный с вашим постом, например ссылку на родительский пост или комментарии к посту. Вы можете добавить параметр [`_embed`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_embed) к URL API (например, `[YOUR-SITE]/wp/v2/posts?_embed`), чтобы указать серверу, что ответ должен включать эти встроенные ресурсы. + +## Создание блога с WordPress и Astro + +В этом примере данные получаются из публичного WordPress API [https://norian.studio/dinosaurs/](https://norian.studio/dinosaurs/). Этот сайт на WordPress хранит информацию об отдельных динозаврах по маршруту `dinos`, точно так же, как блог хранит отдельные посты по маршруту `posts`. + +В этом примере показано, как воспроизвести эту структуру сайта в Astro: страница индекса, которая перечисляет динозавров со ссылками на динамически генерируемые отдельные страницы динозавров. + +:::note +Чтобы использовать [Пользовательские типы записей (CPT)](https://learn.wordpress.org/lesson-plan/custom-post-types/) в вашем WordPress API (не только `post` и `page`), вам нужно [настроить их в панели управления WordPress](https://stackoverflow.com/questions/48536646/how-can-i-get-data-from-custom-post-type-using-wp-rest-api) или [добавить поддержку REST API для пользовательских типов контента](https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-rest-api-support-for-custom-content-types/) в WordPress. + +В этом примере данные получаются с WordPress-сайта, типы контента которого уже настроены и доступны через REST API. +::: + +### Отображение списка постов WordPress + +Страница `src/pages/index.astro` перечисляет каждого динозавра с описанием и ссылкой на его страницу. + + +- src/ + - pages/ + - **index.astro** + - dinos/ + - [slug].astro +- astro.config.mjs +- package.json + + +Получение через API возвращает объект, который включает свойства: + +- `title.rendered` — содержит HTML-рендеринг заголовка поста. +- `content.rendered` — содержит HTML-рендеринг контента поста. +- `slug` — содержит слаг поста. (Это даёт ссылку на динамически генерируемые отдельные страницы динозавров.) + +```astro title="/src/pages/index.astro" +--- +import Layout from "../layouts/Layout.astro"; + +let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos"); +let posts = await res.json(); +--- + +

+

Список динозавров

+ { + posts.map((post) => ( + + )) + } +
+ +``` + +### Использование WordPress API для генерации страниц + +Страница `src/pages/dinos/[slug].astro` [динамически генерирует страницу](/ru/guides/routing/#dynamic-routes) для каждого динозавра. + +```astro title="/src/pages/dinos/[slug].astro" +--- +import Layout from '../../layouts/Layout.astro'; + +const { slug } = Astro.params; + +let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`); +let [post] = await res.json(); + +// getStaticPaths() требуется для статических Astro-сайтов. +// При использовании SSR эта функция не нужна. +export async function getStaticPaths() { + let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos"); + let posts = await data.json(); + + return posts.map((post) => ({ + params: { slug: post.slug }, + props: { post: post }, + })); +} +--- + +
+

+ +

+ +``` + +### Возврат встроенных ресурсов + +Параметр запроса `_embed` указывает серверу возвращать связанные (встроенные) ресурсы. + +```astro title="src/pages/dinos/[slug].astro" /&_embed/ +--- +const { slug } = Astro.params; + +let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`); +let [post] = await res.json(); +--- +``` + +Возвращается свойство `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url`, которое можно использовать для отображения миниатюры на каждой странице динозавра. (Замените `medium` на нужный размер изображения.) + +```astro title="/src/pages/dinos/[slug].astro" {3} + +
+ +

+ +

+ +``` + +### Публикация вашего сайта + +Для развёртывания сайта посетите наши [руководства по развёртыванию](/ru/guides/deploy/) и следуйте инструкциям для выбранного вами хостинг-провайдера. + +## Ресурсы сообщества + +- [Создание веб-сайта на Astro с использованием WordPress в качестве headless CMS](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/) — Крис Бонгерс +- [Создание сайта на Astro + WordPress](https://www.youtube.com/watch?v=Jstqgklvfnc) — стрим Бена Холмса +- [Создание headless сайта на WordPress с Astro](https://developers.wpengine.com/blog/building-a-headless-wordpress-site-with-astro) — Джефф Эверхарт +- [Astro и WordPress как API](https://darko.io/posts/wp-as-an-api/) — Дарко Божиновски + +## Продакшен-сайты + +Следующие сайты используют Astro + WordPress в продакшене: + +- [Dinos!](https://wc-dinos.netlify.app/) — Аниндо Нил Датта — [исходный код на GitHub](https://github.com/leen-neel/astro-wordpress) + +## Темы + + + + + +## Ресурсы сообщества + + + + + + + + + + + + + + + + + + + + + +:::note[Хотите поделиться ресурсом?] +Если вы нашли (или создали!) полезное видео или статью об использовании headless WordPress с Astro, [добавьте его в этот список](https://github.com/withastro/docs/edit/main/src/content/docs/ru/guides/cms/wordpress.mdx)! +:::