分享使用模組 jsdom 與搭配實作於工具 papoGen 的心得
发布于 3 天前 作者 kevinbird61 171 次浏览 来自 分享

繼上篇 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 物件後再做靜態網站的產生 那麼使用者在瀏覽網頁時,便可以快速跳轉到想看的位置上 image.png

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

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

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

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

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

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

回到顶部