Учебное пособие - Расширение с помощью коллекций контента
Коллекции контента - это мощный способ управления группами схожего контента, например, записями в блоге. Коллекции помогают упорядочить документы, проверить YAML frontmatter и обеспечить автоматическую безопасность типов TypeScript для всего контента (даже если вы сами не пишете на TypeScript).
Приготовьтесь…
- Переместить папку с записями блога в
src/content/
- Создать схему для определения frontmatter записей блога
- Использовать
getCollection()
для получения контента и метаданных записей блога
Предварительные условия
Заголовок раздела Предварительные условияВам понадобится существующий проект Astro с файлами Markdown или MDX в папке src/pages/
.
В этом уроке используется готовый проект Готовый проект учебника “Создание блога” для демонстрации конвертации блога в коллекции контента. Вы можете использовать эту кодовую базу локально или завершить руководство в браузере, отредактировав код руководства по блогу в StackBlitz.
Вместо этого вы можете выполнить эти шаги в своем собственном проекте Astro, но вам нужно будет скорректировать инструкции для вашей кодовой базы.
Мы рекомендуем использовать наш пример проекта для завершения этого краткого руководства. Затем вы сможете использовать полученные знания для создания коллекций контента в своем собственном проекте.
Код учебника “Создание блога”
Заголовок раздела Код учебника “Создание блога”Из вводного руководства по созданию блога вы узнали о встроенной файловой маршрутизации Astro: любой файл .astro
, .md
или .mdx
в папке src/pages/
автоматически становился страницей на вашем сайте.
Чтобы создать свой первый пост в блоге по адресу https://example.com/posts/post-1/
, вы создали папку /posts/
и добавили в нее файл post-1.md
. Затем вы добавляли новый файл в формате Markdown в эту папку каждый раз, когда хотели добавить новую запись в блог на свой сайт.
Страницы vs Коллекции
Заголовок раздела Страницы vs КоллекцииДаже при использовании коллекций контента вы все равно будете использовать папку src/pages/
для отдельных страниц, например, для страницы “Обо мне”. Но перемещение записей блога в специальную папку src/content/
позволит вам использовать более мощные и эффективные API для создания индекса записей блога и отображения отдельных записей блога.
В то же время вы получите более эффективное руководство и автодополнение в редакторе кода, поскольку у вас будет схема для определения общей структуры для каждого поста, которую Astro поможет вам реализовать. В своей схеме вы можете указать, когда требуются свойства frontmatter, например описание или автор, и какой тип данных должен быть у каждого свойства, например строка или массив. Это позволяет быстрее выявлять многие ошибки, а описания ошибок подскажут вам, в чем именно заключается проблема.
Подробнее о Коллекциях контента Astro читайте в нашем руководстве, а чтобы преобразовать базовый блог из src/pages/posts/
в src/content/posts/
, воспользуйтесь приведенными ниже инструкциями.
Проверьте ваши знания
Заголовок раздела Проверьте ваши знания-
Какой тип страниц вы, вероятно, хранили бы в
src/pages/
? -
Что не является преимуществом перемещения записей блога в коллекцию контента?
-
Коллекции контента используют TypeScript…
Расширение учебного пособия по созданию блога с помощью коллекций контента
Заголовок раздела Расширение учебного пособия по созданию блога с помощью коллекций контентаВ следующих шагах показано, как расширить конечный вариант учебного пособия по созданию блога, создав коллекцию контента для записей блога.
Обновление зависимостей
Заголовок раздела Обновление зависимостей-
Обновите Astro до последней версии и обновите все интеграции до последних версий, выполнив следующие команды в терминале:
Если вы используете свой собственный проект, то обязательно обновите все установленные зависимости. В примере учебника по ведению блога используется только интеграция с Preact.
-
В этом руководстве для блога используется
base
(наименее строгая) настройка TypeScript. Чтобы использовать коллекции контента, необходимо настроить TypeScript для коллекций контента либо с помощью настройкиstrict
илиstrictest
, либо путем добавления двух опций вtsconfig.json
.Чтобы использовать коллекции контента без написания TypeScript в остальной части примера, приведенного в учебнике, добавьте следующие две опции TypeScript в файл конфигурации:
Создайте коллекцию для записей в блоге
Заголовок раздела Создайте коллекцию для записей в блоге-
Создайте новую коллекцию (папку) под названием
src/content/posts/
. -
Переместите все существующие записи блога (файлы
.md
) из папкиsrc/pages/posts/
в эту новую коллекцию. -
Создайте файл
src/content/config.ts
, чтобы определить схему для вашейpostsCollection
. Для существующего кода учебника по блогам добавьте в файл следующее содержимое, чтобы определить все свойства frontmatter, используемые в записях блога: -
Чтобы Astro распознала вашу схему, выйдите из dev-сервера (
CTRL + C
) и выполните следующую команду:npx astro sync
. Это определит модульastro:content
для API коллекций содержимого. Перезапустите сервер dev, чтобы продолжить обучение.
Генерирование страниц из коллекции
Заголовок раздела Генерирование страниц из коллекции-
Создайте файл страницы с именем
src/pages/posts/[...slug].astro
. Ваши файлы Markdown и MDX больше не становятся страницами автоматически, используя файловую маршрутизацию Astro, когда они находятся внутри коллекции, поэтому вы должны создать страницу, отвечающую за генерацию каждой отдельной записи блога. -
Добавьте следующий код в запрос к коллекции, чтобы slug и содержимое страницы каждой записи блога были доступны для каждой страницы, которую она будет генерировать:
-
Оформите ваш пост
<Content />
в макете для страниц Markdown. Это позволяет задать общий макет для всех ваших постов. -
Удалите определение
layout
в frontmatter каждого отдельного поста. Теперь ваше содержимое будет обернуто в макет при рендеринге, и это свойство больше не нужно.
Замените Astro.glob()
на getCollection()
Заголовок раздела Замените Astro.glob() на getCollection()-
В любом месте, где у вас есть список записей блога, например на странице “Блог” учебника (
src/pages/blog.astro/
), вам нужно заменитьAstro.glob()
наgetCollection()
в качестве способа получения контента и метаданных из ваших файлов Markdown. -
Вам также нужно будет обновить ссылки на данные, возвращаемые для каждого
post
. Теперь вы найдете значения frontmatter в свойствеdata
каждого объекта. Кроме того, при использовании коллекций каждый объектpost
будет содержатьslug
страницы, а не полный URL. -
Проект обучающего блога также динамически генерирует страницу для каждого тега с помощью
src/pages/tags/[tag].astro
и отображает список тегов вsrc/pages/tags/index.astro
.Внесите в эти два файла те же изменения, что и выше:
- получите данные обо всех записях вашего блога, используя
getCollection("posts")
вместоAstro.glob()
- получите доступ ко всем значениям frontmatter, используя
data
вместоfrontmatter
- создайте URL страницы, добавив
slug поста к пути
/posts/`.
Теперь страница, генерирующая отдельные страницы тегов, стала:
Попробуйте сами - обновите запрос на странице индекса тегов
Заголовок раздела Попробуйте сами - обновите запрос на странице индекса теговИмпортируйте и используйте
getCollection
для получения тегов, использованных в записях блога на страницеsrc/pages/tags/index.astro
, следуя тем же шагам, что и выше.Покажите мне код.
- получите данные обо всех записях вашего блога, используя
Обновите все значения frontmatter, чтобы они соответствовали вашей схеме
Заголовок раздела Обновите все значения frontmatter, чтобы они соответствовали вашей схеме-
При необходимости обновите все значения frontmatter в проекте, например в макете, которые не соответствуют схеме коллекций.
В примере из учебника по блогам значение
pubDate
было строкой. Теперь, в соответствии со схемой, определяющей типы для frontmatter поста,pubDate
будет объектомDate
.Чтобы вывести дату в макете записи блога, преобразуйте ее в строку:
Обновление RSS
Заголовок раздела Обновление RSS-
Наконец, проект обучающего блога включает в себя RSS-канал. Эта функция также должна использовать
getCollection()
для возврата информации из записей вашего блога. Затем вы будете генерировать элементы RSS, используя возвращаемый объектdata
.
Полный пример учебника по блогам с использованием коллекций контента смотрите в ветке Коллекции контента репозитория учебника.
Learn