【Jade】jade的一些使用技巧

最近在学习使用Node的express框架来搭建一个web网站,其中会涉及到视图渲染方面的东西。这可以借助ejs或者jade这些模板引擎来辅助渲染(模板引擎有很多,使用得最多的、较为完善的就是ejs和jade)。

关于选择哪个模板引擎比较好?网上也有不少的说法,我也上网查看了一下,基本上是“一边倒”,然而最后我还是没能从网上得出哪个模板引擎的使用比较好。ejs的语法和一般的PHP、JSP比较相似,是使用<% code %>这种尖括号百分号包含内容的方式,看起来不难,学习的成本也不算太高,但我觉得缺点就是过多地使用<%%>这种方式来嵌套会很容易弄糊涂感觉一不小心就写错了,想要找出问题来可能也比较麻烦。而jade的语法却和zen-coding比较相似(关于zen-coding的语法大家可以网上再搜一下资料,这里就不详细叙述了,zen-coding据说是以前的叫法,现在也有人叫emmet,在sublime
text安装该package会十分方便平时的编码),个人认为它比较接近人的思维吧,是按照逻辑一层一层地往下写代码,会有种锻炼人的逻辑的赶脚鸟~但是jade的学习成本是比较高的,最好是先有zen-coding的语法基础,这样学起jade来会易上手很多。网上比较早的一些node教程在降到模板引擎部分时,大多是使用ejs来讲解,这可以降低学习的难度吧,适合初学者。

但最后我在做项目的时候还是选择了jade,原因是有了zen-coding的基础,加上在做项目的时候想要挑战一下自己学习一门新的语言咯~

提供一个Jade学习网站:http://segmentfault.com/a/1190000000357534

由于个人比较习惯使用sublime text来编码,所以建议学习jade的时候最好安装一下与jade相关的插件,https://packagecontrol.io/search/jade 这里有一些在sublime text里可以安装jade的插件,按照名字在package install里安装就OK鸟~

Jade是会使得jade文件在sublime text编辑器下语法高亮显示;

Jade Build据说按住Ctrl+B就可以把jade文件编译成HTML文件,HTML文件的输出在相同的目录下,可是我试了下没能成功输出~;

JadeSnippets也可以很好地帮助jade的编写速度(这个插件不错);

我最想安装的是HTML2Jade插件,该插件是把HTML文件自动转换成jade格式的文件,可惜我在package install那里没搜到这个插件,更别说安装了。在此提供一个在线转换的网址吧:http://html2jade.aaron-powell.com/  用起来感觉还不错~

其他的jade插件我就没安装了,但大家可以去试试它们的功能。

接下来聊聊一些jade的技巧吧:

在jade里面要极为小心空格,因为jade是使用空格来控制元素的嵌套关系的,有时候多一个空格或者少一个空格就会出错,最常见的错误就是在node控制台或者根据路由在浏览器打开该页面的时候,会提示“indent”的缩进问题,导致页面无法显示。建议要么使用tab,要么使用键盘的空格键来控制,不要混用,不然会增加出错的几率。网上还有人提到jade是使用2个空格来控制缩进,而不是4个空格,这个当大家在遇到类似的问题时也不妨从这方面入手解决。

另外,如果出现只能渲染出模板文件(即通用元素),子内容部分渲染不出来的时候,不妨看看是不是在extends layout和block content之间加入了空行或者空格,要把它去掉。

Author:致知

Sign:路漫漫其修远兮,吾将上下而求索。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-20 12:26:39

【Jade】jade的一些使用技巧的相关文章

学习前端模板引擎 jade (一)

一.为什么要学习jade? 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版. 对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了. 废话不多说,直接切入正题. 二.开始装jade. jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去nodejs的官方网站下载nodejs的

Jade教程

Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用. 如何写前端js代码 script(type='text/javascript'). $(document).ready(function () { alert('马良设计'); }) 请注意后面有个. 引用前端的js文件 script(src='/javascripts/jquery-1.10.2.js') 如何写前端css代码 引用css样式 link(rel='sty

express框架结合jade模板引擎使用

在views文件夹里新建一个jade.jade文件作为模板: html head title 哈哈 body #box ul li 标题1 li 标题2 li 标题3 li 标题4 #aside 在js里关联: var express = require("express"); var app = express(); var jade = require("jade"); app.engine("jade",jade.__express); a

Jade —— 源于 Node.js 的 HTML 模板引擎

Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用. 试玩 你可以在网上试玩 Jade. 特性 客户端支持 代码高可读 灵活的缩进 块展开 Mixins 静态包含 属性改写 安全,默认代码是转义的 运行时和编译时上下文错误报告 命令行下编译jade模板 HTML5 模式 (使用 !!! 5 文档类型) 在内存中缓存(可选) 合并动态和静态标签类 可以通过 filters 修改树 模板继承 原生支持 Express JS 通过

jade简介

模板引擎:将动静部分糅合的一种实现机制或者技术 var items = [ {title:'..',photo:'http://',id:1,desc:'a'}, {title:'..',photo:'http://',id:2,desc:'a'}, {title:'..',photo:'http://',id:3,desc:'a'} ] 我们平常看到的网页,里面有图片啊,文字啊,都是html代码,这些可以看作网页中的数据,这些数据有些是写死到页面上的,也可能是存在数据库里面的,如果是写死的,那

使用prismjs为网站添加代码高亮功能

prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高亮解决方案.科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能,本文教你如何在wordpress上快速使用Prismjs实现代码高亮. 一.下载JS和CSS文件并上传到网站根目录. 在Prismjs网站下载页面下载需要的JS和CSS文件,下载页面: http://prismjs.c

推荐13款javascript模板引擎

javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. EasyTemplate 在使用过Freemarker模 板后,感觉它的 语法比较朴实,平易近人,容易上手,于是决定按它的语法风格实现一个前端的 模板引擎,这就有了

js模板引擎介绍搜集

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

NodeJS 常用模块积累

cluster&forever cluster & forever 虽然 nodejs 原生已经提供了 cluster 模块,大部分情况下可以满足我们的基本需求,但这两个模块 cluster 和 forever 都提供了更强大的功能. cluster 及 forever 都能让你的 nodejs 应用的管理更加方便,比如启动.重启.停止你的应用. 他们也都可以保证应用的稳定性,如果你的 nodejs 程序存在错误而使进程关闭了,cluster 或 forever 都能自动重启他们,以保证