如何安装和使用Jade
最近我在YouTube上看了一些video教程,碰到这个JADE的东西,我怎么安装和使用它来进行我的网页开发?
我search了一下,但没有find一个适当的网站,教一步一步继续。 而网站jade-lang.com不可用。 我从网站做到这一点,但node.js抛出一些错误。 下面的截图:
first
玉是不推荐的,玉的新名字是帕格关于这个链接的更多信息
帕格文件
second
要安装帕格写这个命令npm install pug -g
后,创build一个新的文件夹到您的项目,并创build一个文件,在您的项目file.pug
里面, right click
您的文件夹项目+ shift
并open command window here
,写这个命令pug file.pug
后,你写这个命令它会生成一个新的文件file.html
Third
写这个命令pug input.pug input.html --watch --pretty
--watch
在保存到file.pug后--watch
编译代码
--pretty
写一个代码格式的HTML(有组织的代码)不是minimized code
在帕格写一个标签写标签的名字就好
-
html
标记,我们将编译为<html></html>
-
a(href='#' target='_blank') link
编译为<a href="#" target="_blank">link</a>
-
a(href='#' target=''): img(src='' alt='')
编译为<a href="#" target=""><img src="" alt=""/></a>
- 写一个评论
// this is a comment
编译为<!-- this is a comment -->
- 写标签的类名和内容例如
p.demo this is a paragraph
编译为<p class="demo"> this is a paragraph</p>
- 编写标识和内容标签例如
p#demo this is a paragraph
编译为<p id="demo"> this is a paragraph</p>
-
写一个函数
mixin list ul li foo li bar li baz
使用这个函数写出函数+list
的名字并将编译到
<ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul>
包括文件写入include file_name
最后这是帕格代码的一个例子
html head title Hello link(href='' rel='stylesheet' type='text/css') body //this is a comment p.item hello p#item br/ a(href='#' target=''): img(src='' alt='') // to start a new line | | a(href='google.com') Google // write a function mixin list ul li foo li bar li baz // use function +list // include file include content
有关帕格的更多信息,请查看此链接帕格的完整文档