• 主题的配置
    • plugins
    • devTemplate Danger Zone
    • ssrTemplate Danger Zone
    • extend Danger Zone
    • globalLayout Danger Zone

    主题的配置

    和插件几乎一样,主题的配置文件 themeEntry 应该导出一个普通的 JavaScript 对象(#1),它也可以是一个返回对象的函数(#2),这个函数接受用户在 siteConfig.themeConfig 为第一个参数、包含编译期上下文的 ctx 对象作为第二个参数。

    1. // #1
    2. module.exports = {
    3. // ...
    4. }
    1. // #2
    2. module.exports = (themeConfig, ctx) => {
    3. return {
    4. // ...
    5. }
    6. }

    提示

    • 你应该能看到 themeEntrythemeConfig 的区别,前者是一个主题本身的配置,这些配置由 VuePress 本身提供;而后者则是用户对主题的配置,这些配置选项则由当前使用的主题来实现,如 默认主题配置。
    • 除了本节列出的选项,themeEntry 也支持插件支持的所有 配置选项 和 生命周期。

    plugins

    • 类型: Array|Object
    • 默认值: undefined参考:

    • 插件 > 使用插件.


    注意

    你可能不需要使用下面这些带有 Danger Zone 的选项,除非你知道你在做什么!

    devTemplate Danger Zone

    • 类型: String
    • 默认值: undefineddev 模式下使用的 HTML 模板路径,默认模板见 这里

    ssrTemplate Danger Zone

    • 类型: String
    • 默认值: undefinedbuild 模式下使用的 HTML 模板路径,默认模板见 这里

    参考:

    • Vue SSR Guide > template.

    extend Danger Zone

    • 类型: String
    • 默认值: undefined
    1. module.exports = {
    2. extend: '@vuepress/theme-default'
    3. }

    VuePress 支持一个主题继承于另一个主题。VuePress 将遵循 override 的理念自动帮你解决各种主题属性(如样式、布局组件)的优先级。

    参考:

    • 主题继承
    • 例子: @vuepress/theme-vue

    globalLayout Danger Zone

    • 类型: String
    • 默认值: undefined
    1. // themePath/index.js
    2. module.exports = {
    3. globalLayout: '/path/to/your/global/vue/sfc'
    4. }

    全局布局组件是负责管理全局布局方案的一个组件,VuePress 默认的 globalLayout会帮你根据 $frontmatter.layout 来渲染不同的布局,所以大部分情况下你不要配置此选项。

    举例来说,当你想为当前主题设置全局的 header 和 footer 时,你可以这样做:

    1. <!-- themePath/layouts/GlobalLayout.vue -->
    2. <template>
    3. <div id="global-layout">
    4. <header><h1>Header</h1></header>
    5. <component :is="layout"/>
    6. <footer><h1>Footer</h1></footer>
    7. </div>
    8. </template>
    9. <script>
    10. export default {
    11. computed: {
    12. layout () {
    13. if (this.$page.path) {
    14. if (this.$frontmatter.layout) {
    15. // 你也可以像默认的 globalLayout 一样首先检测 layout 是否存在
    16. return this.$frontmatter.layout
    17. }
    18. return 'Layout'
    19. }
    20. return 'NotFound'
    21. }
    22. }
    23. }
    24. </script>