Astro，这个前端框架有点不一样！( 三 ) _Astro

/blogs/how-to-learn-ai.html

/blogs/how-to-learn-astro-ai.html

Astro 还支持服务端渲染，在这种情况下，路由是在运行时而不是构建时生成的。这意味着不需要指定 getStaticPaths() 方法，并且页面可以大大简化，如下所示：

// src/pages/blogs/[blog.astro]---// 可以从 Astro 全局对象中解构参数const { blog } = Astro.params --- <h1> Hello Blog, {blog} </h1>

在实践中，使用SSR，这里的博客参数很可能是博客的唯一标识符，例如 ID 。当用户尝试查看 /blogs/id 时，可以通过 Astro.params 获取 id 并在服务端获取所需的博客内容。
布局除了正常的组件和特殊的组件“页面”，下面来了解另一种类型的组件：布局。
大多数 Web 应用都包含一些可重用的结构，这些结构为页面提供了结构，例如页眉、页脚和侧面导航元素。这些可以被抽象为可重用的 Astro 组件，称为布局。
可以通过在 src/layouts 目录中添加 Astro 组件来创建布局组件：

文章插图
在布局组件中，可以抽象公共组件并在任意应用页面中重用它们。
来看下面的布局组件：

// src/layouts/Main.astro---const { title } = Astro.props;---<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="description" content="Astro description" /><meta name="viewport" content="width=device-width" /><link rel="icon" type="image/svg+xml" href=https://www.isolves.com/it/cxkf/kj/2023-11-21/"/favicon.svg" />{title}_江苏龙网{/** 注意，下面使用了  标签 **/}

可以在任何页面中使用此组件：

---import Main from '../layouts/Main.astro';---{/** 像渲染HTML元素一样渲染 Main 组件：<Main></Main> **/}<Main title="Home page."><main><h1> Hello world, again </h1><main></Main>

注意这里是如何使用布局组件的。在页面组件的 HTML 部分中，渲染了布局组件，并将页面的元素作为子元素传递给了<Main>组件。
可以通过在<Main>组件中添加一个<slot/>来渲染这个内容。简而言之，每个传递给<Main>布局组件的子元素都将被渲染到<Main>中的<slot/>中：

文章插图
还可以通过提供 props 来提高 Astro 组件的可重用性。例如：
<Main title="Hello world" /><Main title="Another title" /><Main title="Hello again" />上面的例子就是在布局组件渲染时将不同的标题传递给它：
// src/layouts/Main.astro---const { title } = Astro.props;---<h1>{title} </h1>主题和模板Astro 在过去几年中的增长很大程度上归功于它的易于采用和开发。Astro 通过提供多样化的模板，为工开发者快速启动项目并编写更少的代码提供了极大的便利。

文章插图
中间件中间件在帮助 Astro 转变为成熟的 Web 框架的过程中发挥了重要作用。
大多数全栈 Web 框架都有中间件实现，例如 NestJS 。中间件位于客户端请求和服务器应用逻辑的其余部分之间，起到中心化逻辑的作用，例如身份验证、日志记录、特性标志等。

文章插图
Astro 也提供了中间件，下面是 Astro 中基本中间件的结构：

// src/middleware.js|tsimport { defineMiddleware } from "astro/middleware";const middleware = defineMiddleware((context, next) => {// 在这里对请求进行一些操作return next() // 不进行任何操作，原样转发请求});export const onRequest = middleware;

为了类型安全，可以从 Astro 包中导入 MiddlewareResponseHandler 类型以及 defineMiddleware 实用程序。然后，通过 defineMiddleware 实用程序定义中间件变量：
const middleware = definedMiddleware(...)最后，导出一个指向middleware的onRequest函数。
export const onRequest = defineMiddleware(...)Markdown 和 Content Collections API假设你正在构建一个大型的内容驱动应用，这样的项目预计会使用大量的Markdown、MDX、JSON或YAML文件。