繼上篇 papoGen - 靜態網頁產生器 Webpage Generator 這段時間內又額外新增了 markdown 文件轉換支援

但當時遇到一個問題，也就是透過 markdown-it, marked 等等轉換套件 完成後的成品都是一個完整的 html 格式 通常大多數的產生器主要調整的是 stylesheet （像是不同主題、色調的支援）

異想天開下，想說能不能支援其他有趣的功能，像是 table of content 的工具，讓使用者體驗更好一些 于是乎找到了一個叫作 jsdom 的套件

他能夠把現有的 html 文字檔讀取後回傳一個 DOM tree（跟瀏覽器上的 DOM 概念一樣） 那麼我們就可以直接的去操作這個 DOM tree 來在產生好的 html 格式上額外新增其他想要加的功能

以 papoGen 為例 我透過 jsdom 套件去 parse 產生好的 html 格式中 h1~h3 的標頭 來當作 Table of content (TOC) 的來源 建好 TOC 的物件後塞回去原本的 html 物件後再做靜態網站的產生 那麼使用者在瀏覽網頁時，便可以快速跳轉到想看的位置上

我主要用了兩個套件來完成產生過程：

1. pug.js : 主要透過 pug 來確定生成的版型（多頁、單頁網頁格式 … 等等）
2. jsdom: 再透過 jsdom 的方式從已完成的 html 中抽取我要的成份來做額外功能的新增

最後再透過 node.js 本身來包裝這套工具，讓你可以自由指定多種版型、多種不同來源（json, yaml, markdown）做使用 完成一個基本土炮的靜態網站生成工具！

P.S 目前 TOC 只有單頁，所以其他頁面的 TOC 都會在同一個 Modal 內，這部份還在思考怎麼修正

papoGen 源碼 papoGen - markdown 生成預覽位址

以上是小弟的使用分享與一點點的開發心得 如果有什麼疑問也很歡迎提出與討論~