HTML模版語言-pug介紹與安裝

2019鐵人賽

lagagain

2018-10-22 22:55:25

11733 瀏覽

這幾天都在寫關於模組化的東西，但是不管是HTML imports、Shadow DOM還是CustomElementRegister，雖然已經列入標準了，但是目前瀏覽器支援都不算高。
透過Can I Use ?可以查詢目前瀏覽器支援狀態：

所以雖然已經列入標準，但是當下仍不實用。

PHP作爲HTML的模版引擎

在說到Pug之前，先來提提PHP。PHP依然是許多免費服務會支援的後端工具。類似於Python、Node.js等等網頁框架有提供動態生成HTML，並寫模版的模版語言一樣，PHP也可以作爲HTML的模版引擎。前幾日曾經在社群裡看到下面分享

PHP 的原創造者 Rasmus Lerdorf：
「1993 我用 C 寫 CGI，HTML 跟程式碼纏在一起，隨便改個 html 就要重新 compile 一次。

這麼搞超容易炸掉的，然後我喜歡寫後端，超討厭碰前端。試過用 perl 來寫 CGI，可是好像沒好到哪裡去。要寫前端的人不要搞爛 perl 比要他們不要搞爛 C 還殘暴。

我希望可以丟一些看起來像是 HTML 的東西給寫前端的人用。所以才會生出 PHP 這套樣版引擎，作為前端 html 跟後端 C 程式碼的中介層。

結果阿，大家都在樣版引擎裡面寫商業邏輯，沒人想寫 C 的部分。我一直覺得這太過靠北無法接受。

直到我看到有人開始在我的樣版引擎裡面寫他自己的樣板引擎好吧，我輸了，我投降」

在PHP裏面有include，作爲HTML模組話可以這麼用，沒錯就是把區塊拆開。
不過之所以不說PHP，是因爲PHP已經很好的跟Apache等網頁伺服器結合。而我希望做的是靜態網頁的模組化，儘管PHP一樣可以做得到，但是PHP的程式不如CLI程式用的好看。比如說用php file.php，得到的會是一堆輸出，要寫入檔案需要而外的處理(譬如使用管線(pipe))。(如果有其他用法，像是php file.php file.html或是php-compile file.php -o file.html還請告訴我 :) )

所以我需要一個類似c/c++的編譯器，且支援include。另外，有朋有曾經說過：

一個沒有block的HTML模版語言是垃圾

所以我需要的還要支援extends/block繼承。

在Pug之前

HTML模版語言非常的多，我個人比較喜歡Djula或是lua-resty-template這種比較接近原本的HTML，也比較像Vue.js、ejs這種在前端渲染的風格。只可惜我沒找到獨立的CLI工具。

Pug有一個線上嘗試的網站：PugHtml。在安裝之前可以先到這邊練練手。
另外，接下來只會說到include和繼承而已，相關的Pug可以去看看官方的文件。

爲什麼最後會選用Pug最爲模版引擎呢？第一Pug同樣接受原本的HTML格式:若是遇到<開頭，會自動將該行後面內容不變動的輸出。另外因爲Pug的設計，在未經過轉換後的原始Pug文件，其中Pug的程式碼就只是像文字顯示而已。比如說：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Document</title>
  </head>
  <body>
    h1 hello
  </body>
</html>

上面程式碼中<body></body>裡的內容--h1 hello，在瀏覽器直接顯示就會是h1 hello。相同的我們可以寫成include file.pug，在瀏覽器也同樣直接顯示include file.pug。但是經過轉換後h1 hello會變成<h1>hello</h1>。所以轉換後完整程式會呈現

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <h1>hello</h1>
</body>
</html>

安裝Pug CLI

Pug是用Node.js寫的，首先必須安裝好Node.js，在使用npm安裝，不過我要安裝的是獨立的CLI程式：npm install -g pug-cli

之後變可以使用pug [options] [dir|file ...]來轉換檔案。

options

-h, --help             output usage information
-V, --version          output the version number
-O, --obj <str|path>   JSON/JavaScript options object or file
-o, --out <dir>        output the rendered HTML or compiled JavaScript to
                       <dir>
-p, --path <path>      filename used to resolve includes
-P, --pretty           compile pretty HTML output
-c, --client           compile function for client-side runtime.js
-n, --name <str>       the name of the compiled template (requires --client)
-D, --no-debug         compile without debugging (smaller functions)
-w, --watch            watch files for changes and automatically re-render
-E, --extension <ext>  specify the output file extension
-s, --silent           do not output logs
--name-after-file      name the template after the last section of the file
                       path (requires --client and overriden by --name)
--doctype <str>        specify the doctype on the command line (useful if it
                       is not specified by the template)