Astro 系列文第二十日：实现搜索功能
前面透过建立静态端点实作了自己的 RSS Feed 算是一个简单的练习起步，这次更进一步透过建立整个集合的资料来完成「集合文章搜寻功能」。随着文章愈来愈多会需要一个查询文章的功能，透过用户输入文章相关的讯息，比对文章资讯（标题、文章短描述）并显示出最相关的文章。
前面透过建立静态端点实作了自己的 RSS Feed 算是一个简单的练习起步，这次更进一步透过建立整个集合的资料来完成「集合文章搜寻功能」。随着文章愈来愈多会需要一个查询文章的功能，透过用户输入文章相关的讯息，比对文章资讯（标题、文章短描述）并显示出最相关的文章。
前面章节我们学会了如何使用 Markdown 或 MDX 、在内容集合中定义资料格式与索取资料。本章节将解释如何在 Astro 中创造端点提供不同种类的资料，并实作生成一个 RSS 档案作为练习，RSS 是一种标准化的方式，一种特定格式的 XML 档案，设计来推播最新资讯给网站用户。
前面学习了内容集合与页签的制作，今天的主题练习透过整理集合抓取到的资料更进一步制作分类功能页面。随着内容集合发布的文章越来越多，里面可能会有许多相同性质的文章你会想要集合起来并替他们分类，并且自动根据类别自动创建页面方便查阅。
透过内容集合动态的生成 Route 是件方便美好的事情，但一旦数量一多就必须要想办法分批次显示这些资料，恰好 Astro 内建页签可以帮助我们打造这方面功能，会建议等到网站真的有这么大量的内容再来考虑制作页签，尝试添加分页功能并创建分页元件吧。
除了在组件中定义数据、在 `src` 中 `import` 或 `fetch` 远端数据外，还有其他写内容的方法吗？有的！内容集合在 2.0 推出，为本地内容提供易用管理与自动化类型验证。需要大量文档注入页面时可使用此功能。
先前了解了如何使用 Markdown 与 MDX 来撰写网页，接着这个章节将会学习到如何替这些档案设置画面布局 (Layout)。布局可以想像成是常见的页面的模板用于管理页面常见的模式，定义布局页面可以解省重复并统一管理页面。
通常文件会伴随着图片，而图片可以占据一个页面绝大多数的运算资源与流量！你会希望图片能够被好好处理避免它们压垮整个网站的体验，Astro 预设自带相关的元件与方法帮助你处理这些事务。了解储存图片位址 src/ 和 public/ 的差异与如何最佳化图片。
撰写网站最终还是要回归到易于维护，能不能不需要接触程式，只需透过编写文件就能更改页面内容呢？也就是将内容与版面、逻辑做分离。本章节我们将会学习 Markdown 与 MDX 来达成这件事，它们主要用途是作为传达与标记内容。
在上一章节介绍了基础元件的使用，并且你也大概猜到了，只要元件放置在 src/pages/ 之内就会自动的成为 Astro 的页面，在本章节会更细致的介绍关于 Astro 的路由设置。 Astro 采用的路由策略被称为「基于档案的路由 File-based Routing」。
前面章节了解到在 Astro 中引用不同框架的元件是极其容易的事情，但这些元件中的状态要怎么去管理呢？在一些 UI 框架中会提供创建 `context` 的方式来管理状态，但由于 Astro 采用「局部 Hydration」的方式来渲染页面，因此无法办到，但我们可以额外使用 Nano Stores 来达成这点。
前面提到如何在 `.astro` 格式中添加客户端 JavaScript 使元件具备互动性。 Astro 最吸引人的一项特点就是可以整合各大 UI 框架到元件之中，享受不同技术与其生态域带来的便利与好处。在本章节将会从安装整合到制作一个 React 元件。
这个章节更偏向我在 Astro 中使用 Tailwind 的历程心得，如果你没有打算导入 Tailwind 可以直接前往下一章节即可。透过两个章节都在练习写按钮，现在推荐你尝试撰写各式各样的元件熟悉使用 Astro，对你来说都不会是问题了。
网站中要用到许多种类的按钮，在本章节综合了先前「基础元件」与「样式」两章节的内容，打造出一个通用的网页按钮元件，一起来实作看看吧。按钮是网页极具代表性的元件之一，下一章节讲解整合 Tailwind 也会以这个例子出发，敬请期待！
综合来说 Astro 让你用自己习惯的方式撰写 CSS，不管是 import 还是 <link> 还是 Scoped CSS 或是各式各样的预处理语言或框架皆有支援。 stro 中撰写样式是一件非常容易的事，并且有多样选项可供挑选。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它！今日介紹構成 Astro 最核心的概念 —— 元件。前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌，本章將從創建基本 Astro 元件開始。