Hike News
Hike News

pug 筆記

pug

在學習 node.js 時，利用 pug 可以使用像 JavaScript 設定變數、判斷式、Loop 的功能，再加上只需要在 Render 設定要套到到 pug 內的資料，就可以作到使用相同的一個 pug 頁面呈現多個不同內容的頁面，加上因為覺得十分的方便，所以筆記起來。

使用手冊：https://pugjs.org/api/getting-started.html

線上練習：PugHtml

用 NPM 安裝

1
npm install pug --save

使用

編寫的方式和 HTML 差別不大，主要有：

  • 不用在標籤名稱外加 <> 括號

  • 只要寫標籤名稱加上一格半形的空格就是一個元件

  • 內容文字要在空格後，和標籤名稱同行

  • | 有切開、單獨成一個字串的意思，可以用在內容文字換行，以及文字與標籤的分隔使用

    1
    2
    3
    4
    5
    // 在 p 標籤內的換行
    p
      | abc
      | de
    //

  • 要在標籤內加上第二個標籤時，要在第二個標籤名稱前加上一格 Tab

  • 有 Class 時在 ClassName 前加 . ，有 Id 時在 IdName 前加上 # ，和 CSS 選取器一樣

載入 pug

1
const pug = require('pug');

還需要設定 view engine 屬性，讓 node 在執行時知道網頁是用 pug 檔

1
app.set('view engine', 'pug');

這不是必要的設定，沒設定時只要在檔名後加副檔名就可以了。

路徑

設定尋找檔案時要從哪一個資料夾開始向內尋找

1
app.set('views', 'path/views');

在設定網頁呈現時，就會到 path/views 內找檔名是 index 的 pug 檔 

1
2
3
4
5
app.get('/', function (req, res, next) {
  res.render('index', {
    name: 'Bob'
  });
});

If… Else…

在 node 內是可以事先設定變數，之後再使用

1
2
3
4
var authorized = true
res.render("index", {
 authorized: authorized
});

在 pug 時也是一樣，所以加上 If... Else... 時，就可以作判斷

1
2
3
4
5
- var authorized = true;
if authorized == true
 .authed 登入
else
 .anon 訪客

case 判斷

1
2
3
4
5
6
7
8
- var Num = 2
case Num
  when 0
    p 變數的值為 0
  when 1
    p 變數的值為 1
  default
    p 變數的值為 #{Num}

變數

  • 變數可以是取得從 node 後端傳來的資料，也可以是在 pug 作設定
  • 純文字的變數可以用 #{變數名稱}
  • HTML 的屬性加變數是用 ${變數名稱}
  • 在 pug 要設定變數使用就要在前面加上 -

要知道有沒有正確取得資料，pug 有 pug.compile() 可以在傳到 pug 前先在 JavaScript 內做測試

1
2
// index.pug 檔內容
p #{name}'s Pug source code!

要檢查呈現的樣子

1
2
3
4
5
6
7
8
9
10
11
12
13
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

each loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
app.get("/bookstore", function (req, res, next) {
  // Your route data
  var bookStore = [
    {
      title: "Templating with Pug",
      author: "Winston Smith",
      pages: 143,
      year: 2017
    },
    {
      title: "Node.js will help",
      author: "Guy Fake",
      pages: 879,
      year: 2015
    }
  ];
  res.render("index", {
    bookStore: bookStore
  });
});

要用 index 內的廻圈取出物件的值時，就可以使用 each 變數名 in 物件 的方法

1
2
3
4
5
6
each book in bookStore
  ul
    li= book.title
    li= book.author
    li= book.pages
    li= book.year

each and while 使用例子參考

script 標籤

1
2
3
4
5
script.
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')

在 script 後要加 . ，沒加時全部都會被轉成 HTML 格式使用

block / extends / include

  • block 在樣版 pug 內保留可加入內容的區塊
  • extends 把內容加入到指定的樣版之中
  • include 會完整的把指定的網頁加入到目前的位置
1
2
3
4
5
6
//- layout.pug
html
  head
    block scripts
  body
    block content

要加入的 pug

1
2
3
4
5
6
7
8
9
//- page.pug
extends layout.pug

block scripts
  script(src='/all.js')

block content
  h1 title
    include footer.pug

再利用 include 加入 footer.pug 的內容

1
2
//- footer.pug
p Company©2020

就可以合併完成一個網頁

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <script src="/all.js"></script>
  </head>
  <body>
    <h1>title</h1>
    <p>Company©2020</p>
  </body>
</html>