AdonisJS 中文文档视图介绍
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 模板语法高亮，以下为支持的编辑器列表。
本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号