技術漫談|使用 Caddy Web 伺服器顯示 Markdown 文件


技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

建議閱讀此篇文章前,先閱讀我們公眾號的前篇 Caddy上 手 文章 ——【 】

本篇文章我們將利用 Caddy Web 服務器的Markdown 插件和它強 大的網頁模板功能,在直接託管,渲染顯示Markdown 文件。

現在得益於 Markdown 的簡單易用,越來越多的 文檔都在使用Markdown來編寫。像我們常 用的 Github、GitBook 等流行服務也都在使 用 Markdown。那麼為什麼越來越多的相關技術 文檔和資料都是使用 Markdown 編寫的呢?我覺得所有原因都歸於『簡單』 二字。我們通過一些常用的符號標記,就可以寫出格式整齊、漂亮的 文檔,而不用寫繁瑣的 HTML。 通過簡單的工具轉化,我們就可以將Markdown文檔轉成 HTML 的格式。

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

那現在就讓我們來實現這個功能吧, 首先你得在你的電腦或者服務器 上安裝Caddy,如何安裝?請查看本公眾號之前的文章進行回顧或直接運行如下腳本:

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

Markdown 作為 Caddy Web 服務器 的標準指令,使得我們可以直接在 Caddyfile 配置 文件中使用該指令託管、渲染 Markdown 文件。

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

這裡的配置是說:在我們希望託管 Markdown 文件的服務器地址塊中,讓服務器對當前目錄啟用渲染 Markdown 文件的功能,即當我們訪問 Markdown 文件時, Caddy 自動將其轉化為 HTML 進行展示。下面我將以為我本地的文件作為示例給大家展示效果和截圖。

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

如圖所示為 Caddyfile 所在 目錄。可以看到這 裡里有若干子目錄和子目錄下面的.md 文件。現在讓我們運行 caddy。 在瀏覽器中訪問:

http://localhost:8080/0.general/0.general.md 文件。可以看到效果如下:

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

Caddy 成功的將 Markdown 文件以網頁的形式進 行展示,並且正確顯示此了了相應的格式和層次結構。但這裡有個美中不足之處,Caddy 渲染出的效果不夠美觀。簡單一點說,沒有 CSS 修飾。

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

那我們如何將 Markdown 文件更加美觀的展示呢?

由於 Caddy 本身是使用 Golang 進行開發的,因此 Caddy 也將 Go 強 大的模板功能提供給了用戶。這裡我們可以利用 Caddy 模板功能來美化 Markdown 文件。我們將在模板網頁中加入特定CSS 來美化頁面。CSS 庫來 自: https://github.com/sindresorhus/github-markdown-css

在 Caddyfile 目錄下創建 一個叫 template.html 的 網 頁 文件,添加如下內容:

技術漫談|使用 Caddy Web 服務器顯示 Markdown 文件

我們的 Markdown 文本內容會在

中顯示。github-markdown-css 庫會對類名為 markdown-body 中的內容進行美化。 {{.Doc.title}}和 {{.Doc.body}} 則是 網 頁模板中的動態內容,前者為文檔的文件名, 而後者為文檔中的全部內容。與此同時,我們需要在 Caddyfile 配置 文件中添加模板特性。 HTML 中 而外的


分享到:


相關文章: