Vue 驱动的静态网站生成器

# Vue 驱动的静态网站生成器

# 文件路径的默认寻址方式

和图标、图片等静态资源相关的，第一个'/'默认指向的是docs/.vuepress/public/；
侧边栏/导航栏链接的markdown文件，第一个 '/' 默认指向的是 docs/，我们这里是都放置在docs/pages里；
嵌入在markdown中使用的Vue组件，放置在docs/.vuepress/components目录中；

# 网站搭建时遇到的坑

侧边栏的配置（注意路径的配置）

多个侧边栏配置（用于不同页面需要匹配不同侧边栏的场景）

// .vuepress/config.js 
sidebar: {
    '/pages/folder1/': [ // 对应一个侧边栏
        {
            title: '测试菜单1', // 一级菜单名称
            collapsable: false , // false为默认展开菜单，默认值true是折叠
            sidebarDepth: 1, // 设置侧边导航自动提取markdown文件标题的层级，默认1为h2层级
            children: [
                ['test1.md', '子菜单1'], // 菜单名称为子菜单1，跳转至/pages/folder1/test1.md
                ['test3.md', '子菜单3']
            ]
        },{
            title: '测试菜单2',
            collapsable: false ,
            children: [
                ['test2.md', '子菜单2']
            ]
        }
    ],
    '/pages/tools/': [
        {
            title: '前端工具',
            collapsable: false ,
            sidebarDepth: 1,
            children: [
                ['vuepress.md', 'VuePress']
            ]
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

侧边栏分组配置（用于配置不同文件路径的场景）

// .vuepress/config.js
sidebar: [
    {
        title: '测试菜单1', // 一级菜单名称
        collapsable: false , // false为默认展开菜单，默认值true是折叠
        sidebarDepth: 1, // 设置侧边导航自动提取markdown文件标题的层级，默认1为h2层级
        children: [
            ['/pages/folder1/test1.md', '子菜单1'], // 菜单名称为子菜单1，跳转至/pages/folder1/test1.md
            ['/pages/folder1/test3.md', '子菜单3']
        ]
    },
    {
        title: '测试菜单2',
        collapsable: false ,
        children: [
            ['/pages/folder1/test2.md', '子菜单2']
        ]
    },
    {
        title: '前端工具',
        collapsable: false ,
        sidebarDepth: 1,
        children: [
            ['/pages/tools/vuepress.md', 'VuePress']
        ]
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Github Page的部署

第一次创建GitHub仓库时，使用的是 '用户名'/'仓库名'.github.io，即xiliubianbian/practice.github.io。虽然能部署成功，但是使用https://xiliubianbian.github.io (opens new window)访问时，始终跳转到404页面。

参考官方文档尝试了各种方式，也未能解决。无奈之下重新创建了一个仓库。仓库地址为：xiliubianbian/xiliubianbian.github.io，此时使用https://xiliubianbian.github.io (opens new window)便能正常访问了。

(？？这个问题后面还是的研究下)
补充一条关于Github SSH Key 配置的理解

即一个邮箱对应一个SSH Key

# 部署成功的个人主页

# 细刘变变 (opens new window)

# 本网站搭建成功，感谢以下文章给予的帮助

# 1小时搞定vuepress快速制作vue文档/博客+免费部署预览 (opens new window)

# Markdown基本语法 (opens new window)

← JS设计模式 SourceTree →