vuepress-starter/docs/.vuepress/theme/layouts/GlobalLayout.vue

<template>
  <div id="global-layout" class="global-wrapper">
    <Navbar />
    <component :is="layout"/>
    <footer><h1>Footer</h1></footer>
  </div>
</template>

<script>
import 'jquery/dist/jquery.slim.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

import Navbar from '@theme/components/Navbar.vue'

export default {
  components: {
    Navbar
  },
  computed: {
    layout () {
      if (this.$page.path) {
        if (this.$frontmatter.layout) {
          // 你也可以像默认的 globalLayout 一样首先检测 layout 是否存在
          return this.$frontmatter.layout
        }
        return 'Layout'
      }
      return 'NotFound'
    }
  },
  mounted () {
    window.addEventListener('scroll', this.$themeScroll.notify)
  }
}
</script>

<style lang="scss">
body {
  padding-top: 4.5rem;
  overflow-y: auto;
}
</style>