VuePress 博客

1創建並進入一個新目錄

mkdir vuepress-boker && cd vuepress-boker

2包管理器進行初始化

mkdir vuepress-boker && cd vuepress-boker

3安裝依賴

npm install -D vuepress

4創建md文檔

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

5添加指令 package.json

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

6本地啓動服務器 http://localhost:8080

npm run dev

7基本目錄結構

vuepress-boker
 ├── docs 
 │   └── README.md
 ├── node_modules
 ├── package-lock.json
 └── package.json

8 基本配置

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

docs/.vuepress/config.js: 配置文件的入口文件
添加.vuepress文件夾，添加 config.js，

9 公共文件
創建 .vuepress/public 它們最終會被複制到生成的靜態文件夾中。

10 config.js 配置

module.exports = {
    // 標題
    title: '博客測試',
    description: '博客測試',
    // 搜索 
    search: true,
    searchMaxSuggestions: 10, // 默認5
    //  最後更新時間 需要在上線後，或者git記錄後
    lastUpdated: 'Last Updated', // string | boolean
    smoothScroll: true,
}

themeConfig: {
 // 頭部導航 
        nav: [{
                text: '首頁',
                link: '/'
            }, // 根路徑
            {
                text: '文章',
                link: '/Article/html/'
            },
            // { text: '外部鏈接', link: 'https://google.com' }, 
            {
                text: '教程',
                link: '/Tutorial/'
            },
            {
                text: 'TimeLine',
                link: '/timeline/',
                icon: 'reco-date'
            },

            // 顯示下拉列表
            {
                text: '語言',
                items: [{
                        text: '中文',
                        link: '/language/chinese'
                    },
                    {
                        text: '日文',
                        link: '/language/japanese'
                    }
                ]
            },
            // 下拉列表顯示分組
            {
                text: '小說編寫',
                items: [{
                        text: '大綱',
                        items: [{
                                text: '人物藍圖',
                                link: '/language/chinese'
                            },
                            {
                                text: '情景分析',
                                link: '/language/japanese'
                            }
                        ]
                    },
                    {
                        text: '過度線',
                        items: [{
                                text: '關係',
                                link: '/language/chinese'
                            },
                            {
                                text: 'tiao',
                                link: '/language/chinese'
                            },
                        ]
                    },
                ]
            }
        ]
}

11 README.md中添加新內容

---
home: true
heroImage: 
actionText: 快速上手 →
actionLink: /page-a/
features:
- title: 簡潔至上
  details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。
- title: 高性能
  details: VuePress 爲每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作爲 SPA 運行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

12 側邊導航

vuepress-boker
 ├── docs
 │   ├── Article
 │   │   ├── css
 │   │   ├── html
 │   │   ├── README.md
 │   │   └── vue
 │   ├── README.md
 │   ├── timeLine
 │   │   └── README.md
 │   └── Tutorial
 │       └── README.md
 ├── package-lock.json
 └── package.json

放置在 config.js themeConfig中

 // 側導航
        sidebar: {
            '/Article/': [{
                title: '文章分類',
                collapsable: false,
                // path: "Article", 
                children: [{
                        title: 'For you, a thousand times over.', // ！！！題主你要的表現形式
                        collapsable: false,
                    },
                    ['', '基礎知識收集'],
                    ['/Article/html/', 'html基礎知識'],
                    ['/Article/css/', 'css基礎知識'],
                    ['/Article/vue/vue插件配置', 'vue基礎知識'],
                    // ['/Article/html/', '標題3'],
                ]
            }],
            '/Tutorial/': [{
                title: '教程分類',
                collapsable: false,
                // path: "Article", 
                children: [{
                        title: 'Ubuntu教程', // ！！！題主你要的表現形式
                        collapsable: false,
                    },
                    ['', '標題'],
                ]
            }],
        },

13 官方插件

   // 插件
    plugins: {
        '@vuepress/active-header-links': {
            sidebarLinkSelector: '.sidebar-link',
            headerAnchorSelector: '.header-anchor'
        },
        '@vuepress/back-to-top': true,
        '@vuepress/search': {
            search: true, //默認false
            searchMaxSuggestions: 10 // 默認是5
        },
        '@vuepress/pwa': {
            serviceWorker: true,
            updatePopup: {
                message: "有新的內容更新",
                buttonText: "刷新"
            }
        }
    }

---- 11月18日 待續 -----