vitepress搭建markdown文档博客

mkdir blog-vitepress
cd blog-vitepress

npm init -y
npm i -D vitepress

yarn init -y
yarn add -D vitepress

"scripts": {
  "dev": "vitepress dev docs --open",
  "build": "vitepress build docs",
  "serve": "vitepress serve docs"
}

mkdir docs
echo '# Hello World' > docs/index.md

npm run dev

npm init vite-pages [仓库名] --template [模板名]

// vitepress/config.js
module.exports = {
  title: "我的博客",// 网站标题
  description: '我的vitepress博客.', //网站描述
  base: '/', //  部署时的路径 默认 /  可以使用二级地址 /base/
  // lang: 'en-US', //语言
  // 网页头部配置，引入需要图标，css，js
  head: [
    // 改变title的图标
    [
      'link',
      {
        rel: 'icon',
        href: '/img/linktolink.png',//图片放在public文件夹下
      },
    ],
  ],
  // 主题配置
  themeConfig: {
    repo: 'vuejs/vitepress', // 你的 github 仓库地址，网页的右上角会跳转
    //   头部导航
    nav: [
      { text: '首页', link: '/' },
      { text: '介绍', items:[{ text: '关于', link: '/brief/about/' },] }, // items 可以一直嵌套
      { text: '关于', link: '/about/' },
    ],
    //   侧边导航
    sidebar:{
    "/":[
        {
            text:"简介",
            link:'/intro/index'
        },
        {
            text:"新手入门",
            children:[
                {
                    text:'安装与使用',
                    link:'/intro/install-and-usage'
                },
            ]
        },
        {
            text:"命令",
            children:[
                {
                    text:'命令使用',
                    link:'/intro/command-info'
                },
                {
                    text:'自定义命令',
                    link:'/intro/custom-command'
                }
            ]
        },
    ]
}
  }
}

<img :src="$withBase('/foo.png')" alt="foo" />

.
├─ index.md
├─ foo
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ index.md
   ├─ three.md
   └─ four.md

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也能够用 .html -->

---
title: Blogging Like a Hacker
lang: en-US
---

---
title: tags
date: 2019-08-13 09:39:50
type: tags
layout: tag
---

# Hello VitePress
# {{ $frontmatter.date }}

---
{
  "title": "Blogging Like a Hacker",
  "editLink": true
}
---

# {{ $frontmatter.title }}

```js{1,4,6-7}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

module.exports = {
  markdown: {
    // markdown-it-anchor 的选项
    anchor: { permalink: false },

    // markdown-it-toc 的选项
    toc: { includeLevel: [1, 2] },

    config: (md) => {
      // 使用更多的 markdown-it 插件!
      md.use(require('markdown-it-xxx'))
    }
  }
}

module.exports = {
  themeConfig: {
    algolia: {
      apiKey: 'your_api_key',
      indexName: 'index_name'
    }
  }}

npm install -D vitepress-theme-demoblock
# or
yarn add -D vitepress-theme-demoblock

module.exports = {
  markdown: {
    config: (md) => {
      const { demoBlockPlugin } = require('vitepress-theme-demoblock')
      md.use(demoBlockPlugin)
    }
  }
}

"scripts": {
  "register:components": "vitepress-rc"
}

// docs/.vitepress/theme/index.ts

// 导入vitepress-theme-demoblock主题，并注册组件(包含主题中默认的组件)。
import Theme from 'vitepress/dist/client/theme-default'

// 导入主题样式
import 'vitepress-theme-demoblock/theme/styles/index.css'
// 想引入全局自己的 css 文件，也可以在这里引入

// 导入插件的主题
import { registerComponents } from './register-components.js'

export default {
  ...Theme,
  enhanceApp({ app }) {
    registerComponents(app)
  }
}

# Button 按钮

:::demo 使用`type`，`plain`，`round`来定义 Button 的样式

```vue
<template>
  <my-button style="color: red">按钮1</my-button>
  Middle
  <my-button type="size">按钮2</my-button>
  Large
  <my-button>按钮3</my-button>
  Disabled
  <my-button disabled>按钮4</my-button>
</template>
:::

md.use(demoBlockPlugin, {  lang: 'ts'})