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日 待续 -----