Koa模板引擎之art-template

之前有谈到过ejs模板引擎对于art-template模板引擎性能更好，同时art-template也支持ejs语法而且运行速度快，语法相对ejs洁捡一点。

根据官网的内容来

const views=require(‘koa-views’);
const Koa=require(‘koa’);//引入模块
const Router=require(‘koa-router’);
var koastatic = require(‘koa-static’);
var app = new Koa();
var router = new Router();//实例化
var path = require(‘path’);
const render = require(‘koa-art-template’);

//配置art-template模板引擎
render(app, {
root: path.join(__dirname, ‘views’), //视图位置
extname: ‘.art’, //文件的后缀名
debug: process.env.NODE_ENV !== ‘production’ //调试模式的开关设置
});

app.use(async function (ctx) {
await ctx.render(‘head’);
});

router.get("/",async (ctx,next)=>{

await next();

})

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000)
整理如下
创建个head.art的文件

app.use(koastatic(__dirname+’/static’));
忘记配置静态资源了加上去
访问3000端口

对于模板配置环境静态资源的后缀名要和你对应的静态资源后缀名保持一致，如果想使用Html改模板配置就行了。运行官网的代码会提示你找不到path
root: path.join(__dirname, ‘views’)
只要引入path模块就行了。

循环原始的ejs和arttemplate语法对比
<%=arr%>
<%for(var i=0;i<arr.length;i++){%>
<%=arr[i]%>
<%}%>

<br>

{{each arr}}

{{$index}} {{$value}}

{{/each}}

服务传给head.ejs一个数组 在head.art拿到它测试看输出

输出
<%-arr%> {{@arr}}

条件判断旧的ejs 服务器传一个num值为30
<%
if(num>50){%><%=num%>大于50<%}
else{%><%=num%>小于50<%}
%>

输出
{{@}}是绑定html元素的写法等同于原先的<%-%>
{{}}是不绑定html的写法等同于<%=%>
Art-template写法
{{if num<50}}

小于50

{{else}}

大于50

{{/if}}

说了一下ejs和art-template的循环，条件，忽视Html和不忽视html元素的输出。这几种比较常见还有一些语法可以看官网。