Pug ft. Sass
快速打造靜態網頁生成器

陸勇盛 (David Lu)

yungshenglu1994@gmail.com

JUL 02, 2018

@DigitalOcean.Hsinchu

David Lu

• Graduated student @CS.NCTU

  • SDN/NFV, Wireless Sensing.

• 誤打誤撞 投入網頁生態！

  • 著迷於前端，以全端為終極目標。

• 以嘗試 結合不同的工具 為樂！

• 對 土砲 很有興趣！

• ​Recent in ​Docker, OpenStack,

  • “當然少不了前端開發”

About

為何要造輪子?

What I cannot create, I do not understand
                                                       - Richard Feynman

現有許多工具，為何要 土炮？

透過 實作 學習！

經過自己的實驗證明、在製作工具的過程中，
       因為需要某種功能，就必須需思考如何完成！

只想簡單、快速弄出一個說明頁面，
      又不想用套裝軟體或學習網頁技術，有這麼難嗎？

Web Generator

Why         +         ?

Pug

• 前身：Jade

• 以 Node.js 為基礎的模板引擎

• 比起 靠北難寫的  HTML，語法較簡潔

• 支援 類似物件導向 的概念

  •  

  • 可維護性高！

Pug

About

• Syntactically Awesome StyleSheets

• Sass 是一種 CSS 的擴充語言

  • i.e., LESS, Stylus, etc.

• 比起 容易寫爛的 CSS，容易維護且簡潔

  • e.g., variables, nested rules, mixins.

• SCSS 是新一代的 Sass

  • 語法是 CSS3 的擴充

  • 很像在寫 CSS 但卻不是 CSS ...

Sass/SCSS

About

• 比起 C/C++ 開發，
  Node.js 擁有大量的模組！
   

• npm package
  大大加速程式開發的進程！

快速！

在 Rust、GoLang 等語言的崛起後

               在某些方面的宰制力已經不及以往

還是要對           

不歸路的開始

收到 Co-worker - 瞿旭民 (@kevinbird61 on GitHub) 的邀請

白手起家的開始...

• 以 Node.js 開發出一個能夠簡單撰寫論文的工具為目標​

• 簡單的格式撰寫後，生成看似很專業 README

docoGen

About

產生           的文件

• IEEEtran

• Proc

• Report

• Article

• 從 Markdown 轉換的結果

DEMO

• 使用 React 產生 靜態網站 的模組
• 增加 docoGen 對於 文件的支援性！

docoGen WebUI

About

連結在這裡！

每次嘗試......

papoGen

About

1. 撰寫好呈現內容

2. 透過 papoGen 指令 給定生成參數

3. 依據 生成參數 生成

   • 提取版型 (doc, resume) 及 CSS 資源

   • 將資源 (圖檔、程式碼檔案) 複製到目的地

   • 生成網頁程式碼並儲存

Workflow

• 起始使用 Paper.css 作為 CSS 樣式
   

• 使用 Sass/SCSS 自幹一個簡單的 Web UI 的 API

  • 欠缺美術天分，只好先向知名 UI 取經 ＱＱ
     

• 透過 Pug 可依照想要的 CSS 來實作模板！

papoGen.css

• 目前提供二種模版： doc / resume / papogen
   

• 參考原始碼中 lib/template/ 的 *.pug 檔案
   

• 允許自定義模板

  • 在 lib/template 下新增 <template name>.pug

  • 依照格式自行撰寫模板
     

• 利用 Pug.js 可以分檔 的特性，提升模板的可讀性！

Template

• 使用 JSON / YAML / Markdown 作為文檔格式​

  • Markdown 適合撰寫教材與 Markdown Blog

• 支援 最需要的基本格式
  • e.g., 程式碼、數學公式、圖片、條列、表格 ... 等

• 提供 指令生成範例模板

• 編輯後再 透過指令生成目標網站

文檔格式

指令支援

Let's papoGen !

DEMO

環境準備

Step 0.

1. 安裝 Node.js：安裝 Node.js 8.11.3 LTS Installer

2. 安裝 papoGen：透過 npm 安裝 papoGen
   
    

3. 下載 papoGen DEMO 專案

連結在這： GitHub - papoGen DEMO

開啟檔案編輯

Step 1.

1. 開啟檔案：

   1. Line 25 - 將 /* NAME */ 取代為您的姓名。

   2. Line 28 - 將 /* SUBJECT */ 改為您目前職位。

   3. Line 55 - 將 /* EMAIL */ 改為您的電子信箱。
       

2. 開啟檔案：

   1. Line 16 - 新增 selectable: true 與 sample: true。

   2. Line 37 - 將 color: blue 改為 color: brown。

   3. Line 79 - 將 cirular: true 改為 rounded: true。

透過指令生成網頁

Step 3.

• papoGen 生成指令

來源 URL

生成 URL

來源格式

套用模板

詳細指令參考： GitHub - papoGen DEMO

查看結果！

Step 4.

• 請至                                                             查看生成結果！

What is Next?

Next?

• 將網頁生成為 PDF 文件的 Resume

• Web UI 元件與模板的支援度

• Markdown Parser 的支援度

• 客製化

papoGen

Developers

瞿旭民 (@kevinbird61)

陸勇盛 (@yungshenglu)