doudou-eggjs-handlebars
v1.1.5
Published
Egg plugin for handlebars
Maintainers
undskyReadme
doudou-eggjs-handlebars
Egg plugin for handlebars
| 公众号 | 微信交流群 |
| -------------------------------------------- | --------------------------------------------------------------- |
| 
| 
|
目录
安装
$ npm i doudou-eggjs-handlebars --save支持的 egg 版本
| egg 3.x | egg 2.x | egg 1.x | | ------- | ------- | ------- | | 😁 | 😁 | ❌ |
开启插件
// {app_root}/config/plugin.js
exports.handlebars = {
enable: true,
package: "doudou-eggjs-handlebars",
};配置
// {app_root}/config/config.default.js
config.handlebars = {
options: {
data: true,
compat: true,
knownHelpers: true,
knownHelpersOnly: false,
noEscape: false,
strict: false,
assumeObjects: false,
preventIndent: true,
ignoreStandalone: true,
explicitPartialContext: true,
},
runtimeOptions: {
allowProtoMethodsByDefault: true,
allowProtoPropertiesByDefault: true,
},
partialsPath: null, // 默认在 view.root 对应的 partials 目录下
ts: true, // CSS、JavaScript 外部资源引用是否添加时间戳
};更多配置说明请参考 Handlebars 官方文档
示例
基本使用
// controller
async index() {
const { ctx } = this;
await ctx.render('index.html', {
title: 'Hello Handlebars',
name: 'World'
});
}模板文件
<!-- app/view/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>Hello {{name}}!</h1>
</body>
</html>内置 Helper
xif - 条件判断
{{#xif "age > 18"}}
<p>成年人</p>
{{else}}
<p>未成年</p>
{{/xif}}math - 数学运算
{{math value "+" 10}} {{math value "-" 5}} {{math value "*" 2}} {{math value "/"
2}} {{math value "%" 3}}link - 引入 CSS
{{link "/static/css/style.css"}}
<!-- 输出: <link rel="stylesheet" href="/static/css/style.css"> -->script - 引入 JS
{{script "/static/js/app.js"}}
<!-- 输出: <script src="/static/js/app.js"></script> -->Partials (代码片段)
在 app/view/partials/ 目录下创建代码片段：
<!-- app/view/partials/header.html -->
<header>
<h1>{{title}}</h1>
</header>在模板中使用：
{{> header}}完整项目
参考 doudou-eggjs 项目查看完整使用示例。
请我喝杯咖啡
如果项目对你有帮助，可以请我喝杯咖啡 ☕️
联系方式
- 🌐 网站: https://www.undsky.com
- 📮 Issues: 提交问题或建议
贡献指南
欢迎提交 Issue 和 Pull Request！
如果这个项目对你有帮助，请给我们一个 ⭐️ Star 支持一下！