# Astro Crash Course #9 - Content Collections (with Markdown) ## Метаданные - **Канал:** Net Ninja - **YouTube:** https://www.youtube.com/watch?v=T9PQ05F9GEk - **Дата:** 09.04.2026 - **Длительность:** 5:10 - **Просмотры:** 1,823 - **Источник:** https://ekstraktznaniy.ru/video/49648 ## Описание In this Astro tutorial series, you'll learn how to use the Astro web framework to make a content-driven website. You'll also learn how to add React components to the site, and deploy the finished application to Netlify. 🍿👇 Get early access to the whole course on NetNinja.dev https://netninja.dev/p/astro-crash-course 🔥👇 Get access to ALL Masterclasses & premium courses with a Net Ninja Pro membership: https://netninja.dev/p/net-ninja-pro/#prosignup 🔗👇 Course files on GitHub: https://github.com/iamshaunjp/Astro-Crash-Course 🔗👇 Astro Docs: https://docs.astro.build/en/getting-started/ ## Транскрипт ### Segment 1 (00:00 - 05:00) [] All right, my friends. In the last lesson we saw how to define a content collection where the data source was a JSON file. But I think for something like a book review site, a markdown file for each review would be better suited rather than trying to stuff a load of review content into a single JSON file because eventually each book is going to have its own page with a lot of content on it. And in a markdown file, we can structure that content with things like headings, lists, line breaks, quotations, and so on. So, in this lesson, we're going to restructure the collections we defined so that it queries markdown files instead of the single JSON file. And the good thing is we won't need to update any of the code in the components where we use the collection because Astro unifies how we use collections no matter where the data source is behind the collections API. So, it doesn't matter that we'll be using markdown files instead of JSON. The way we access the collection from a component remains the same. And the only thing we need to do is really update where we define the collection itself. So then, I've already created a new books folder inside the content folder. And inside that, I put a few markdown files, which by the way, you can grab from the course files repo if you want to use the same stuff. And the names of these files are just the book titles. Now, I put them inside a books folder because that way even in future, I've got another kind of data like blogs or whatever else, then they won't all get mixed up with each other. And each type of data can all have its own subfolder. So, if we take a look at one of these files, then you can see we've got some front matter where we define all those same book properties, the book metadata. So, these are the properties as the same ones that we had in the JSON file, the title, the author, the summary, the rating. The only thing missing is the ID property. And the reason we don't need that when we're using multiple markdown files for a data source is because the file name of each markdown file is going to be automatically used by Astro as the ID. So, we don't need to manually add it here. — [gasps] — Anyway, below the front matter is a load of content with headings, uh lists, and all that jazz. And all of this is AI generated, by the way, which is why it doesn't make much sense. So then, we have the markdown content. And now all we need to do is update the collection we defined inside the content. config file. And we only need to change two things. First, we need to update the loader because the file function only loads a single file, but now we've got multiple markdown files that we need to load data from. So, we should replace the file function with a different one called glob, which we also need to import from astro/loaders. And we can also delete the other import as well, the file one. Now, the glob function allows us to supply a base path for the data, which is going to be the books folder. And then we also supply a file pattern so Astro can find all the relevant files in that base folder which match that pattern. And it's going to load them. Okay, so as the argument to this glob function, then we pass it an object. And we'll add the base property first, which is where we supply that base folder path, which is source/contents uh /books. And then after that, we'll add in the pattern property. And the pattern of the files we want to source is going to be an asterisk and then. md. So, this says find any file, no matter what the file name is, that ends in. md. So, this loader now loads all the content from all those files and processes the data in the same unified way. The only other thing we need to do is remove the ID property from the schema because that's no longer in the schema. And instead, the ID is automatically pulled from the file name minus the. md extension. And by the way, we don't need to add anything to the schema for the content itself in the markdown file, only for the properties in the front matter. And we'll see exactly how to access the markdown content later on. For now, before we preview this, I just want to do one more thing, and that is to use the auto-generated IDs as hrefs in the link for each book. So, if we open the book card component, we should see an empty anchor tag for user to click on when they want to read more about this review, right? I just want to quickly add the ID to this href. So, to do that, we'll make this dynamic by using curly braces. Then inside that, I'll add backticks to make a template string. And the first part of this path is going to be /books, then another /. Then we'll output the ID using a dollar sign and curly braces, which is how we output a variable inside a template string, then book. id. And notice this time, the ID is not attached to the data, right? It's added to the entry object directly. All right, so all of the books are still there, so this is working. And if we now click on one of these links, look at the page we go to. /books/assassins-apprentice. So, it's taking that ID, the file name, and using it in the href where we output that ID, which is good. Now, currently we get a 404 page, much like we would ### Segment 2 (05:00 - 05:00) [5:00] for any of the others if we click on them, because we don't have pages for this book's details yet. But at least this functionality of the anchor tag is working.