Mdpress 簡(jiǎn)介：助力動(dòng)態(tài)及靜態(tài)站生成

前言

印記中文（以下簡(jiǎn)稱印記）作為國(guó)內(nèi)領(lǐng)先的前端技術(shù)傳播社區(qū)，經(jīng)過一段時(shí)間的發(fā)展，已經(jīng)擁有了 React、Webpack、Babel 等優(yōu)質(zhì)中文文檔站點(diǎn)，并且還開拓了周刊類業(yè)務(wù)。為了提高印記技術(shù)傳播和翻譯的效率，以及建設(shè)印記的品牌一致性，印記開始研發(fā)自己的一系列平臺(tái)和工具。

而 Mdpress，就是其中之一，它是一個(gè)網(wǎng)站生成器。

亮點(diǎn)

• 支持 React
• 支持靜態(tài)建站
• 支持動(dòng)態(tài)建站

例子

1. Mdpress 官網(wǎng)^[1]這是一個(gè)靜態(tài)建站的例子。

2. js weekly^[2]這是一個(gè)使用 CMS 中的數(shù)據(jù)動(dòng)態(tài)建站的例子。關(guān)于結(jié)合 CMS 實(shí)現(xiàn)動(dòng)態(tài)建站的詳細(xì)過程可參考后續(xù)的文章：《Mdpress + 騰訊云 CMS 打造動(dòng)態(tài)站點(diǎn)》。

功能介紹

1. 內(nèi)置的 Markdown 拓展

• 目錄^[3]
• 自定義容器^[4]
• 代碼塊中的行高亮^[5]
• 行號(hào)^[6]
• 導(dǎo)入代碼段^[7]

2. 在 Markdown 中 使用 React 組件（Vue、WebComponent 理論上也能支持）

• 使用組件^[8]

3. 自帶 React 驅(qū)動(dòng)的自定義主題系統(tǒng)

• 網(wǎng)站和頁(yè)面的元數(shù)據(jù)^[9]
• 內(nèi)容摘抄^[10]

4. 自帶一套 React 驅(qū)動(dòng)的默認(rèn)主題

• 響應(yīng)式主題
• 首頁(yè)^[11]
• 內(nèi)置的搜索^[12]
• Algolia 搜索^[13]
• 可定制的頂部導(dǎo)航^[14]和側(cè)邊欄^[15]
• 自動(dòng)生成的 GitHub 鏈接和頁(yè)面編輯鏈接^[16]
• PWA: 刷新內(nèi)容的 Popup^[17]
• 最后更新時(shí)間^[18]
• 多語(yǔ)言支持^[19]

5. 插件體系

• 強(qiáng)大的插件 API^[20]
• PWA 插件^[21]
• Google Analytics 插件^[22]

設(shè)計(jì)與實(shí)現(xiàn)

架構(gòu)圖：

總體分為瀏覽器和服務(wù)（Node）層。

在服務(wù)層，它的核心工作是構(gòu)建網(wǎng)站和提供數(shù)據(jù)和配置。

1. 構(gòu)建網(wǎng)站 Mdpress 使用 Webpack 來(lái)構(gòu)建網(wǎng)站，在這期間會(huì)提取用戶自定義的 server 配置、webpack 配置、frontmatter、動(dòng)態(tài)模塊來(lái)幫助構(gòu)建。

2. 提供數(shù)據(jù)和配置 用戶的 Markdown 文件、配置文件、插件（包括主題）都會(huì)提供給客戶端（瀏覽器）。

在瀏覽器層，它的核心工作是渲染。所以 Markdown 相關(guān)的配置、全局鉤子、路由、自定義組件沙箱都在這一層。

所以如果數(shù)據(jù)源是動(dòng)態(tài)的，也可以渲染。

對(duì)于 Mdpress 實(shí)現(xiàn)感興趣的讀者可以閱讀后續(xù)文章之 《Mdpress 誕生記》。

缺點(diǎn)

Mdpress 相比傳統(tǒng)靜態(tài)建站工具（如 Vuepress）性能上會(huì)稍有不足，因?yàn)橛羞\(yùn)行時(shí)渲染成本。

就像用遞歸實(shí)現(xiàn)一個(gè)算法一樣，需要一個(gè)棧作為輔助數(shù)據(jù)結(jié)構(gòu)作為額外的成本來(lái)實(shí)現(xiàn)目標(biāo)。

結(jié)語(yǔ)

以前印記使用 Vuepress 搭建周刊，但是 Vuepress 僅能支持靜態(tài)建站，無(wú)法將存儲(chǔ)在服務(wù)器上的 Markdown 作為數(shù)據(jù)源，更新站點(diǎn)內(nèi)容的時(shí)候并不方便，所以就萌生了做 Mdpress 的念頭。

在這期間參考了很多 Vuepress 的設(shè)計(jì)和代碼，它的確是一個(gè)優(yōu)秀的作品。

同時(shí)也歡迎有志之士加入印記，共同為國(guó)內(nèi)前端社區(qū)傳播技術(shù)知識(shí)，幫助大家共同成長(zhǎng)，快樂工作。

如有意愿，歡迎添加 docschina-bot 咨詢。

關(guān)注我們

我們將為你帶來(lái)最前沿的前端資訊。

參考資料