【Vitepress系列】-- 自定义组件及布局，配置tailwindcss、配置Markdown

原文链接

Vitepress自定义页面，以及配置tailwindcss

vitepress中，除了使用一些配置项目，还可以通过写vue代码，来做一个定制化的UI。下面这个UI主页便是vue组件 + tailwindcss做的

一. 自定义

vitepress中，如果内置的home、doc、page不满足需求，还可以自己写vue代码进行自定义

1.1 自定义布局

---
layout: MyLayout
---

这将在上下文中查找注册名为 foo 的组件。例如，可以在 .vitepress/theme/index.ts中全局注册组件：

import DefaultTheme from 'vitepress/theme'
import MyLayout from './MyLayout.vue'

export default {
   
    
    
  extends: DefaultTheme,
  enhanceApp({
    
     
      app }) {
   
    
    
    app.component('MyLayout', MyLayout)
  }
}

如果在页面中使用了自己的vue代码，那vue代码中有两个重要的API。

• useData
• useRouter

1. useData

useData 提供对 VitePress 数据的访问，包括页面内容、主题配置、页面元数据等。

import {
   
    
     useData } from 'vitepress'

export default {
   
    
    
  setup() {
   
    
    
    const {
   
    
     site, page, theme } = useData()

    console.log