VuePress-Vue 驅動的靜态網站生成器

官網傳送門：https://www.vuepress.cn

簡潔至上：

以 Markdown 為中心的項目結構，以最少的配置幫助你專注于寫作。

Vue 驅動：

享受 Vue + webpack 的開發體驗，可以在 Markdown 中使用 Vue 元件，又可以使用 Vue 來開發自定義主題。

高性能：

VuePress 會為每個頁面預渲染生成靜态的 HTML，同時，每個頁面被加載的時候，将作為 SPA 運作。

使用場景

VuePress可生成出全靜态的文檔結構，可用于知識庫、文檔庫，甚至寫作庫的建立；

可根據Vue的基礎功能進行擴充，擴充出前後端互動的功能；

有UI開發的筒子們可以自定義主題，建立更加美觀的文檔庫；

下面是以我本地為例進行的操作，相關nodejs、npm環境初始化的工作不是本文展示的重點

基本操作

以下内容來自VuePress官網的快速開始

前提條件

VuePress 需要 Node.js (opens new window) >= 8.6

本文會幫助你從頭搭建一個簡單的 VuePress 文檔。如果你想在一個現有項目中使用 VuePress 管理文檔，從步驟 3 開始。

1.建立并進入一個新目錄

mkdir vuepress-starter && cd vuepress-starter           

2.使用你喜歡的包管理器進行初始化

yarn init # npm init           

3.将 VuePress 安裝為本地依賴

我們已經不再推薦全局安裝 VuePress

yarn add -D vuepress # npm install -D vuepress           

注意

如果你的現有項目依賴了 webpack 3.x，我們推薦使用 Yarn (opens new window) 而不是 npm 來安裝 VuePress。因為在這種情形下，npm 會生成錯誤地依賴樹。

4.建立你的第一篇文檔

mkdir docs && echo '# Hello VuePress' > docs/README.md           

5.在 package.json 中添加一些 scripts (opens new window)

這一步驟是可選的，但我們推薦你完成它。在下文中，我們會預設這些 scripts 已經被添加。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}           

6.在本地啟動伺服器

yarn docs:dev # npm run docs:dev           

VuePress 會在http://localhost:8080 (opens new window) 啟動一個熱重載的開發伺服器。

現在，你應該已經有了一個簡單可用的 VuePress 文檔。接下來，了解一下推薦的 目錄結構 和 VuePress 中的 基本配置。

更多的操作可以按照官網的說明進行完成。

以下是本地經過初始化設定好的配置，可以幫助你實作初始化，帶有導航、側邊欄分組的項目

通用配置

首頁配置

---
home: true
heroImage: logo.png
heroText: 系統名稱
tagline: 文檔中心
actionText: 快速上手 →
actionLink: /guide/
features:
- title: title1
  details: 描述1
- title: title2
  details: 描述2
- title: title3
  details: 描述3
footer: Copyright © 2022-present xxx
---

## 這是内容标題1

内容

---

## 這是内容标題2

内容

---

## 這是内容标題3

内容
           

config.js模闆配置

module.exports = {
    base: "/demodocs/",
    // 主題和它的配置
    title: "Docs",
    // theme: 'antdocs',
    themeConfig: {
      logo: '/logo.png',
      nav: [
        { text: '首頁', link: '/' },
        { text: '指導', link: '/guide/' },
        { text: '執行個體01', link: '/demo01/' },
        {
          text: '其他',
          items: [
            { text: '标題01', link: '/' },
            { text: '百度一下吧', link: 'https://www.baidu.com' },
          ]
        },
        { text: '百度一下', link: 'https://www.baidu.com' },
      ],
      sidebar: {
        '/guide/': [
          {
            title: '指導頁面',
            children: [
              '', 'markdown-base','markdown-more'
            ]
          }
        ],
      }
    },
    plugins: ['@vuepress/back-to-top']
  }           

界面樣式

首頁

導航及側邊欄

AntDoc主題設定

yarn add -D vuepress-theme-antdocs           

config.js中添加主題配置theme: 'antdocs'

傳送門

将上述配置已經上傳到gitee上，有需要的筒子們可以clone使用：https://gitee.com/gitsongwz/vuepress-starter-templates.git

你看，奇怪的知識是不是又增加了