Astro 0.19

作者
Fred Schott

我们很高兴推出 Astro 0.19，新功能包括：

文件式路由，受 Next.js 启发

Astro 一直支持基本的文件式路由，其中 `pages/` 目录中的每个文件都会在相同的 URL 处成为一个新页面。Astro 0.19 更进一步，支持在文件名中使用动态 URL 参数。

受 Next.js 和 SvelteKit 启发，你现在可以在页面文件名中添加方括号（例如：`src/pages/[slug].astro`）来创建与多个不同 URL 匹配的动态页面。`[...slug].astro` 全局捕获语法也受支持。

有了这项新功能，你可以为你的网站添加对 URL 参数、slugs（子路径）、美观 URL、分页等的支持。

要创建动态路由，请在你的 `pages` 目录中创建一个文件，例如 `pages/posts/[slug].astro`。在你的页面 frontmatter 脚本中创建一个 getStaticPaths() 函数，并准确告诉 Astro 为该路由构建哪些路径

src/pages/posts/[slug].astro
---
// Tell Astro what pages to build for your route "/pages/:slug"
export async function getStaticPaths() {
  return [
    // Generates: /pages/hello-world
    { params: { slug: "hello-world" } },
    // Generates: /pages/my-first-blog-post
    { params: { slug: "my-first-blog-post" } },
    // Generates: /pages/astro-ftw
    { params: { slug: "astro-ftw" } },
    // ...
  ]
}
---


<html>
  <head><title>My Page</title></head>
  <body>URL Param is {Astro.request.params.slug}</body>
</html>

Astro 是一个静态网站构建器，因此你需要告诉 Astro 为每个动态路由构建哪些页面。手动定义路径可能感觉像是在写样板代码，但提前构建页面正是静态网站对用户如此快速的原因。

getStaticPaths() 是一个异步函数，所以你可以——也应该！——用它来将外部数据加载到你的网站中。我们通常喜欢在示例中使用 宝可梦 API，但你可能更希望使用你喜欢的无头 CMS

src/pages/posts/[id].astro
// Tell Astro what pages to build for your route "/pages/:id"
export async function getStaticPaths() {
  // Lets fetch posts from CSS Tricks' Headless CMS:
  const CSS_TRICKS_CMS = "https://css-tricks.cn/wp-json/wp/v2/posts"
  const allPosts = await fetch(CSS_TRICKS_CMS).then((r) => r.json())
  // Then, create a new page from every post:
  return allPosts.map((post) => ({
    // Set the URL param ":id" in the page URL
    params: { id: post.id },
    // Pass the post object as a prop to the page
    props: { post },
  }))
}

要了解更多信息，请查阅我们关于 路由 的新文档和新的 getStaticPaths() API。 或者，如果你喜欢通过示例学习，请查看 Chris Coyier 的这个很棒的 Wordpress 无头 CMS 项目，以及 Netlify 的 Cassidy Williams 的这个 Shopify 电商示例。

如果你是之前我们原有 Collections API 的用户，这个新的文件式路由系统将完全取代 Collections，并提供大量友好的警告消息来帮助你升级。我们希望这个新的 API 能消除用户之前对 Collections API 反馈的所有常见痛点。

client:only 加载指令

有时，UI 组件无法在服务器上渲染。这可能是因为你的某个依赖项中存在 bug，或者你只是在使用像 D3 这样的库，它在没有浏览器 `window` 对象的情况下无法运行。

你可以尝试用你自己的静态服务器端回退 UI 来包装仅限浏览器的代码。然而，大多数用户希望有一种方式可以在没有额外样板代码的情况下渲染仅限浏览器的组件。于是，`client:only` 应运而生。

Astro 0.19 附带了新的 `client:only` 加载指令，可在浏览器中水合你的组件，而无需服务器端渲染。这为任何仅限浏览器的组件提供了一个简单、直接的回退方案。

<!-- only renders in the browser, no placeholder HTML -->
<MyReactComponent client:only />

client:only 现在是我们的第五个指令，可让你完全控制组件的加载行为。请访问我们的文档站点 查看完整集合，并了解更多关于 局部水合（Partial Hydration） 的信息。

🎉 这项出色的功能由 Navillus 的 Tony Sull 贡献。谢谢你，Tony！

Astro.resolve()

Astro 0.19 包含一个新的 Astro.resolve() 辅助函数，用于解析模板中的相对文件引用。有了这项新功能，你可以在组件内部引用相对资源（如图片），Astro 将返回浏览器所需的正确 URL。

以前，你总是需要将文件放在 `public/` 目录中，并通过绝对 URL 路径引用它们。`src/` 目录中的相对路径不起作用，因为它们会原样直接发送到浏览器。不同的页面最终会创建不同的 URL

<!-- This works the same on every page: -->
<img src="/logo.png" />
<!-- But this means different things on different pages: -->
<img src="../logo.png" />

从 Astro 0.19 开始，你现在可以使用新的 `Astro.resolve()` 辅助函数，从任何相对路径创建绝对 URL 引用

<!-- Astro component input: -->
<img src={Astro.resolve('../images/logo.png')} />
<!-- HTML output: -->
<img src="/_astro/src/images/logo.png" />

如果这有帮助，你可以将 `Astro.resolve()` 视为在浏览器中执行 `new URL(yourRelativePath, import.meta.url).pathname` 的简化替代方案。

Astro.resolve() 为你提供了更多选项和更多控制权，让你能够更好地组织项目结构。未来，这也将使我们能够直接从 `src/` 目录提供优化的图片。

🎉 这项出色的功能由 Jonathan Neal 和 Matthew Phillips 贡献！

文档翻译

并非所有开发者都说英语。事实上，大多数人都不说。幸运的是，我们社区中一些出色的贡献者齐心协力，为全球受众翻译了 Astro 文档。我们目前正在进行 10 种不同语言的翻译工作，包括：

  • 简体中文
  • 正体中文
  • 保加利亚语
  • 德语
  • 英语
  • 西班牙语
  • 法语
  • 荷兰语
  • 葡萄牙语
  • 芬兰语
  • 俄语

这些翻译仍在进行中，随着我们临近 v1.0 版本发布，我们将继续努力实现 100% 的翻译。如果你懂几种语言并且能够贡献，我们真的需要你的帮助！

Open Collective

距离 Astro 的首次发布已经过去两个多月了。在那个版本中，我们阐述了我们对**一个免费、开源的 Astro** 以及项目**长期财务可持续性**的承诺。今天，我们宣布了我们实现长期可持续性的首次尝试：

公司和个人现在可以通过 Open Collective 赞助 Astro 的开发。访问我们的 Open Collective →

我们创建 Open Collective 是因为企业赞助是开源项目实现财务可持续性的少数经过验证的途径之一。然而，它远非一个完美的模式。大多数捐款只流向少数几个受欢迎的项目，而其他项目从未获得任何有意义的支持。尽管困难重重，但我们相信 Astro、我们的社区以及围绕这个项目不断增长的热情。

你的公司很可能受益于开源软件。通过赞助 Astro 和你使用的任何其他开源项目来投资赋能你业务的技术。额外好处：每天都会有成千上万的开发者在我们的 README 和 astro.build 主页上看到你的徽标。

募集到的资金将 100% 直接投资回项目和我们的社区。你可以通过阅读 GitHub 上的 FUNDING.md 文档了解更多关于资金分配的信息。

我们将在未来 48 小时内，向每一位点击“赞助”按钮的个人和公司发送个性化的“感谢”推文。我们首先要特别感谢 Chris Jennings，Sentry 的首席商务官兼联合创始人，感谢他成为我们的第一位官方赞助商！🎉

ICYMI（万一你错过了）

GitHub 增加了官方支持，覆盖其整个平台，支持 `.astro` 文件和 `astro` 语法高亮。CodeSandbox 也不甘示弱，迅速跟进并提供了自己的支持！

这对 Astro 来说是一个巨大的里程碑，尤其考虑到这个项目还很年轻！感谢所有使用 Astro、创建项目并向这些平台展示 Astro 真正价值的人。

官方宣布！🎉 @github 现在支持 `.astro` 文件的语法高亮显示！


你也可以使用以 `astro` 开头的代码块，以便在 Markdown 文件、issue 和 PR 评论中获得正确的语法高亮！


pic.twitter.com/CDiGw66Qw6

— Astro (@astrodotbuild) 2021年8月4日

👋

感谢阅读！在临近 v1.0 版本发布之际，请在 Twitter 上关注我们以获取最新动态。此外，你也可以查看我们之前的发布博文，了解更多 Astro 的更新。

另外，如果你读到了这里，你绝对应该加入我们的 Discord。 ;)