视图介绍

5.x

5.x

AdonisJS 的 Views 层由一个叫做 Edge 的本地模板引擎提供支持。Edge 是一个逻辑完整的 Node.js 模板引擎，它可以渲染任何基于文本的格式，支持包括 HTML，Markdown 与 纯文本 格式的文件。

我们创建了 Edge 作为其他现有模板引擎的替代方案，并解决了它们的痛点。

Edge vs Pug

与 Pug 不同的是，我们没有重新发明编写 HTML 的方式。Edge 一开始甚至没有绑定到 HTML，它可以渲染任何基于文本的文件。

Pug

h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}

Edge

<h1> {{ title }} </h1>
<p> Written with love by {{ author }} </p>
<p> This will be safe: {{ theGreat }} </p>

Edge vs Nunjucks

与 Nunjucks 不同，Edge 感觉像是在编写 JavaScript 而不是 Python。因此，Edge 的学习曲线较小，输入速度更快，并且支持所有 JavaScript 表达式。

Nunjucks

{% if happy and hungry %}
  I am happy *and* hungry; both are true.
{% endif %}

{{ "true" if foo else "false" }}

Edge

@if(happy && hungry)
  I am happy *and* hungry; both are true.
@endif

{{ foo ? "true" : "false" }}

Edge vs Handlebars

与 Handlebars 不同，Edge 没有限制性。例如，你可以在模板中使用任何 JavaScript 表达式，我们使用符合规范的 JavaScript 解析器来解析它们。

而在 Handlebars 中，你必须为每一件小事定义自定义助手。当同时使用多个助手时，情况会变得更糟。

Handlebars.registerHelper('upperCase', function (aString) {
  return aString.toUpperCase()
})

Handlebars

{{upperCase lastname}}

与 Handlebar 相比，Edge 在原生 JavaScript 功能上加倍努力。

Edge

{{ lastname.toUpperCase() }}

初始化

Edge 预配置了 web 起始模板。而且，安装和配置它也相对简单。

打开 .adonisrc.json 文件，查看 providers 数组列表中是否有 @adonisjs/view。如果没有，则继续执行以下步骤：

npm i @adonisjs/view

运行以下 ace 命令来配置包。

node ace configure @adonisjs/view

# 更新: .env { "CACHE_VIEWS = false" }
# 更新: .adonisrc.json { providers += "@adonisjs/view" }
# 更新: .adonisrc.json { metaFiles += "resources/views/**/*.edge" }

基本示例

让我们从创建一个渲染给定模板文件的路由开始。

// start/routes.ts 文件
Route.get('/', async ({ view }) => {
  return view.render('home')
})

下一步是创建 home.edge 模板，你可以在 views 文件夹中手动创建文件，也可以使用以下 Ace 命令创建文件。

node ace make:view home

# 创建: resources/views/home.edge

让我们打开新创建的文件并将以下代码片段粘贴到其中。

// resources/views/home.edge 文件
<p> 你好世界！你正在查看 {{ request.url() }} 页面 </p>

确保已通过运行 node ace serve --watch 启动开发服务器并访问 localhost:3333 以查看模板文件的内容。

视图目录

AdonisJS 默认将 resources/views 目录注册为 Edge 模板的目录。你可以通过修改 .adonisrc.json 文件来自定义路径。

进行以下更改后，Edge 将在 ./app/views 目录中找到模板。

注：如果你需要注册多个模板路径，请阅读 指南

{
  "directories": {
    "views": "./app/views"
  }
}

此外，确保更新同一文件中的 metaFiles 数组，以告诉 @adonisjs/assembler 在创建生产构建时复制模板。

{
  "metaFiles": [
    {
+      "pattern": "resources/views/**/*.edge",
-      "pattern": "app/views/**/*.edge",
      "reloadServer": false
    }
  ],  
}

编辑器扩展

你可以选择安装编辑器扩展以实现 Edge 模板语法高亮，以下为支持的编辑器列表。

• VsCode
• Sublime Text
• Atom
• Vim

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/adonisjs/5.x/vi...

译文地址：https://learnku.com/docs/adonisjs/5.x/vi...