VitePress自定义页面

自定义页面

因为默认是由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页面有二级目录栏,下方就会出现。

VitePress自定义页面

创建广告组件

创建 docs.vitepresscomponentMAsideSponsors.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.vitepressthemeindex.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


原文始发于微信公众号(干货食堂):VitePress自定义页面

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/280232.html

(0)
明月予我的头像明月予我bm

相关推荐

发表回复

登录后才能评论

评论列表(1条)

  • qiha的头像
    qiha 2024年8月22日 上午11:59

    文章左侧目录自定义,items里的img怎么添加跳转链接呢

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!