VitePress 新建页面和注册组件

发表于

更新于

字数

阅读量

VitePress 默认只有一个首页，而且内容区域基本都是固定的，如果你想自定义首页，或者新增归档、标签等页面，那么注册组件和新建页面就是必不可少的步骤

注册组件

如果只使用普通组件，不需要注册，直接导入使用即可。一般注册组件，都是我们要在很多地方使用（比如文章列表，文章卡片），或者直接当一个页面使用（比如首页，归档页），注册后就不用再导入了。

1. 创建组件。这里假设我们创建了一个名为 Home.vue 的组件，并且它位于 .vitepress/theme/ 目录下。

.vitepress/theme/Home.vue

vue


<template>
  <div>这是我的首页</div>
</template>

<script setup lang='ts'>

</script>

<style lang='scss' scoped>

</style>

2. 在主题配置中注册这个组件：

.vitepress/theme/index.ts

import Home from './MyComponent.vue'

export default {
   enhanceApp({ app }) {
     // 注册全局组件
     app.component('home', Home)
   }
}

组件注册后，我们就可以使用了。如果是在 vue 组件中，我们不需导入，直接使用就可 <home />，如果是在 md 页面中，我们可以直接修改 layout 字段值即可。

注册完 Home 组件后，我们就可以新建一个页面使用它了。这里我们修改首页 index.md 的 layout 字段，使用我们注册的组件名称 home。（首页比较特殊，默认入口就是 docs/index.md，VitePress 已经提供了这个文件，不需要创建）

docs/index.md

---
layout: home 
title: 唯知笔记
titleTemplate: 唯知笔记

site:
    title: 唯知笔记
    author: weizwz
    #  其他字段省略
---

同时 index.md 里的字段 site.title 等，我们可以在 Home.vue 组件里通过以下方式获取到

.vitepress/theme/Home.vue

vue

<script setup lang="ts">
  import { useData } from 'vitepress'
  
  const { frontmatter: fm } = useData()
  
  console.log(fm.value.site)
 </script>

除了首页的其他页面都需要我们新建对应的 md 文件，比如我们想要一个归档页面：

按照之前步骤，先创建一个名为 MyPost.vue 的组件，它位于 .vitepress/theme/ 目录下，然后在 .vitepress/theme/index.ts 中完成注册，注册名称是 my-post。

最后我们新建一个 docs/pages/posts.md

docs/pages/posts.md

---
layout: my-post
title: 所有文章
description: 这是唯知笔记网站的文章归档界面……
---

这样归档页面就可以建好了，访问路径为 /pages/posts。