Deno 使用Fresh模板引擎

引入 Fresh 模板引擎

在本章中，我们将介绍如何使用 Fresh 模板引擎来构建 Deno 应用程序。Fresh 是一个现代化的 Web 框架，专为 Deno 设计，它提供了一套简洁且高效的工具来简化前端开发流程。通过使用 Fresh，你可以快速地创建和管理复杂的 Web 应用。

安装 Fresh

在开始之前，请确保已经安装了 Deno。如果尚未安装，请参考官方文档完成安装。

接下来，我们需要安装 Fresh CLI 工具，以便能够轻松地初始化项目并生成所需的文件结构。可以通过以下命令全局安装 Fresh CLI：

deno install -A -f https://deno.land/x/fresh@v1.0.0/cli.ts

这里使用了 https://deno.land/x/fresh@v1.0.0/cli.ts 的最新版本。根据需要，您可以选择特定版本或更新到最新版本。

创建项目

安装完 Fresh CLI 后，我们就可以创建一个新的项目了。通过以下命令创建项目：

fresh new my-deno-app

这将生成一个名为 my-deno-app 的新目录，并在此目录中初始化一个基本的 Fresh 应用程序。进入新创建的项目目录：

cd my-deno-app

项目结构

Fresh 生成的项目具有以下典型的目录结构：

• app: 存放页面组件、布局和其他应用相关文件。
• static: 存放静态资源，如图片、字体等。
• routes: 存放路由配置和处理逻辑。
• tsconfig.json: TypeScript 配置文件。
• deno.json: Deno 配置文件。

配置 Fresh

在 deno.json 文件中，你可以找到一些基本的配置项。例如，可以在这里定义环境变量或调整其他运行时参数。

添加模板引擎

Fresh 默认使用 JSX/TSX 作为模板引擎，但也可以集成其他模板引擎。为了演示，我们将使用 EJS（Embedded JavaScript）模板引擎。首先，需要安装 ejs 和 fresh-ejs 插件：

deno run -A https://deno.land/x/fresh_ejs/install.ts

然后，你需要在项目根目录下创建一个 fresh.config.ts 文件，并添加如下配置：

// www.javascriptcn.com code example
import { defineConfig } from "https://deno.land/x/fresh@v1.0.0/mod.ts";
import ejs from "https://deno.land/x/fresh_ejs@v1.0.0/mod.ts";

export default defineConfig({
  plugins: [
    ejs({
      // 配置选项，例如指定模板文件的路径
      path: "./templates",
    }),
  ],
});

使用 EJS 模板

在 app 目录下创建一个 templates 文件夹，用于存放 EJS 模板文件。例如，创建一个简单的 index.ejs 模板文件：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1>Welcome to <%= title %>!</h1>
</body>
</html>

接下来，在 routes/index.ts 中引入并渲染这个模板：

// www.javascriptcn.com code example
import { createSignal } from "https://esm.sh/react@17.0.2";
import { View } from "https://deno.land/x/fresh@v1.0.0/mod.ts";

export default function Home() {
  const [title, setTitle] = createSignal("Fresh with EJS");

  return (
    <View template="index" data={{ title: title() }} />
  );
}

这里，我们使用了 View 组件从 Fresh 提供的 fresh-ejs 插件中导入模板。data 属性允许我们将数据传递给模板，从而动态生成内容。

动态路由和模板

Fresh 支持动态路由，这意味着你可以基于 URL 参数生成不同的页面。例如，如果你希望根据用户 ID 显示个人资料页面，可以在 routes/user/[id].tsx 中创建一个动态路由：

// www.javascriptcn.com code example
import { View } from "https://deno.land/x/fresh@v1.0.0/mod.ts";

export default function UserProfile({ params }) {
  return (
    <View
      template="profile"
      data={{
        userId: params.id,
      }}
    />
  );
}

在这个例子中，[id] 路径段表示这是一个动态路由部分。params 对象包含了 URL 中的实际值。同时，在 app/templates/profile.ejs 中创建对应的模板文件。

总结

通过以上步骤，你已经成功地在 Deno Fresh 应用中集成了 EJS 模板引擎。这不仅让你能够利用 EJS 的强大功能来创建动态网页，还展示了如何将不同的技术栈整合在一起，以满足更复杂的应用需求。接下来，你可以继续探索更多关于 Fresh 和 EJS 的高级功能，以进一步提升你的应用程序。