【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面

最近在做官网，首先想到用这个EJS，有句话怎么说的，万物都可以ejs，是吧！

1、ejs特点：

快速编译和渲染
简单的模板标签
自定义标记分隔符
支持文本包含
支持浏览器端和服务器端
模板静态缓存
支持express视图系统

2、ejs常用标签：

写ejs基本上都要用 <% %>包起来，这是语言规则

<% %> 流程控制标签，for循环，if else等
<%= %> 输出内容标签 text文本内容，像v-text的能力
<%- %>输出标签可以解析html标签内.,像v-html的能力
<%# %>注释标普通的注释都会编译，ejs这种注释就不会编译到
% 对标记进行转义
<%- include(path) %> 引入 path 代表你引入其他模板的路径，里面可以支持传参数

3、ejs之我的经验：

ejs就是一个编译的模版，操作的就是string内容，不管是src还是text都可以进行 <%= %>替换
如果有html需要变异到就直接用<%- %>就好了
meta、css、js、html` 等都可以通过ejs的方式进行编译，他就有这样的组合的能力
我们的模版用.html结尾，引入的ejs，用.ejs结尾

4、Ejs实战：

学习和使用一个技术，我更喜欢去github或者npm.com上去看，那么我们在后者看看吧https://www.npmjs.com/package/ejs

ejs.renderFile(filename, data, options, function(err, str){// str => Rendered HTML string
});// 上面的str就是导出的数据，我们把他存起来
fs.writeFile('dist/'+ type +'/' + elem + '.html', str, function(err) {console.log(type + ': ' +  elem + ' is success!')// 最后我们把转化的文件直接存储起来
})

filename表示你读取的数据
data就是你传递到html模版的数据
option就是一些缓存或者什么的参数
callback就是一个成功失败的回调

转出有方案了，那我们的数据是哪里来了，我们可以把数据放在某个json文件中，作为数据源

fs.readFile('./src/lang/data.json', function(err, data) {if (err) Promise.reject(err);writeFiles(files, JSON.parse(data), 'en')
});

还有一个问题就是文件夹下面的html怎么读取，那我们就要找到之前的CSDN有写到 https://blog.csdn.net/Shaoyouiqng/article/details/121208361，这里有对应的读取方法

function writeFiles(files, data, type) {var files = require.context('./src/pages', false, /\.html$/)files.keys().forEach(function(url){var [file , name] = moduleRE.exec(url)逻辑处理})
})
// 这里的files就是上面的

总结就是： data数据–>读取html文件—>ejs转换–>存储

参考链接

【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面相关推荐

git官网下载不了或下载很慢的解决办法！
国内访问git官网很慢,有的地区甚至直接无法访问,这时候可以去淘宝镜像站点访问下载git 下载地址:https://npm.taobao.org/mirrors/git-for-windows/ 告 ...
仿迅雷官网html模板,jquery css3 animation属性仿迅雷登录页面带幻灯片单页模板
样式仿迅雷的,重新手写清爽代码资源下载此资源下载价格为4D币,请先登录资源文件列表 codedown123-0814-35/images/all.css , 29088 codedown123-0 ...
怎么传文件到百度云服务器,别人传文件给我可是怎么用百度网盘保存文件呢其实很简单！...
昨天有不少朋友问老北,百度网盘点下载没有反应,所以老北写一篇关于网盘如何下载文件和上传文件(本文适合新手,高手请飘过吧,手下留情). 生活中或者工作中经常会涉及到传送文件,一般大小的文件都是用微信.Q ...
编程游戏python我的世界_乐学Python编程-做个游戏很简单
1.进入Python 编程世界/ 2 1.1 启动Python 编程环境/ 5 1.2 Python 之禅/ 9 1.3 送你几朵玫瑰花--运行Python 程序/ 16 1.4 Python 的由来 ...
python html做界面_[Python]简单的HTML页面合并脚本
最近写一个BootStrap页面...因为功能需要所以决定一个页面解决所有问题,然后用jQuery来动态显示功能....然而这样做的话页面会相当庞大,一堆隐藏模态窗口和功能p都堆在一起看起来挺难受的 ...
乐学python编程做个游戏很简单_乐学Python编程-做个游戏很简单
Python简单易学又功能强大,而且免费开源,在国内外的很多公司得到了广泛的应用.在科学计算.游戏.图像.人工智能.机器人.教育教学和航天飞机控制等很多领域,Python也是非常重要的编程工具. 本书 ...
如何用计算机做字库,用自己的字体做电脑字库很简单，只需要耐心写完8890个汉字...
提及字体设计,很多人都会认为那一定是专业设计师做的事情. 那我不是专业的设计师,我是否可以设计一套自己的专属字体呢? 当然可以,不过你需要非常有耐心地写完8890个汉字,并且是用黑色的中性笔或者钢笔书 ...
U盘数据恢复怎么做？其实很简单！
自从接触U盘开始,不少用户都觉得U盘在储存文件和数据方面十分灵活方便,小巧的体积方便携带,也不需要充电等操作就能保存数据,因此用过的人都会喜欢. 但凡事有优点就会有缺点,很多时候我们在使用U盘的过程中 ...
给小朋友做的一个很简单的游戏
按上下左右键,或触摸方式,控制植物战士消灭僵尸. 在电脑.手机.平板上都可以玩. <!DOCTYPE html> <html> <meta name="view ...

【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面

1、ejs特点：

2、ejs常用标签：

3、ejs之我的经验：

4、Ejs实战：

参考链接

【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面相关推荐

最新文章

热门文章

【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面

1、ejs特点：

2、ejs常用标签：

3、ejs之我的经验：

4、Ejs实战：

参考链接 insertAdIfNeeded();

【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面相关推荐

最新文章

热门文章

参考链接