Vuepress 2 专栏目录

1. 入门阶段

1. Vuepress 2从0-1保姆级入门教程——环境篇
2. Vuepress 2从0-1保姆级入门教程——安装篇
3. Vuepress 2从0-1保姆级入门教程——配置篇
4. Vuepress 2从0-1保姆级入门教程——插件篇
5. Vuepress 2从0-1保姆级入门教程——美化篇
6. Vuepress 2从0-1保姆级入门教程——部署篇
7. Vuepress 2从0-1保姆级入门教程——范例篇

2.进阶阶段

1. Vuepress 2从0-1保姆级进阶教程——搜索篇
2. Vuepress 2从0-1保姆级进阶教程——模版篇

📖 如需开发主题，请阅读百家饭OpenAPI的编写vuepress主题（自定义自己的框架，开发复杂程序）

🪨模版是方便文章写作提前做好的布局样式，Vuepress默认主题提供两种布局Layout和NotFound

💡 Vuepress支持用户自定义布局哦

新建模版

编辑模板

在📂.vuepress内新建📁layout，用来存放模版文件,这里以banner.vue为例，源码参考Vue3.0组件—banner轮播图（渐入渐隐效果）
如需使用<script setup>请修改源码

vue"><script>
import { ref, onMounted, unref, onUnmounted } from "vue";
import Navbar from '@theme/Navbar.vue'
import Page from '@theme/Page.vue'

//自动切换banner源码请参考https://blog.csdn.net/weixin_43622279/article/details/12693709

导入静态文件

模板需要的图片等素材请放到📁public

导入模版

在📂.vuepress内新建文件client.ts，导入模版文件并配置布局样式

import { defineClientConfig } from 'vuepress/client'
import home from './layout/home.vue'

export default defineClientConfig({
    layouts: {
        home,
    },
})

使用模版

在要使用的文档里添加模版名，例如

---
layout: home
---

测试效果

视频

图片