EJS入门(模板引擎twig转EJS)
环境搭建 php(symfony)+node+express+ejs(+vue) 项目目录如下,真是要感谢吉大神,端午节抽了几个小时给我理了一下项目构造,还有环境搭建和路由之类的问题,发现要学的真是太太太多了。下面目录具体的准备做个图解释一下构成。。。
因为要用到EJS,我是直接看的EJS官网的,官方文档真的是很简洁。。。后来发现得了解一下twig的语法,不然不会改,下面是这两个模板引擎的笔记。
EJS
安装 $ npm install ejs 项目中配置文件app.js中 设置模板引擎
app.set('view engine', 'ejs');
然后就可以使用啦,我的views里面的文件都是.ejs文件,其实跟html没什么差别,就是在html中用了一些EJS的标签。
注意写的时候<% %>标签里面两边都要有空格。官网copy的标签含义,其实常用的就两个。
配几个例子就很容易看懂了,写的测试文件。
<%= %>输出转义html标签,包裹的可以是变量。 <% %> 这个无输出,js可以写里面,循环,判断之类的。
<!DOCTYPE html> <html> <head> <% include header.ejs %> </head> <body style="text-align: center"> <h1> <%= data.count||'其他' %> </h1> <h1> <% if(data.routes.indexOf('我')){ %>可以<% }else{ %>不可以<% } %> </h1> <h2><%= data.year+data.month %></h2> <ul> <% for(item of data.rout){ %> <li><%= item %></li> <% } %> </ul> </body> </html>
均可以输出结果。公共的头尾文件单独出来用 include 引入。里面有逻辑运算,if else,字符串拼接,循环语句。大概就是这样,有个自定义分隔符,我觉得没啥用。具体的重构过程中,twig中还有filter,extends还需要再研究研究。