作為程序猿來講，markdown是大家天天用、時時用的工具。可能用來記錄日常的心得、工作的TODO，更有可能是針對某個項目書寫的使用手冊；但是在使用過程中，發現兩個不太方便的地方，一是每個文檔都作為一個單獨的文件存在，不方便按照分類進行歸檔打包，二是分發閱讀需要工具的支持，不方便普通用戶的閱讀。
基於以上原因，作者實現了Markdown-Website這個小工具，Markdown-Website工具通過目錄樹的形式對markdown文件進行顯示；同時，以靜態網頁的方式進行發布訪問，既解決了分類歸檔的問題，又提供了隨時隨地方便訪問的能力。
Github源碼地址
啥也不說，先看效果：點擊打開演示頁面
接下來，我們一步一步來說明下怎么搭建自己的markdown靜態網站。
一、獲得網站模板
開始搭建網站，你首先需要先獲取一套項目模板，根據你自己的情況，可以有兩種方式供你選擇：
如果你是一個有前端開發經驗，熟悉vue技術和ant-design-vue組件庫，並且想自定義一些樣式的話，可以通過復制源碼，自己編譯的方式進行。
點擊打開源碼下載頁面
如果你並不想自己安裝開發環境，自己編譯代碼，可以直接下載編譯好的靜態網頁壓縮包，解壓即可。
點擊下載靜態網頁壓縮包
靜態網頁目錄結構
├── css # 網站樣式文件
├── js # 網站腳本文件
├── static # 網站資源文件
├── favicon.ico # 網站小圖標
└── index.html # 網站頁面
二、收集網站要展示的Markdown文件
將希望在網站展示的所有Markdown文件收集起來，統一復制到static目錄里面。
由於static目錄里包含演示的數據文檔，在復制之前，請將所有后綴名為.md的文件全部刪除。
三、編輯Markdown文件展示目錄樹
現在要展示的Markdown文件內容有了，接下來，我們來對展示的目錄樹結構進行編輯。
目錄樹的內容結構在static目錄下的config.json文件內進行設置，使用文本編輯器打開config.json文件，可以看到如下內容：
{
"title": "markdown-website",
"topicWidth": 250,
"openLevel": 1,
"topics": [
{
"id": "01",
"name": "markdown-website是什么？",
"src": "/static/what.md"
},
{
"id": "02",
"name": "開始使用",
"submenus": [
{
"id": "0201",
"name": "搭建markdown網站",
"src": "/static/how.md"
},
{
"id": "0202",
"name": "更多網站屬性配置",
"src": "/static/edit.md"
},
{
"id": "0203",
"name": "部署發布",
"src": "/static/deploy.md"
}
]
}
]
}
其中，topics數組是目錄樹結構的內容，首先將topics內的演示數據清空，還原成空數組：
{
"title": "markdown-website",
"topicWidth": 250,
"openLevel": 1,
"topics": []
}
每一個目錄節點是一個對象，對象內都包含如下4個屬性：
id：目錄節點的唯一標識，不能重復。
name：目錄節點的顯示名稱。
src：目錄節點的關聯markdown文件路徑，即我們前面復制到static目錄的markdown文件，如：/static/xxx.md；如果是父節點，可以不設置。
submenus：子目錄樹節點，如果沒有子節點，可以是空數組[]。
實例，增加一個“我的收藏”的父節點：
{
"title": "markdown-website",
"topicWidth": 250,
"openLevel": 1,
"topics": [
{
"id": "01",
"name": "我的收藏",
"submenus": []
}
]
}
繼續在我的收藏里增加“給長城貼瓷磚方案”和“給珠峰裝電梯方案”兩個子節點，並關聯各自的markdown文件：
{
"title": "markdown-website",
"topicWidth": 250,
"openLevel": 1,
"topics": [
{
"id": "01",
"name": "我的收藏",
"submenus": [
{
"id": "0101",
"name": "給長城貼瓷磚方案",
"src": "/static/給長城貼瓷磚方案.md"
},
{
"id": "0102",
"name": "給珠峰裝電梯方案",
"src": "/static/給珠峰裝電梯方案.md"
}
]
}
]
}
基於以上方式，可以根據自己的實際情況和需要，定義目錄樹的結構。理論上，支持無限層級，但從實際效果來看，2~3層效果最佳。
更多參數配置
為了保證網站最終的顯示效果以及初次打開時的狀態，項目提供了一些配置屬性供用戶使用，這些屬性都可以在static目錄下的config.json文件里進行修改，目前提供了3個屬性：
title：網站的顯示標題，默認是markdown-website。
topicWidth：左側目錄樹側邊欄的寬度，默認是250像素。
openLevel：網站初次打開時，目錄樹展開的層級，默認1級。
{
"title": "markdown-website",
"topicWidth": 250,
"openLevel": 1,
"topics": []
}
至此，你已經有了自己的markdown網站了，有了新的markdown文件需要放進來，只需要把新的markdown文件復制到static目錄，同時，更新config.json里的topics數據配置即可。
歡迎有興趣的小伙伴下載試用，提寶貴意見，記得star啊 ：)