gumdrop

軟糖

零設定腳本將 Markdown 文件顯示為靜態 HTML 頁面

Gumdrop被設計為一個易於使用的獨立腳本，可以產生用 Markdown 編寫的網站和文件。它從 CDN（包括 Markdown 解析器）動態載入其所有依賴項，並且不需要任何配置或初始化。

安裝

Gumdrop不需要安裝，您只需將其載入到帶有script標籤的 HTML 文件中即可。

 < script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script > 

用法

若要使用 Markdown 建立靜態網站，您只需在檔案伺服器上建立 HTML 範本 ( index.html ) 並將Gumdrop新增為外部腳本檔案。

 < main > </ main >
< script src =" path/to/gumdrop.js " >

請注意，您必須透過http / https協定提供文件，因為file協定不支援取得請求。

可以載入pages資料夾中的Markdown檔案。 Gumdrop監視 URL 的雜湊片段並從pages資料夾載入對應的 Markdown 檔案。解析後的 Markdown 檔案將在<main> HTML 節點（如果存在）中呈現，否則在body中呈現。如果未指定文件，則載入的預設檔案是pages/index.md 。要建立指向pages資料夾中另一個文件的鏈接，只需建立一個名稱前綴為#!/鏈接。

 [ Link to about.md ] ( #!/about )

靜態資源（例如圖像）可以從檔案伺服器提供的任何資料夾加載，路徑相對於index.html 。各種 HTTP 錯誤的錯誤頁面可以放置在errors資料夾中。每個檔案都應該根據它所代表的 HTTP 錯誤代碼來命名（例如， errors/404.md ）。

可以在 YAML Front Matter 中為您的文件指定其他資料。您可以使用鬍子模板在任何 Markdown 文件中存取此資料。

您也可以使用單獨的文件來儲存資料並將這些資源檔案連結到前文中的文件。資源檔案可以使用 YAML（預設）、JSON 或 Markdown 類型。文件前文中以!file類型註解的任何值都被視為文件資源。以/開頭的檔案路徑相對於index.html ，如果缺少前導/ ，則假定data資料夾為資源位置。如果未給予檔案類型（副檔名），則假定為.yaml副檔名。對於.md資源文件，傳回的值將是渲染的 Markdown 文件。

 # data/todo.yaml

todos :
  - title : First todo
    text : Complete your first assignment
    completed : true
  - title : YAML
    text : Learn more about YAML Front Matters
    completed : false 

 ---
todos: !file todo.yaml
---
{{#todos}}
- **{{title}}**: {{text}} {{#completed}}(✔){{/completed}}
{{/todos}}

特徵

• 零配置，無需初始化
• 沒有伺服器端程式碼，只需要一個靜態檔案伺服器
• 沒有建置/生成步驟，它只是您提供的文件
• 透過 ExtraMark 提供額外 Markdown 功能
• 透過獲取請求進行導航
• 文件的本機快取可加快載入時間
• 前面的附加資料和小鬍子模板處理的資料文件
• 各種 HTTP 錯誤代碼（404、500、300）的錯誤頁面

語法高亮

受防護的程式碼區塊由 Prism.js 自動處理。支援的語言是 Prism.js 套件中的預設語言。對於語法突出顯示，您必須在index.html中包含Prism.js樣式。

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />

與 GitHub 頁面一起使用

您可以將Gumdrop與 GitHub Pages 一起使用，因為它可以充當靜態檔案伺服器。為了防止 GitHub Pages 嘗試使用 Jekyll 轉換您的網站，請新增一個空的.nojekyll檔案到您網站的根目錄。

貢獻

歡迎所有想法、建議、錯誤回報、拉取請求。 ？