【抽五分鐘】使用VuePress建立線上文件中心
阿新 • • 發佈：2020-10-20
內容目錄
安裝初始化核心配置導航欄配置側邊欄配置靜態資源配置nginx部署typora編寫
安裝初始化
- 全域性安裝
npminstall-gvuepress
- 建立目錄
mkdirvurepress-blog
- 專案初始化，初始化完成生成package.json檔案
cdvurepress-blognpminit-y- 在當前目錄中建立docs目錄，存放部落格書籍內容
mkdirdocs
- 配置首頁顯示（以下為預設配置）docs下建立README.md
---
home:true
heroImage:/img/logo.jpg
actionText:快速上手→
actionLink:/zh/guide/
features:
-title:簡潔至上
details:以Markdown為中心的專案結構，以最少的配置幫助你專注於寫作。
-title:Vue驅動
details:享受Vue+webpack的開發體驗，在Markdown中使用Vue元件，同時可以使用Vue來開發自定義主題。
-title:高效能
details:VuePress為每個頁面預渲染生成靜態的HTML，同時在頁面被載入的時候，將作為SPA執行。
footer:MITLicensed|Copyright©2018-presentYou
---
核心配置
- 在docs目錄下建立.vuepress目錄
cddocsmkdir.vuepress
- 建立配置檔案config.js，整個專案的核心配置檔案，所有選單、欄目相關的配置均配置在該模組中
touchconfig.js
- 在config.js中加入內容
module.exports={
title:'文件CMS',
description:'文件管理中心',
dest:'./dist',
port:'7777',
head:[
['link',{rel:'icon',href:'/logo.jpg'}]
],
markdown:{
lineNumbers:true
},
themeConfig:{
nav:[{
text:'小新指南',link:'/guide/'
}],
sidebar:{'/guide/':[
{
title:'新手指南',
collapsable:true,
children:[
'/guide/notes/one'
]
},
{
title:'文件CMS',
collapsable:true,
children:[
'/guide/notes/two',
]
}
]
},
sidebarDepth:2,
lastUpdated:'LastUpdated',
searchMaxSuggestoins:10,
serviceWorker:{
updatePopup:{
message:"有新的內容.",
buttonText:'更新'
}
},
editLinks:true,
editLinkText:'在GitHub上編輯此頁！'
}
}
- 在vurepress-blog目錄下直接執行除錯
vuepressdevdocs
導航欄配置
- nav頂部導航欄配置
config.js中的themeConfig配置項nav單獨拿出來配置
touchnav.js
- 編輯nav.js
module.exports=[
{
text:'小新指南',link:'/guide/'
},
{
text:'開發技巧',link:'/dev/',
items:[
{text:'初級篇',link:'/dev/zero/'},
{text:'進階篇',link:'/dev/high/'},
]
},
{
text:'工具箱',
items:[
{
text:'線上編輯',
items:[
{text:'圖片壓縮',link:'https://tinypng.com/'}
]
},
{
text:'線上服務',
items:[
{text:'阿里雲',link:'https://www.aliyun.com/'},
{text:'騰訊雲',link:'https://cloud.tencent.com/'}
]
},
{
text:'部落格指南',
items:[
{text:'掘金',link:'https://juejin.im/'},
{text:'CSDN',link:'https://blog.csdn.net/'}
]
}
]
}
]
- 修改config.js中nav連結
themeConfig:{
nav:require("./nav.js"),
...
}
- 重新啟動下看下效果
側邊欄配置
sidebar是左側標題導航，可以指定配置也可以設定為auto
- 主側邊欄配置，在.vuepress目錄下，sidebar.js，分發指向不同的欄目側邊欄js
module.exports={
'/guide/':require('../guide/sidebar'),
'/dev/zero':require('../dev/zero/sidebar'),
'/dev/high':require('../dev/high/sidebar'),
}
- config.js中sidebar配置
sidebar:require("./sidebar.js")
- 以為小新指南模組為例，/docs/guide/sidebar.js檔案內容
module.exports=[
{
title:'小新指南',
collapsable:true,
children:[
'/guide/notes/one',//指向md文件
]
},
{
title:'進階',
collapsable:true,
children:[
'/guide/notes/two',
]
}
]
- guide/notes/one two就是具體的md文件，編寫one.md
#一級標題
##二級標題
###三級標題
####四級標題
- 呈現效果
靜態資源配置
-
vuepress目錄下public目錄，vuepress程式預設的圖片目錄是/docs/.vuepress/public
---.vuepress
------public
---------css
------------styles.css
---------img
------------logo.jpg
-
在config.js中引入
head:[
['link',{rel:'icon',href:'/img/logo.jpg'}],
['link',{rel:'stylesheet',href:'/css/style.css'}],
['script',{chartset:'utf-8',src:'/js/main.js'}]
],
nginx部署
- 編譯，預設輸出到dist目錄
vuepressbuilddocs
- 配置nginx的首頁（可選）
location/
{
roothome/docs;
indexindex.htmlindex.htm;
}
- 將打包後項目拷貝到nginx的root配置下
- 啟動nginx
- 其他部署，直接扔在自己的站點下。比如做專案時開發軟體系統的幫助文件
typora編寫
平常使用typora編寫Markdown文件較多，編寫後如何部署到vuepress中。
- 檔案-偏好設定，設定圖片的相對路徑
- 文件編寫完成後，md文件連同圖片資料夾拷貝到vuepress需要顯示的位置。如果想要在首頁顯示，直接放在README.MD處，名稱替換為README
- 除錯執行會有問題，不能會正常編譯，參考https://www.it610.com/article/1297823992387805184.htm
- 安裝一下包，用於處理圖片路徑問題
npmimarkdown-it-disable-url-encode
npmimdurl
- 注入到vuepress配置檔案中，.vuepress/config.js
module.exports={
//.....
markdown:{
//......
extendMarkdown:md=>{
md.use(require("markdown-it-disable-url-encode"));
}
}
};
然後可以正常編譯除錯打包。