vuepress搭建个人博客填坑

---

我的博客

1.侧边栏

官网上讲了两种方式：

• 你可以使用对象将侧边栏链接分成多个组：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',
        collapsable: false,
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

• 如果你希望为不同的页面组显示不同的侧边栏，请先将页面组织到目录中：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      // 侧边栏在 /foo/ 上
      '/foo/': [
        '',
        'one',
        'two'
      ],
      // 侧边栏在 /bar/ 上
      '/bar/': [
        '',
        'three',
        'four'
      ]
    }
  }
}

我呢，想如何把两个组合起来使用：

nav: [
    { text: 'Home', link: '/' },
    { text: '前端之路', link: '/frontEnd/' },
    { text: 'one-monent', link: '/life/' },
    { text: 'Github', link: 'https://github.com/arieltlm/' },
],
sidebarDepth: 0,
sidebar:{
    '/frontEnd/':[
        {
            title: 'JavaScript', // 侧边栏名称
            collapsable: true, // 可折叠
            children: [
                '/frontEnd/javascript/', // 你的md文件地址
                '/frontEnd/javascript/one', // 你的md文件地址
            ]
        },
        {
            title: 'css', // 侧边栏名称
            collapsable: true, // 可折叠
            children: [
                '/frontEnd/css/', // 你的md文件地址
                '/frontEnd/css/one', // 你的md文件地址
            ]
        },
    ],
    '/life/':[
        '',
        'one',
        'two'
    ]
}

2.图片放置位置

在.vuepress 创建public文件夹，图片或者静态文件均可以放在此文件夹下，vuepress在打包时会将此处内容移动到根目录下。

3.favicon.ico

config.js中增加：

head:[
    ['link',{rel:'shortcut icon',href:'/icons/favicon.ico'}]
],

4.在vuepress中使用vue组件

在.vuepress下面创建components。然后组件就和平时写vue组件一模一样，要使用sass等的也和平常的vue一样。

在任何一个md文件中都可以直接使用组件，组件名就是文件名。

可参考github上myblog中标签的实现
博客实例

踩坑：

官网上有说明，确保自定义组件的名称包含连字符或符合 PascalCase 命名规则,否则报错。

5.部署运行

在根目录下执行vuepress build docs 就会在.vuepress目录下生成dist文件夹

进入dist文件夹cd docs/.vuepress/dist，执行

git init
git add -A
git commit -m ‘delopy’
git push -f [你的github库](如我的https://github.com/arieltlm/my-blog.git) master:gh-pages

6. vuepress中markdown中git命令行高亮的代码为bash

举例(```bash)：

git add .

7. vuepress中增加样式

在config.jshead中增加

head: [
    ["link", { rel: "shortcut icon", href: "/images/favicon.ico" }],
    ["link", { rel: "stylesheet", href: "/style/style.css" }],
],

路径是相对于pubilc，所以将文件只需要放在public文件夹下即可。

或者在override.styl文件中直接添加也可以

8. .md文件中添加图片

image.png