自定义页面
★
因为默认是由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.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
评论列表(1条)
文章左侧目录自定义,items里的img怎么添加跳转链接呢