寫在前面
Md2site是基於Omi的一款Markdown轉網站工具,使用簡單,生成的檔案輕巧,功能強大。
當我們想把一堆markdown文件轉成網站時,你可能有許多選擇,倘若選擇 md2site ,你一定會愛上她。
- 官網:http://alloyteam.github.io/omi/md2site/
- Github: https://github.com/AlloyTeam/omi/tree/master/md2site
- 真實案例:http://alloyteam.github.io/omi/website/docs-cn.html
特性
- 超輕巧,生成的網站除了Omi不依賴其他第三方庫,超級小的尺寸讓你載入更快
- 完整支援Markdown,使用markdown寫你的文件或者網站,完整支援markdown所有語法
- 響應式,生成的網站是響應式的,手機和PC都有不錯的閱讀體驗
- 多語言,天生支援多語言,只需增加修改配置便可。讓世界瞭解你的網站
- 程式碼美,請記住:不僅僅是程式碼高亮,使用md2site輕鬆可以讓程式碼內的某些程式碼高亮
- 超方便,npm run dev預覽,npm run dist一鍵生成網站。不滿足現有佈局或樣式可輕鬆進行二次開發
快速開始
$ npm install md2site -g
安裝完之後就可以使用md2site 命令了。
$ md2site init your_project_name
比如我建立一個omi的文件:
這個時間比較長,因為還會安裝相關的npm依賴包。安裝成功可以看到:
$ cd your_project_name
轉到對應的專案目錄。
找到your_project_name目錄下的docs目錄:
在裡面寫你的markdown文件。在config.js中配置對應的目錄樹:
let config = {
menus: {
cn: [
{
active: true,
title: '快速開始',
currentIndex: 0,
list: [
{name: '安裝', md: 'installation'},
{name: '元件', md: 'components'},
{name: '元件通訊', md: 'communication'}
]
}
],
en: [
{
active: true,
title: 'QUICK START',
currentIndex: 0,
list: [
{name: 'Installation', md: 'installation'},
{name: 'Components', md: 'components'},
{name: 'Communication', md: 'communication'}
]
}
]
}
}
export default config;
寫的過程中可以通過下面的命令可以進行網站預覽
$ npm run dev
也可釋出部署:
$ npm run dist
一款漂亮的多語言響應式無重新整理的精明文件網站就這麼搞定了!簡單吧~~
Markdown語法擴充套件
如果你想讓程式碼塊中的某些行高亮,比如這個樣子:
你可以使用這種語法來標記需要高亮的行:
上面代表:1到3行以及26行高亮。