JS 模板文学引擎
使用 JS Template 字节直接到点模板引擎
为什么
模板字元 (又称"Template string") 是一种熟悉而简单的方法来运行嵌入式表达式和字符串插入,这是模板引擎的主要功能.
这个库用传统技术包装模板文字 (排出,分出,助出等 通过结构化文件格式为使用提供便利(.jstl(中文(简体) )
什麽
特征 :
- 布局:布局的本地支持
- 支持:方便地包括文件和通过数据
- 快: 模板默认被缓存
- 可扩展:可扩展自定义助手
怎么样
使用量
template.jstl
hello ${data.name}
index.js
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine(options)
engine.render('template', { name: 'ahmad' })
字符串内插
由于模板被解析为标准 JavaScript 模板字元 需要同样的功能
可访问变量 data 上下文
示例
index.js
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine()
const result = engine.render('template', { name: 'ahmad' })
console.log(result)
template.jstl
Hello ${data.name}
结果
$ node index.js
Hello ahmad
辅助功能
帮助者基本上是可以在模板内调用的功能.
所有助手功能都可通过 fn 上下文
示例
index.js
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine({
helpers: {
capitalize : str => string[0].toUpperCase() + string.slice(1)
}
})
const result = engine.render('template', { name: 'ahmad' })
console.log(result)
template.jstl
Hello ${fn.capitalize(data.name)}
结果
$ node index.js
Hello Ahmad
内建帮助者
fn.render(templateName, [dataObject])
行为就像 Engine.render 通过包含其他模板文件: templateName 内入
fn.apply(templateName, [dataArray])
列出 dataArray 并将每个项目适用于新提出的 templateName
示例
index.js
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine()
const actors = [
{ name: 'William Hartnell', year: '1963' },
{ name: 'Patrick Troughton', year: '1966' },
{ name: 'Jon Pertwee', year: '1970' },
{ name: 'Tom Baker', year: '1974' },
{ name: 'Peter Davison', year: '1981' },
{ name: 'Colin Baker', year: '1984' },
{ name: 'Sylvester McCoy', year: '1987' },
{ name: 'Paul McGann', year: '1996' },
{ name: 'Christopher Eccleston', year: '2005' },
{ name: 'David Tennant', year: '2005' },
{ name: 'Matt Smith', year: '2010' },
{ name: 'Peter Capaldi', year: '2013' },
{ name: 'Jodie Whittaker', year: '2017' }
]
const result = engine.render('page', { actors })
console.log(result)
page.jstl
${ fn.include('header') }
<h1>List of actors who have played the Doctor</h1>
<ul>
${ fn.apply('doctor', data.actors) }
</ul>
${ fn.include('footer') }
doctor.jstl
<li>${data.name} - first appeared in ${data.year}</li>
结果
$ node index.js
<body>
<h1>List of actors who have played the Doctor</h1>
<ul>
<li>William Hartnell - first appeared in 1963</li>
<li>Patrick Troughton - first appeared in 1966</li>
<li>Jon Pertwee - first appeared in 1970</li>
<li>Tom Baker - first appeared in 1974</li>
<li>Peter Davison - first appeared in 1981</li>
<li>Colin Baker - first appeared in 1984</li>
<li>Sylvester McCoy - first appeared in 1987</li>
<li>Paul McGann - first appeared in 1996</li>
<li>Christopher Eccleston - first appeared in 2005</li>
<li>David Tennant - first appeared in 2005</li>
<li>Matt Smith - first appeared in 2010</li>
<li>Peter Capaldi - first appeared in 2013</li>
<li>Jodie Whittaker - first appeared in 2017</li>
</ul>
</body>
前题
每个模板文件都可以选择包含一个前题块,它被解析并包含在 data 上下文
示例
index.js
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine()
const result = engine.render('template')
console.log(result)
template.jstl
---
name: ahmad
---
Hello ${data.name}
结果
$ node index.js
Hello ahmad
布局
定义 a layout 属性在模板的Front Matter块中,将首先渲染出该布局,并将当前模板作为内容.
布局可以无限地升级, 唯一的限制是你的系统资源!
示例
index.js
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine()
const result = engine.render('template', { name: 'ahmad' })
console.log(result)
template.jstl
---
layout: layouts/welcome
---
<h2>${data.name}</h2>
layouts/welcome.jstl
---
layout: layouts/base
---
<h1>Welcome!</h1>
${data.content}
layouts/base.jstl
<html>
<body>
${data.content}
</body>
</html>
结果
$ node index.js
<html>
<body>
<h1>Welcome</h1>
<h2>ahmad</h2>
</body>
</html>
API 密码
构造器 new Engine([optionsObject])
返回模板引擎类的新实例
| 名称 | 类型 | 所需经费 | 默认 | 说明 |
|---|---|---|---|---|
root | String | ✖ | process.cwd() | 查找模板文件的路径 |
extension | String | ✖ | jstl | 模板文件扩展名 |
helpers | Object | ✖ | {} | key => function 要传递到模板的助手地图 |
matter | Object | ✖ | {} | 选项 传递给 gray-matter |
示例:
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine({
root: 'templates',
extension: 'html'
helpers: {
capitalize : str => string[0].toUpperCase() + string.slice(1),
...
}
})
方法 : render(templateName, [dataObject])
解析文件的内容 : ${templateName}.jstl 和通过 dataObject 返回已处理的输出字符串
示例:
const Engine = require('@ahmadnassri/template-literals-engine')
const engine = new Engine({ root: 'templates' })
engine.render('a-template') // => ./templates/a-template.jstl
engine.render('nested/template', { foo: 'bar' }) // => ./templates/nested/template.jstl
作者 : 艾哈迈德·纳斯里 二. 支助 微博: @ AhmadNassri (英语)