iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
1
Modern Web

從零開始遲來的Web開發筆記系列 第 7

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

這幾天都在寫關於模組化的東西,但是不管是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.jsejs這種在前端渲染的風格。只可惜我沒找到獨立的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)

Use Example

也就是可以這麼使用:pug entry.pug -o public/。如此一來在public資料夾下就會建立一份entry.html檔案。

接下來將會介紹Pug其中關於includeextends/block的用法


上一篇
WebCompose超有用網頁模組化 - CustomElementRegistry
下一篇
HTML模版語言-pug的指令『include』和『繼承』
系列文
從零開始遲來的Web開發筆記30

尚未有邦友留言

立即登入留言