快速上手
如果你是在 AdonisJS 应用中安装 Edge，建议阅读 AdonisJS 视图与模板 指南。
你可以在已有的 Node.js 项目中，通过 npm 包仓库安装 Edge。
Edge 是一个仅支持 ESM 的包，因此你的应用必须使用 ES 模块来导入该包。
npm i edge.js
安装完成后即可开始使用 Edge。你不需要任何编译器或构建工具来编译模板。
我们先从以下项目结构开始。我们将把模板存放在 views 目录中，并在 HTTP 请求期间渲染它们。
.
├── views
│ └── home.edge
├── index.js
└── package.json
import { Edge } from 'edge.js'
import { createServer } from 'node:http'
const edge = Edge.create()
edge.mount(new URL('./views', import.meta.url))
const server = createServer(async (req, res) => {
const data = { username: 'virk' }
const html = await edge.render('home', data)
res.setHeader('content-type', 'text/html')
res.end(html)
})
server.listen(3000)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>
Hello {{ username }}
</h1>
</body>
</html>
让我们逐行解读这段源码。
-
首先导入
edge.js包，并创建一个简单的 Node.js HTTP 服务器。 -
我们使用
edge.mount方法将views目录注册为模板的根 URL。模板文件以.edge为扩展名。 -
最后，我们使用
edge.render方法在 HTTP 请求期间渲染模板。该方法接受模板路径（不含扩展名）以及要与模板共享的数据对象。
模板缓存
每次调用 edge.render 方法时，模板都会被重新编译。你可以通过编辑 home.edge 文件并刷新浏览器来验证这一点，从而看到修改后的输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>
Hello {{ username.toUpperCase() }}
</h1>
</body>
</html>
在生产环境中，你必须启用缓存模式以避免重复编译模板。编译后的输出会保存在内存中。
const edge = Edge.create({
cache: process.env.NODE_ENV === 'production'
})
挂载磁盘（disks）
EdgeJS 使用磁盘（disks）的概念，从本地文件系统查找并渲染模板。你可以注册一个默认磁盘，以及多个具名磁盘来查找模板。
在下面的示例中，我们将 views 目录注册为查找模板的默认磁盘。
const BASE_URL = new URL('./', import.meta.url)
edge.mount(new URL('views', BASE_URL))
/**
* 从
* {BASE_URL/views} 目录渲染 home.edge 文件
*/
await edge.render('home')
/**
* 从
* {BASE_URL/views} 目录渲染 pages/posts/index.edge 文件
*/
await edge.render('pages/posts/index')
你也可以挂载多个具名磁盘，这在你有主题系统并希望在不同主题之间切换时很有用。
const BASE_URL = new URL('./', import.meta.url)
edge.mount(
'elegant',
new URL('themes/elegant', BASE_URL)
)
edge.mount(
'classic',
new URL('themes/classic', BASE_URL)
)
edge.mount(
'mono',
new URL('themes/mono', BASE_URL)
)
现在你可以通过在模板路径前加上磁盘名来渲染模板。例如：
await edge.render('classic::home')
await edge.render('mono::pages/posts/index')
内存中的模板
你可以使用 .registerTemplate() 方法注册保存在内存中的模板。该方法第一个参数接受一个唯一的模板名称，并通过 options 参数传入模板内容。
edge.registerTemplate('uikit.button', {
template: `<button {{
$props.except(['text']).toAttrs()
}}>
{{ text }}
</button>`
})
现在，你可以在任何其他模板中将该模板作为组件引用。
@!component('uikit.button', {
text: 'Submit',
type: 'submit',
class: ['btn', 'btn-primary'],
disabled: false,
})
渲染 API
你可以使用以下方法之一来渲染 EdgeJS 模板。
render
render 方法接受相对于磁盘根目录的模板路径，以及一个可选的要与模板共享的数据对象。
返回值是渲染后模板的字符串输出。
const html = await edge.render('home')
console.log(html)
renderSync
renderSync 方法与 render 类似。但它在底层使用同步 API 来读取并渲染模板文件。
我们建议使用 render 方法而非 renderSync 方法。
const html = edge.renderSync('home')
console.log(html)
renderRaw
renderRaw 方法允许你将原始文本作为模板渲染。
const template = `
<h1> Hello {{ username || 'Guest' }}! </h1>
`
await edge.renderRaw(template, { username: 'virk' })
renderRawSync
renderRawSync 方法与 renderRaw 相同，但在底层使用同步 API。
const template = `
<h1> Hello {{ username || 'Guest' }}! </h1>
`
edge.renderRawSync(template, { username: 'virk' })
保留关键字
编译后模板的内部实现依赖于以下变量，你绝不能将它们定义为模板状态。
template$contextstate$filename