创建页面

已添加 categories 页面为例

创建categories页面

onInitialized 构造函数中通过createPage添加页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// docs/.vuepress/theme-default/lib/node/defaultTheme.js
export const defaultTheme = ((app) => {
	...
	onInitialized: async (app) => {
    // 创建一个主页
    const categoryPage =  await createPage(app, {
      path: '/categories', // url路径
      frontmatter: {
          layout: 'Categories', // 路径下要访问的文件
      }
    })
    // 把它添加到 `app.pages`
    app.pages.push(categoryPage)
  }
})

添加文件

  1. 上面代码中layout: 'Categories' 表示页面要访问的实际文件是Categories.vue，现在还没有这个文件，要创建一个。在 docs/.vuepress/theme-default/lib/client/layouts/ 文件夹下添加 Categories.vue 文件就可以了
1
2
3
<template>
    66666666666
</template>
  1. 在 client 配置文件中引入它。
1
2
3
4
5
6
7
8
9
10
11
12
// docs/.vuepress/theme-default/lib/client/config.js
import Categories from './layouts/Categories.vue'
...
export default defineClientConfig({
  ...
  layouts: {
      Layout,
      NotFound,
      Categories, // 刚才添加的文件
  },
});

访问页面

通过浏览器中输入http://localhost:8080/categories 访问页面。

或者通过路由函数：

1
<router-link :to="{ path: 'categories' }" > 分类 </router-link>