如何在 Deno 的 Web 框架 Fresh 中设置元数据

介绍

当我在尝试流行的 JavaScript/TypeScript 运行时 Deno 的 web 框架 Fresh 时，我找不到在文档中设置元数据的方法，所以我写了一篇文章。

开发环境

	版本
操作系统	Ubuntu 20 (WSL2)
在	1.26.1
新鲜的	1.1.1

清爽清新

在 Fresh 中，如果您在 routes 目录中创建一个文件，fresh.gen.ts 将被生成并正确路由。

例如，创建routes/test.tsx 文件，如下所示：

路线/test.tsx

export default function() {
  return (
    <div>test</div>
  )
}

用deno task start命令启动服务器，当你访问http://localhost:8000/test时，会返回如下HTML并显示页面！

http://localhost:8000/test

<!DOCTYPE html>
<html lang="en">
  <head>省略</head>
  <body>
    <div>test</div>
  </body>
</html>

让我们继续讨论主要话题。

如何为特定页面设置元数据

您可以使用Head 组件设置元数据。

例如，我之前将标题放在routes/test.tsx 和Head 中。

路线/test.tsx

import { Head } from "$fresh/runtime.ts"

export default function() {
  return (
    <>
      <Head>
        <title>テストページ</title>
      </Head>
      <div>test</div>
    </>
  )
}

当我访问http://localhost:8000/test时，标题显示成功。

http://localhost:8000/test


<!DOCTYPE html>
<html lang="en">
  <head>
    省略
    <title>テストページ</title>
  </head>
  <body>
    <div>test</div>
  </body>
</html>

如何为所有页面设置通用元数据

您可以通过创建routes/_app.tsx 文件并使用Head 组件来设置所有页面共享的元数据，如下所示。

路线/_app.tsx

import { AppProps } from "$fresh/server.ts"
import { Head } from "$fresh/runtime.ts"

export default function({ Component }: AppProps) {
  return (
    <>
      <Head>
        <title>テストページ</title>
      </Head>
      <Component />
    </>
  )
}

除了routes/_app.tsx之外，还有一些以_开头的特殊文件，所以在开始使用Fresh的时候看看它们是个好主意！

综上所述

使用_app.tsx的方法还没有在官方文档中列出（截至2022年10月25日），但是我找到了一个Pull Rrequest来添加文档，所以很快就会在文档中添加更详细的信息。也许.

下面还有几个使用 Fresh 的 Web 应用程序示例。有很多技巧没有记录，比如本文介绍的_app.tsx的使用，所以会很有帮助。

Fresh 是一个新的 web 框架，v1.0.0 刚刚在 2022 年 6 月发布，但是从安装 Deno 到部署到 Deno Deploy 的流程让我印象深刻，我希望你体验其中的乐趣！

前几天奇塔之夜前端功能中也引入了新鲜！

我很期待Fresh的未来！

参考

：https://deno.land/
- 奇塔：https://qiita.com/tags/deno
- 每周 Deno：https://uki00a.github.io/deno-weekly/
新鲜：https://fresh.deno.dev/
- GitHub：https://github.com/denoland/fresh
Deno 部署
- https://deno.com/deploy

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308631684.html