[筆記] 相見恨晚的網頁模板 Pug

前言:

本篇是介紹 Pug 這個相見恨晚的網頁模板!

pug是我在hahow購買的前端課程中,講師在範例中所使用的網頁模板!
我主要是寫python程式的,會學這個,很大一部分的原因是它不用括號
而是用縮排來區分程式區塊 (block)。

在程式編輯器還沒有那麼強大之前(如VS Code)...我寫JS或其他語言,
少打一個括號,程式就無法執行,偏偏眼殘找不出哪邊少了括號...
所以一見到python這種不用括號的語言,跟我相性很合!

在這個前端的課程中,講師在Codepen上使用 Pug+Sass 讓我一試成主顧!
不過這篇不是Pug的教學,網路上已經有很多相關教學了,我也會在文章
最後附上一些pug的相關連結。

本篇要介紹如何在 VS Code裡使用Pug !
我在網路上爬文,想要在本機端使用Pug 的方法跟 在Codepen相比
真的差很多...最常看到解答:

  1. 使用 Gulp
  2. 使用 Vue Cli 建立一個專案
  3. 使用 Prepros

以上,除了2日後比較有機會用到外,1&3 都不太符合我的使用習慣
這裡就介紹我目前所使用的方法:

在VS Code裡面安裝下面的套件:
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
連結裡就有示範用法了,這邊就不灌水填版面了 XDDD
文章最後說一下這個套件的優缺點:

優點:

  1. 可以同時live檢視 pug 跟sass

缺點:

  1. 安裝後,VS Code啟動會變慢...不用時最好關掉
  2. 無法用專案的模式,如webpack或vue cli

Reference:

1.Pug官網
2.精通 Pug 樣版語言(一)語法基礎篇
3.Prepros官網

Facebook Comments