如何安装和使用Jade

最近我在YouTube上看了一些video教程,碰到这个JADE的东西,我怎么安装和使用它来进行我的网页开发?

我search了一下,但没有find一个适当的网站,教一步一步继续。 而网站jade-lang.com不可用。 我从网站做到这一点,但node.js抛出一些错误。 下面的截图:

在这里输入图像说明

first玉是不推荐的,玉的新名字是帕格关于这个链接的更多信息

帕格文件

second要安装帕格写这个命令npm install pug -g后,创build一个新的文件夹到您的项目,并创build一个文件,在您的项目file.pug里面, right click您的文件夹项目+ shiftopen 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 

有关帕格的更多信息,请查看此链接帕格的完整文档

翡翠现在被称为“帕格”。

npm安装pug -g

在这里你可以find如何使用它,如果你向下滚动:

https://www.npmjs.com/package/pug