CODEWITHSUNDEEP
vue.jsmarkdownyaml-front-mattervuepress
Badan
Badan

Reputation: 256

Allow html/markdown to footer in VuePress

I am trying to add html/markdown to the footer variable in VuePress default theme. I would like to add url in te footer that links to my website. However, I cannot find a way to add url to the footer. Can you please tell me how can i do that? Here is my frontmatter:

—

home: true

footer: Developed by [John Doe ](http://mywebsite.com). || Powered by VuePress

---

How can i do that? According this issue in Github, this feature is still not available, however, there must be a workaround?

Upvotes: 1

Views: 2082

Answers (2)

LeoRon
LeoRon

Reputation: 43

Without copying theme:
You can use vue components in markdown.
Downside: <Footer/> has to be copied in every page/markdown file and your footer is inside <main>.

Create folder/file .vuepress/components/Footer.vue

<template>
  <footer>
<!-- html in here -->
  </footer>
</template>

<style lang="stylus" scoped>
// css/stylus here or in global stylus file
</script>

In your markdown add <Footer/> at bottom of every page.

With theme copy:
- create component Footer.vue as above
- console: vuepress eject (docs here)
- Go to .vuepress\theme\Layout.vue
- below </Page> add <Footer/>

Upvotes: 4

HerrSiering
HerrSiering

Reputation: 128

If the default theme does not provide that, you would need to build your own theme :-/

Maybe copy the default theme and put that into .vuepress/theme? I'd probably add a custom footer in the Layout.vue file (here), also don't forget to put it into the 404.vue file as well :)

There's also a markdown package shipped within Vuepress, so you might be able to use that to render the markdown string from frontmatter?

Sorry to not provide a "works out of the box" answer – seems like it's not that simple.

Upvotes: 1

Related Questions