组件脚本是包含在 --- 虚线之间的部分，与 Markdown 前面的内容块相同 。在脚本部分中，默认情况下，可以编写任何有效的 JavaScript 和 TypeScript！在上面的例子中，定义了一个 name变量：
---const name = "前端充电宝"---组件模板就是定义组件 HTML 的地方 。如果组件需要向浏览器渲染一些 UI 元素或 HTML ， 可以在此处定义它 。在上面的例子中，定义了以下内容：
<h1>Hello world, {name} </h1>Astro 组件模板决定了组件的 HTML 输出并支持纯 HTML！不过，Astro 组件模板语法是 HTML 的超集 。它添加了强大的插值功能，因此可以充分利用 JavaScript 和 TypeScript 来编写组件模板 。
除了简单的字符串插值之外，组件模板语法还支持很多功能 ， 例如添加<style>和<script>标签、利用动态属性、条件渲染、动态HTML等 。以下是其中一些功能的演示：
---const isActive = false ---<h1>前端充电宝</h1>{/** 条件渲染 **/}{isActive && <p>Hello World from 前端充电宝</p>}{/** 样式：默认情况下样式是有作用域的 **/}<style> h1 {color: red, }{/** 添加脚本 **/}<script><!-- 也可以在此处编写TypeScript 。Astro 原生支持 TypeScript -->const header = document.querySelector("h1")header.textContent = "Updated LogRocket Header"</script>页面和路由Astro 应用的入口点是页面，它利用基于文件的路由方式来管理页面 。
假设正在构建一个具有两个不同路由的 Web 应用：index.html 和 about.html，那该如何表示呢？
Astro 项目的 src/pages/ 子目录中的每个文件对应一个页面 。在这个例子中，需要两个页面 ：src/pages/index.astro 和 src/pages/about.astro：
文章插图
在构建应用时，可以通过像npm build这样的简单命令来进行构建，index.astro和about.astro将被构建成应用中相应的index.html和about.html文件 。
Astro 是一个多页面 Web 框架 。也就是说，默认情况下，每个路由都对应一个单独的 HTML 文档 。
可以按照以下步骤来尝试使用 Astro：
- 通过运行 npm create astro@latest 命令创建一个新的 Astro 项目 。
- 按照终端中的提示设置新项目 。
- 使用 astro dev 命令启动应用 。
- 在代码编辑器中打开项目 。
- 查看 src/pages 目录并创建两个新页面：index.astro 和 about.astro 。
- 通过 astro build 构建应用 。
- 查看构建输出并观察两个单独的 HTML 文件——每个路径一个 。
- Markdown 和 HTML 文件
- 安装了 MDX 集成的 MDX 文件
- JavaScript 或 TypeScript 作为静态文件或 API 端点
Astro 页面可以在文件名中指定动态路由参数，这将生成多个匹配的页面 。例如，构建一个博客应用，其中每篇博客都有自己的路由，可以通过以下方式表示该页面：
src/pages/blogs/[blog].astro
文章插图
注意，组件文件名中的方括号：[blog].astro 。在静态模式下，所有路由都必须在构建时确定 。因此，动态路由必须导出 getStaticPaths() 方法，该方法返回具有 params 属性的对象数组 。这告诉 Astro 在构建时生成哪些页面 。
例如：
// src/pages/blogs/[blog.astro]---export function getStaticPaths() {return [{params: {blog: "how-to-learn-astro"}},{params: {blog: "how-to-learn-ai"}},{params: {blog: "how-to-learn-astro-ai"}},]}// 可以从 Astro 全局对象中解构参数const { blog } = Astro.params --- <h1> Hello Blog, {blog} </h1>当构建此应用时，src/pages/blogs/[blog.astro] 将生成三个博客页面：
