Vuepress: Global Footer in Default Theme

[raytu]

It seems that footers are defined separately in each README.md front matter. Is there a way to define a global footer for all pages from a single file or themeConfig?

[meteorlxy]

Not yet in default theme.

In fact, in current default theme, only the home layout has a footer.

There is a <slot name="page-bottom" slot="bottom"/> for page layout to put something like a footer (current some ads for vuejs official theme, lol)

You can check the vuepress-theme-vue in your node_modules/ to find how to implement it.

Example:

// .vuepress/theme/Layout.vue
<template>
  <Layout>
    <footer slot="page-bottom">
      My page footer
    </footer>
  </Layout>
</template>

<script>
import Layout from '@default-theme/Layout.vue'

export default {
  components: {
    Layout,
  }
}
</script>

[ghys]

I have the same requirement, I tried creating a new .vuepress/theme/Layout.vue reusing the layout component from the default theme as shown above.

The problem is, my override.styl is not taken into account anymore (I override $accentColor etc.), presumably because of this:
https://github.com/vuejs/vuepress/blob/d9b290b39863c51f60468b7091d82f52a6c7335a/lib/prepare.js#L64
(useDefaultTheme is now false)

Would it make sense to always copy override.styl if found, to allow custom themes based on the default theme to still override stylus variables?

[ulivz]

As @meteorlxy said, it shouldn't be included in default theme.

@ghys You should open another issue for feature request of override.styl in custom theme.

[iamchathu]

The solution is not works with current version.

[imaegoo]

The solution is not works with current version.

New solution for vuepress v1.5.4

Create 2 files

1. .vuepress/theme/index.js

module.exports = {
  extend: '@vuepress/theme-default'
}

1. .vuepress/theme/layouts/Layout.vue

<template>
  <ParentLayout>
    <template #page-bottom>
      <div>My custom footer</div>
    </template>
  </ParentLayout>
</template>

<script>
import ParentLayout from '@parent-theme/layouts/Layout.vue'

export default {
  name: 'Layout',

  components: {
    ParentLayout
  }
}
</script>