全局组件

注册全局组件，当你的VuePress每个页面都需要自定义容器时使用，它会像footer header那样全局布局。

提示

原文

引入插件

npm install -D @vuepress/plugin-register-components

配置config

// .vuepress/config.js
module.exports = {
  // ...
  plugins: [
    // ....
    [
      '@vuepress/register-components',{
        componentsDir: [
          'DemoLayout',
          ]
        }
    ]
  ]
}

在.vuepress中创建components目录结构如下：

.
└─ .vuepress
   └─ components
      ├─ DemoLayout.vue
      ├─ BoxLayout.vue
      ├─ OtherComponent.vue
      └─ demo-2.vue
         └─ demo-2-1.vue

随后可以直接在 markdown 文件中使用

<DemoLayout/>
<BoxLayout/>
<OtherComponent/>
<demo-2/>
<demo-2-1/>

更多实例

如果你想了解更多关于vuepress框架的注册组件运用，那么请看。

实例1：相册页

源码

自定义页面

提示

原文

自定义md页面

如果你想要使用一个完全自定义的组件来代替当前的页面（而只保留导航栏），你可以再次使用 YAML front matter 来指定这个组件。

---
layout: DemoLayout
---

这将会为当前的页面渲染 .vuepress/components/DemoLayout.vue 布局。
也就是说，我们需要在 .vuepress/components/ 目录下创建 vue组件。

<template>
    <div class="DemoLayout">
        <p>你的名字是：{{user.name}}</p>
        <p>你几岁了呀：{{user.age}}</p>
    </div>
</template>

<script>
export default {
    name: 'DemoLayout',
    data() {
        return {
            user: {
                name: '阿乐',
                age: '17',
            }
        }
    },
}
</script>

我们还可以在自定义页面中 自定义页面类。

自定义页面类

---
# layout: DemoLayout
pageClass: demo-page-class
---

只能在 .vuepress/styles/index.styl 中编写针对该页面的 CSS ：

/* .vuepress/styles/index.styl */

.theme-container.demo-page-class {
  /* 特定页面的 CSS */
}