引入 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 文件，并添加如下配置：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------------------------
------ --- ---- ----------------------------------------------
------ ------- --------------
-------- -
-----
-- ----------------
----- --------------
---
--
---使用 EJS 模板
在 app 目录下创建一个 templates 文件夹，用于存放 EJS 模板文件。例如，创建一个简单的 index.ejs 模板文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- ------- ------ ----------- -- --- ----- -------- ------- -------
接下来，在 routes/index.ts 中引入并渲染这个模板：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------------
------ - ---- - ---- ------------------------------------------
------ ------- -------- ------ -
----- ------- --------- - ------------------- ---- ------
------ -
----- ---------------- ------- ------ ------- -- --
--
-这里，我们使用了 View 组件从 Fresh 提供的 fresh-ejs 插件中导入模板。data 属性允许我们将数据传递给模板，从而动态生成内容。
动态路由和模板
Fresh 支持动态路由，这意味着你可以基于 URL 参数生成不同的页面。例如，如果你希望根据用户 ID 显示个人资料页面，可以在 routes/user/[id].tsx 中创建一个动态路由：
-- -------------------- ---- -------
------ - ---- - ---- ------------------------------------------
------ ------- -------- ------------- ------ -- -
------ -
-----
------------------
-------
------- ----------
--
--
--
-在这个例子中，[id] 路径段表示这是一个动态路由部分。params 对象包含了 URL 中的实际值。同时，在 app/templates/profile.ejs 中创建对应的模板文件。
总结
通过以上步骤，你已经成功地在 Deno Fresh 应用中集成了 EJS 模板引擎。这不仅让你能够利用 EJS 的强大功能来创建动态网页，还展示了如何将不同的技术栈整合在一起，以满足更复杂的应用需求。接下来，你可以继续探索更多关于 Fresh 和 EJS 的高级功能，以进一步提升你的应用程序。