我的博客

1.側(cè)邊欄

官網(wǎng)上講了兩種方式：

• 你可以使用對(duì)象將側(cè)邊欄鏈接分成多個(gè)組：

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

• 如果你希望為不同的頁(yè)面組顯示不同的側(cè)邊欄，請(qǐng)先將頁(yè)面組織到目錄中：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      // 側(cè)邊欄在 /foo/ 上
      '/foo/': [
        '',
        'one',
        'two'
      ],
      // 側(cè)邊欄在 /bar/ 上
      '/bar/': [
        '',
        'three',
        'four'
      ]
    }
  }
}

我呢，想如何把兩個(gè)組合起來(lái)使用：

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', // 側(cè)邊欄名稱
            collapsable: true, // 可折疊
            children: [
                '/frontEnd/javascript/', // 你的md文件地址
                '/frontEnd/javascript/one', // 你的md文件地址
            ]
        },
        {
            title: 'css', // 側(cè)邊欄名稱
            collapsable: true, // 可折疊
            children: [
                '/frontEnd/css/', // 你的md文件地址
                '/frontEnd/css/one', // 你的md文件地址
            ]
        },
    ],
    '/life/':[
        '',
        'one',
        'two'
    ]
}

2.圖片放置位置

在.vuepress 創(chuàng)建public文件夾，圖片或者靜態(tài)文件均可以放在此文件夾下，vuepress在打包時(shí)會(huì)將此處內(nèi)容移動(dòng)到根目錄下。

3.favicon.ico

config.js中增加：

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

4.在vuepress中使用vue組件

在.vuepress下面創(chuàng)建components。然后組件就和平時(shí)寫vue組件一模一樣，要使用sass等的也和平常的vue一樣。

在任何一個(gè)md文件中都可以直接使用組件，組件名就是文件名。

<tag-part tagName="vuepress"/>

可參考github上myblog中標(biāo)簽的實(shí)現(xiàn)
博客實(shí)例

踩坑：

官網(wǎng)上有說(shuō)明，確保自定義組件的名稱包含連字符或符合 PascalCase 命名規(guī)則,否則報(bào)錯(cuò)。

5.部署運(yùn)行

在根目錄下執(zhí)行vuepress build docs 就會(huì)在.vuepress目錄下生成dist文件夾

進(jìn)入dist文件夾cd docs/.vuepress/dist，執(zhí)行

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

6. vuepress中markdown中g(shù)it命令行高亮的代碼為bash

舉例(```bash)：

git add .

7. vuepress中增加樣式

在config.jshead中增加

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

路徑是相對(duì)于pubilc，所以將文件只需要放在public文件夾下即可。

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

8. .md文件中添加圖片

image.png