這幾天都在寫關於模組化的東西,但是不管是HTML imports、Shadow DOM還是CustomElementRegister,雖然已經列入標準了,但是目前瀏覽器支援都不算高。
透過Can I Use ?可以查詢目前瀏覽器支援狀態:
所以雖然已經列入標準,但是當下仍不實用。
在說到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
繼承。
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是用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)
也就是可以這麼使用:pug entry.pug -o public/
。如此一來在public資料夾下就會建立一份entry.html檔案。
接下來將會介紹Pug其中關於include
和extends/block
的用法