Notes on the pug

I. Introduction

Pug is a robust, flexible, feature-rich template engine, developed specifically for Node.js platform. Pug was renamed from the Jade, he can help us write html when more straightforward.
Installation, using the procedure pug
open cmd
direct input npm install pug-cli -gd
last exhibit FIG like the installation is successful:
image description

Create a folder in the folder and create a index.pug name.bat the file, and then use Notepad to open the file name.bat then enter pug pug -P ( "P" in uppercase) -oa -w, double-click the name it will automatically create a .bat a file that will automatically generate a file in index.html index.html in index.pug can write in plain and simple.

Note written index.pug a space and tab can not be used, otherwise the compiler failure phenomenon occurs.

Here to show you some simple syntax of the pug's

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
        link(rel="stylesheet", href="../css/index1.css")
    body
        div(class="div1")
        div(class="div2")

        a(class="button" href="http://www.baidu.com") 百度
        ='\n'
        input(
        type='checkbox'
        name='agreement'
        checked
        )

(The above is index.pug in code)

(The following is the code in the index.html <compiled>)
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>

<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<link rel="stylesheet" href="../css/index1.css"/>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div><a class="button" href="http://www.baidu.com">百度</a>

<input type="checkbox" name="agreement" checked="checked"/>

</body>
</html>

I. Introduction

Guess you like