Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update add-content-collections.mdx #6272

Merged
merged 4 commits into from
Jan 17, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions src/content/docs/en/tutorials/add-content-collections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
---
Expand All @@ -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 `<Content />` within the layout for Markdown pages. This allows you to specify a common layout for all of your posts.
9. Render your post `<Content />` 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}
---
Expand All @@ -223,7 +227,7 @@ The steps below show you how to extend the final product of the Build a Blog tut
</MarkdownPostLayout>
```

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}
---
Expand All @@ -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}
---
Expand All @@ -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}
---
Expand All @@ -274,7 +278,7 @@ The steps below show you how to extend the final product of the Build a Blog tut
</BaseLayout>
```

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:

Expand Down Expand Up @@ -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.
Expand All @@ -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';
Expand Down
Loading