diff --git a/src/content/docs/en/tutorials/add-content-collections.mdx b/src/content/docs/en/tutorials/add-content-collections.mdx index dad3b123555ec..736da61491353 100644 --- a/src/content/docs/en/tutorials/add-content-collections.mdx +++ b/src/content/docs/en/tutorials/add-content-collections.mdx @@ -178,11 +178,15 @@ The steps below show you how to extend the final product of the Build a Blog tut }; ``` +6. In order for Astro to recognize your schema, quit the dev server (`CTRL + C`) and run the following command: [`npx astro sync`](/en/reference/cli-reference/#astro-sync). This will define the `astro:content` module for the Content Collections API. Restart the dev server to continue with the tutorial. + + + ### Generate pages from a collection -6. Create a page file called `src/pages/posts/[...slug].astro`. Your Markdown and MDX files no longer automatically become pages using Astro's file-based routing when they are inside a collection, so you must create a page responsible for generating each individual blog post. +7. Create a page file called `src/pages/posts/[...slug].astro`. Your Markdown and MDX files no longer automatically become pages using Astro's file-based routing when they are inside a collection, so you must create a page responsible for generating each individual blog post. -7. Add the following code to [query your collection](/en/guides/content-collections/#querying-collections) to make each blog post's slug and page content available to each page it will generate: +8. Add the following code to [query your collection](/en/guides/content-collections/#querying-collections) to make each blog post's slug and page content available to each page it will generate: ```astro title="src/pages/posts/[...slug].astro" --- @@ -201,7 +205,7 @@ The steps below show you how to extend the final product of the Build a Blog tut --- ``` -8. Render your post `` within the layout for Markdown pages. This allows you to specify a common layout for all of your posts. +9. Render your post `` within the layout for Markdown pages. This allows you to specify a common layout for all of your posts. ```astro title="src/pages/posts/[...slug].astro" ins={15-17} --- @@ -223,7 +227,7 @@ The steps below show you how to extend the final product of the Build a Blog tut ``` -9. Remove the `layout` definition in each individual post's frontmatter. Your content is now wrapped in a layout when rendered, and this property is no longer needed. +10. Remove the `layout` definition in each individual post's frontmatter. Your content is now wrapped in a layout when rendered, and this property is no longer needed. ```md title="src/content/posts/post-1.md" del={2} --- @@ -236,7 +240,7 @@ The steps below show you how to extend the final product of the Build a Blog tut ### Replace `Astro.glob()` with `getCollection()` -10. Anywhere you have a list of blog posts, like the tutorial's Blog page (`src/pages/blog.astro/`), you will need to replace `Astro.glob()` with [`getCollection()`](/en/reference/api-reference/#getcollection) as the way to fetch content and metadata from your Markdown files. +11. Anywhere you have a list of blog posts, like the tutorial's Blog page (`src/pages/blog.astro/`), you will need to replace `Astro.glob()` with [`getCollection()`](/en/reference/api-reference/#getcollection) as the way to fetch content and metadata from your Markdown files. ```astro title="src/pages/blog.astro" "post.data" "getCollection(\"posts\")" "/posts/${post.slug}/" del={7} ins={2,8} --- @@ -250,7 +254,7 @@ The steps below show you how to extend the final product of the Build a Blog tut --- ``` -11. You will also need to update references to the data returned for each `post`. You will now find your frontmatter values on the `data` property of each object. Also, when using collections each `post` object will have a page `slug`, not a full URL. +12. You will also need to update references to the data returned for each `post`. You will now find your frontmatter values on the `data` property of each object. Also, when using collections each `post` object will have a page `slug`, not a full URL. ```astro title="src/pages/blog.astro" "data" "/posts/$\{post.slug\}/" del={14} ins={15} --- @@ -274,7 +278,7 @@ The steps below show you how to extend the final product of the Build a Blog tut ``` -12. The tutorial blog project also dynamically generates a page for each tag using `src/pages/tags/[tag].astro` and displays a list of tags at `src/pages/tags/index.astro`. +13. The tutorial blog project also dynamically generates a page for each tag using `src/pages/tags/[tag].astro` and displays a list of tags at `src/pages/tags/index.astro`. Apply the same changes as above to these two files: @@ -339,7 +343,7 @@ The steps below show you how to extend the final product of the Build a Blog tut ### Update any frontmatter values to match your schema -13. If necessary, update any frontmatter values throughout your project, such as in your layout, that do not match your collections schema. +14. If necessary, update any frontmatter values throughout your project, such as in your layout, that do not match your collections schema. In the blog tutorial example, `pubDate` was a string. Now, according to the schema that defines types for the post frontmatter, `pubDate` will be a `Date` object. @@ -358,7 +362,7 @@ The steps below show you how to extend the final product of the Build a Blog tut ### Update RSS function -14. Lastly, the tutorial blog project includes an RSS feed. This function must also use `getCollection()` to return information from your blog posts. You will then generate the RSS items using the `data` object returned. +15. Lastly, the tutorial blog project includes an RSS feed. This function must also use `getCollection()` to return information from your blog posts. You will then generate the RSS items using the `data` object returned. ```js title="src/pages/rss.xml.js" del={2,11} ins={3,6,12-17} import rss from '@astrojs/rss';