【抽五分鐘】使用VuePress建立線上文件中心

那是山發表於2020-10-20

 

內容目錄

安裝初始化核心配置導航欄配置側邊欄配置靜態資源配置nginx部署typora編寫

安裝初始化

  • 全域性安裝
 npm install -g vuepress
  • 建立目錄
mkdir vurepress-blog
  • 專案初始化,初始化完成生成package.json檔案
cd vurepress-blog npm init -y

  • 在當前目錄中建立docs目錄,存放部落格書籍內容
mkdir docs
  • 配置首頁顯示(以下為預設配置)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: MIT Licensed | Copyright © 2018-present You
--- 

核心配置

  • 在docs目錄下建立.vuepress目錄
cd docs mkdir .vuepress
  • 建立配置檔案config.js,整個專案的核心配置檔案,所有選單、欄目相關的配置均配置在該模組中
touch config.js
  • 在config.js中加入內容
module.exports = {
    title'文件CMS',
    description'文件管理中心',
    dest'./dist',
    port'7777',
    head: [
        ['link', {rel'icon'href'/logo.jpg'}]
    ],
    markdown: {
        lineNumberstrue
    },
    themeConfig: {
        nav: [{
            text'小新指南'link'/guide/'
        }],
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsabletrue,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'文件CMS',
                  collapsabletrue,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth2,
        lastUpdated'Last Updated',
        searchMaxSuggestoins10,
        serviceWorker: {
            updatePopup: {
                message"有新的內容.",
                buttonText'更新'
            }
        },
        editLinkstrue,
        editLinkText'在 GitHub 上編輯此頁 !'
    }
}
  • vurepress-blog目錄下直接執行除錯
vuepress dev docs

導航欄配置

  • nav頂部導航欄配置

config.js中的themeConfig配置項nav單獨拿出來配置

touch nav.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: {     
      navrequire("./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:'小新指南',
          collapsabletrue,
          children:[
            '/guide/notes/one',//指向md文件
          ]
        },
        {
          title:'進階',
          collapsabletrue,
          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目錄
vuepress build docs
  • 配置nginx的首頁(可選)
location / 
{         
    root  home/docs;      
    index index.html index.htm;    
}
  • 將打包後專案拷貝到nginx的root配置下
  • 啟動nginx
  • 其他部署,直接扔在自己的站點下。比如做專案時開發軟體系統的幫助文件

typora編寫

平常使用typora編寫Markdown文件較多,編寫後如何部署到vuepress中。

  1. 檔案-偏好設定,設定圖片的相對路徑


  1. 文件編寫完成後,md文件連同圖片資料夾拷貝到vuepress需要顯示的位置。如果想要在首頁顯示,直接放在README.MD處,名稱替換為README
  2. 除錯執行會有問題,不能會正常編譯,參考https://www.it610.com/article/1297823992387805184.htm
  3. 安裝一下包,用於處理圖片路徑問題
npm i markdown-it-disable-url-encode
npm i mdurl
  1. 注入到vuepress配置檔案中,.vuepress/config.js
module.exports = {
  // .....
  markdown: {
    // ......
    extendMarkdown: md => {
      md.use(require("markdown-it-disable-url-encode"));
    }
  }
};

然後可以正常編譯除錯打包。

相關文章