Abstract

Modify Homepage Layout of Vuepress so that the Link can be set in the footer.

The steps are as follows:

1. If you haven't ejected the default theme yet, eject it.
2. Add footerLink component to the file .vuepress/theme/components/components/Home.vue.
3. Add footerLink to the README.md.

If you haven't ejected the default theme yet, eject it.

Eject if the file .vuepress/theme/ doesn't exist. Click here (opens new window) for details.

Add footerLink component to the file .vuepress/theme/components/components/Home.vue.

Use footerLink from frontmatter. Change the file Home.vue as below

    <div
      class="footer"
      v-if="data.footer"
    >
      {{ data.footer }}
    </div>
  </main>
</template>

    <div
      v-if="data.footer"
      class="footer"
    >
      <a :href='data.footerLink'>{{ data.footer }}</a>
    </div>
  </main>
</template>

Add footerLink to the README.md.

---
home: true
footer: ©Atelier Ueda
footerLink: https://atelierueda.uedasoft.com/
---

---