vuepress2.0使用教程（6）-扩展默认模板之准备及扩展页面组件

百家饭AI

已于 2023-04-23 08:42:57 修改

阅读量1.8k

点赞数 1

分类专栏： Javascript 文章标签： vue.js 前端 javascript

于 2022-08-12 15:00:33 首次发布

本文链接：https://blog.csdn.net/baijiafan/article/details/126297671

版权

Javascript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的，搭建的时候不知道2.0还处在beta状态，所以导致后来踩了一些坑，使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48，有很多的变化，所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。

大致计划写这些内容吧：

这里先给搜索进来的同学提个醒：凡是网上搜索到需要修改clientAppEnhance.js 文件的教程都已经过时，最新版本已不再使用。另外说个题外话，我查了下，我为数不多的搜索关键词里面，vuepress的占了大部分，这里感谢大家的关注，这个教程肯定有不合理的地方，如果有任何需要帮助的，大家都可以留言，我尽力解答。

又到了快乐的周五PR日，可惜近日的四川之行又要被疫情延期了，我们的百家饭OpenAPI平台0.6.0版本的发布还处在测试阶段，工作有些延迟，要等到下周或者下下周才能发布了，这次一次做的内容有点多，耽误了原来的定期发布流程。

所以这周我们继续来讲vuepress2.0的使用教程，上五讲的内容，讲述了vuepress 2.0的初步入门以及默认模板的定制化配置部分，如果还有不能满足的需求，基本剩下的方案就只有编辑和创建自己的模板一条路了。

那创建模板呢，又分为两个方式，一种方式是从零完成一个模板的创建，一种是从默认模板进行扩展，官方推荐的方式是从默认模板进行扩展，这样一些基础功能就不会丢失，是入门者比较容易掌握的方式（我们是从头开始的模板创建，因此走了些弯路，不得不补了很多直接就应该有的功能）。

那这一篇我们从扩展默认模板入手，随便把element-ui和baidu搜索的扩展方法讲了。

初始化模板

创建模板index

建议存储位置：项目文件夹/.vuepress/theme

新建该目录，然后创建index.js文件（官方说明用的是ts文件，如果喜欢ts的，可以参考）

const { defaultTheme } = require('@vuepress/theme-default');
const { path } = require('@vuepress/utils')

module.exports = (options) => {
  return {
    name: 'vuepress-theme-local',
    extends: defaultTheme(options),
  }
}

这里你可以注意到一个有趣的事实，theme和.vuepress目录的config.js都是用的是commonjs语法，请注意这个现象，不要搞混了。

在这段代码中，我们创建了一个名为vuepress-theme-local（name属性）的theme，他扩展了默认模板(extends属性）。

这样我们就创建了一个基于默认模板的本地模板。

使用该模板

那该模板应该如何使用呢？修改我们位于.vuepress里的config.js文件，引用该文件

//修改点1：
// const { defaultTheme } = require('vuepress')
const localTheme = require('./theme');

//修改点2：
module.exports = {
   ……
   //theme: defaultTheme({
   theme: localTheme({

这样我们就把原本对于defaultTheme的主题使用改为了使用本地主题

扩展主题内容

上面的准备工作做完之后，我们就可以扩展主题了，一般扩展主题主要有四个目的

1）对页面进行扩展，加入更多的内容

2）为不同页面引入不同的主题

3）提供更多的MD模块

4）提供更多的自定义功能

这篇文章先介绍第一个部分

为页面提供更多内容

这个部分的内容主要基于对默认主题的插槽的改动来完成。

默认主题的 `Layout` 布局提供了一些插槽：

navbar
navbar-before
navbar-after
sidebar
sidebar-top
sidebar-bottom
page
page-top
page-bottom
page-content-top
page-content-bottom

在它们的帮助下，你可以很容易地添加或替换内容。我们需要通过以下三步来达到这个效果：

在自定义主题index.js里增加layouts
编写自定义layout并引用默认主题的同名layout
使用插槽功能替换内容

在自定义主题index.js里增加layouts

我们重新编写我们在上一节中编写的index.js文件，扩展为如下：

const { defaultTheme } = require('@vuepress/theme-default');
const { path } = require('@vuepress/utils')

module.exports = (options) => {
    return {
        name: 'vuepress-theme-local',
        extends: defaultTheme(options),
        layouts: {
            Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
        },
    }
}

我们增加的内容是其中的layouts部分，这个部分定义了主题的所有layout，layout就是页面的内容框架，我们编写的md文件只包含了页面的主体内容，而像顶部和左侧菜单等部分就是由layout渲染而成的。

我们在layouts里增加一个名为Layout的元素，会使得我们的自定义主题替换掉默认主题中同名为Layout的模板，而这个模板就是主要内容用的模板，这时，我们再在layouts子目录下增加一个空的Layout.vue，这时刷新可以看到原来有内容的页面就变空了。

编写自定义layout

然后我们就开始在layouts下的Layout.vue里添加内容

<script setup>
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
</script>

<template>
  <ParentLayout>
  </ParentLayout>
</template>

这样改完之后，刷新可以发现页面内容又回来了。

可以看见，在这个文件里，我们引用了@vuepress/theme-default/lib/client/layouts/Layout.vue这个文件，并把他放到了template部分，@vuepress/theme-default/lib/client/layouts/Layout.vue就是原来的默认主题的Layout.vue，我们对他进行引用并作为唯一元素，就使得我们的页面实际和原来的Layout一致。

从node_modules里对应的文件夹里，我们可以发现默认主题提供了下面两种模板

我们可以扩展这两种模板，并且可以提供更多的模板以供使用。

使用插槽功能

那接下来我们就可以使用上面提到的11种插槽来扩展对应的部分的内容了

navbar 顶部菜单栏，会整体替换顶部菜单，如果要保留导航菜单，请使用下面两个插槽
navbar-before 顶部菜单栏菜单前部插槽，添加到菜单之前
navbar-after 顶部菜单栏菜单后部插槽，添加到菜单之后
sidebar 左侧边栏，会替换整体边栏，如果要保留导航内容，请使用下面两个插槽
sidebar-top 左侧边栏上侧插槽
sidebar-bottom 左侧边栏下部插槽
page 主题内容插槽，会替换整个主体内容部分，可考虑使用下面的插槽
page-top 主题内容上侧
page-bottom 主体内容下侧
page-content-top 主体内容上侧（文章上侧，和内容共享边距等设置）
page-content-bottom 主体内容下侧（文章下侧，和内容共享边距等设置）

例如上面的page-bottom可以指定主体内容下侧，那么我们只需要扩展我们刚才的代码：

<script setup>
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
</script>

<template>
  <ParentLayout>
    <template #page-bottom>自定义内容</template>
  </ParentLayout>
</template>

下一篇我们继续在模板中增加更多自定义内容。