现代化静态站点生成器 Astro 发布 2.6,引入中间件 (Middleware)

Astro 2.6 已正式发布。在该版本中,多项实验性功能进入稳定状态,包括:Middleware(中间件)、Hybrid SSR output mode(混合 SSR 输出模式)、Custom client directives(自定义客户端指令)和 CSS inlining(CSS 内联)。

此外还引入了许多新功能和改进,包括用于管理重定向的实验性新功能

重定向(实验性)支持在 Astro 配置中对单个页面设置重定向

改进 Markdoc:Markdoc 现在与 Astro 中的 MDX 具有相同的功能

改进语言工具升级 Astro VSCode 扩展,由 Volar 提供支持

Middleware(中间件)

Middleware 目前已到达稳定阶段。该功能支持页面被渲染并返回给用户之前或之后运行代码。这为 Astro 项目带来了新的控制层,并解锁了用于身份验证、重定向修改 header 等新 hook。

// src/middleware.ts

export async function onRequest(context,next) {

// Do something before the request is handled.

const response = await next()

// Or,do something before the response is returned.

return response

}

下面是一个示例,说明如何在 Middleware 中实现基本身份验证检查,并将加载的用户上下文传递到页面路由:

// src/middleware.ts

// Example: A simple authentication check in middleware.

export async function onRequest({ cookies,locals },next) {

// Check for the "sid" user session ID cookie.

// Return a 405 (Not Allowed) if the cookie is missing.

const sessionId = cookies.get("sid");

if (!sessionId) {

return new Response(null,{status: 405});

}

// Use your own `getUser()` function to validate the user.

// Return a 405 (Not Allowed) if the user isn't real.

const user = await getUser(sessionId);

if (!user) {

return new Response(null,{status: 405});

}

// Attach the loaded user to the `locals` object.

// Now,it can be read in the page route!

locals.user = user;

// Return `next()` to return the response.

return next();

}

CSS 内联

Astro 2.6 引入了一个新的配置选项,可以自动将 CSS 的小片段内联到 HTML 中。这种优化可以通过减少加载页面所需的请求和外部样式表的数量来加速大多数页面(尤其是在首次加载时)。现在可以通过在配置文件中设置inlinestylesheets: "auto"来尝试:

// astro.config.mjs

import { defineConfig } from "astro/config"

export default defineConfig({

build: {

inlinestylesheets: "auto",

},

})

改进语言工具

Astro 的语言工具通过@astrojs/language-server的 2.0 版本和 Astro 的 2.0 VSCode 扩展获得了重大升级。此版本完成了对 Volar 的重大重写和内部迁移,以提高性能功能和稳定性。

详情查看发布公告。

相关文章

IT之家 10 月 31 日消息,苹果公司面向数据科学家、3D 艺术家...
鞭牛士 10月30日消息,被戏称为“中国AI教父”的网络红人李一...
IT之家 10 月 31 日消息,Meta 首席执行官马克・扎克伯格在第...
IT之家 10 月 31 日消息,当地时间 30 日,OpenAI 宣布,为了...
据路透社报道,OpenAI 正在与 博通(Broadcom)合作开发其 首...
IT之家 10 月 31 日消息,OpenAI 今日宣布,ChatGPT 的高级语...