Question

最近我在youtube上观看了一些视频教程并遇到了这个JADE的事情，如何安装和使用它进行我的网站开发？

我用谷歌搜索它，但没有找到一个适当的网站，一步一步地教导。并且网站jade-lang.com不可用。我是从网站上做到的，但是node.js会抛出一些错误。截图如下：

Answer 1

first jade已被弃用，jade的新名称是pug，有关此检查此链接的更多信息

second安装pug在安装pug之后编写此命令npm install pug -g为项目创建一个新文件夹，并在项目中创建一个文件file.pug和right click文件夹项目+ shift 和open command window here并在编写此命令后编写此命令pug file.pug它将生成一个新文件file.html

Third编写此命令pug input.pug input.html --watch --pretty

保存在file.pug

后，

--watch编译代码

--pretty编写格式为html（有组织的代码）而不是minimized code

的代码

在pug中写一个标签，写下标签的名称，如

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编译为
为标记编写类名和内容，例如p.demo this is a paragraph编译为<p class="demo"> this is a paragraph</p>
为标记编写id和内容，例如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

最后这是pug代码的一个例子

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

有关哈巴狗的更多信息，请查看此链接pug full documentation

Answer 2

Jade现在被称为“哈巴狗”。

npm install pug -g

如果向下滚动，您将在此处找到如何使用它：

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

如何安装和使用Jade

2 个答案: