自定义页面

因为默认是由md文件生成的html页面，但是有时候我们想自定义页面的话，比如vue格式的页面，也是可以的。

md文件支持Vue

文档： https://process1024.github.io/vitepress/guide/using-vue

各位看官，小站运营不易，刷到广告还请多多包涵，如果本站文章帮助到了您，还请麻烦帮忙点下广告哈。🤗

1、编写vue组件

<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'MyComponent',  
  props: {  
    message: {  
      type: String,  
      required: true  
    }  
  }  
}  
</script>  
  
<style scoped>  
/* 组件样式 */  
</style>

2、在 VitePress 主题中注册组件

为了在 Markdown 文件中使用组件，你需要在 VitePress 主题中注册它们。这通常意味着你需要在主题配置中扩展或覆盖默认的组件。

在 .vitepress/theme/index.js 文件中（如果你还没有这个文件，可以创建一个），你可以注册你的组件：

// .vitepress/theme/index.js  
import DefaultTheme from 'vitepress/theme'

import MyComponent from '../component/MAsideSponsors.vue' //必须是.vue结尾

export default {
    ...DefaultTheme,
    enhanceApp({ app }) {
        app.component('MyComponent', MyComponent)
    }
}

3、在 Markdown 文件中使用组件

现在，你可以在 Markdown 文件中直接使用你的 Vue 组件了：

当 VitePress 渲染这个 Markdown 文件时，它会识别 标签，并使用你在主题中注册的组件来替换它。

# 我的页面  
  
<MyComponent message="Hello, VitePress!" />

各位看官，小站运营不易，刷到广告还请多多包涵，如果本站文章帮助到了您，还请麻烦帮忙点下广告哈。🤗

md文件直接引入VUE

比如想在页面引入element-plus

切记，有的UI组件需要引入它们的CSS，所以必须要在 .vitepress/theme/index.js 中引入！！！

npm install element-plus --save

md页面直接写即可

<template>
    <div class="ui-home">
        <h2 class="ui-title">前端开源项目推荐</h2>
        <el-button type="primary" @click="alert">按钮</el-button>
    </div>
</template>
<script setup>
     // 可以在页面单独引入，也可以在 .vitepress/theme/index.js  文件中全部引入。
    import { ElButton  } from 'element-plus'
</script>

引入element-plus

import DefaultTheme from 'vitepress/theme'

import ElementPlus from 'element-plus'
import "element-plus/dist/index.css";

export default {
    ...DefaultTheme,
    enhanceApp({ app }) {
        app.use(ElementPlus)
    }
}
​

md文件直接引入CSS

这里用的是 sass，所以需要安装依赖

安装sass

npm install sass --save-dev

<template>
    <div class="ui-home">
        <div class="main1">
            <p>111111</p>
        </div>
    </div>
</template>
<style src="./nav/index.scss"></style>

index.scss

.main1{
  background: #3a5ccc;
  p {
    font-size: 40px;
  }
}

文章左侧目录自定义

需求：如果我们想要在左侧目录的下面加入自己的东西，比如二维码图片或者广告等等，也是可以的。 注意；一旦挂载，将会出现在所有的md页面，只要md页面有二级目录栏，下方就会出现。

创建广告组件

创建 docs.vitepress\component\MAsideSponsors.vue

<template>
    <VPDocAsideSponsors :data="data" />
</template>
<script setup >
    import { VPDocAsideSponsors } from 'vitepress/theme'
    const data = [
        {
            items: [{ img: 'https://cdn.jsdelivr.net/gh/coder-lzh/picture@main/sponsor/alipay.png' }]
        },
        {
            items: [{ img: 'https://cdn.jsdelivr.net/gh/coder-lzh/picture@main/sponsor/wxpay.png' }]
        },
    ]
</script>
<style>
    .vp-sponsor-grid.medium .vp-sponsor-grid-link{
        height: 155px !important;
    }
    .vp-sponsor-grid.medium .vp-sponsor-grid-image {
        max-height: 125px !important;
    }
</style>

在主题中引入挂载

docs.vitepress\theme\index.js

import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import MAsideSponsors from '../component/MAsideSponsors.vue'

export default {
    ...DefaultTheme,
    Layout() {
        return h(DefaultTheme.Layout, null, {
            'aside-bottom': () => h(MAsideSponsors)
        })
    }
}

空白页面

你会发现 markdown语法已经失效了，二级标题不会显示了

nav.md

---
layout: page
footer: false
navbar: false
---

## 111