# 概要

Vuepress の Homepage Layout に手を加えて footer に Link を設定できるようにします

手順はこんな感じです

  1. まだ default theme を eject していないなら eject
  2. .vuepress/theme/components/components/Home.vue に footerLink を追加
  3. README.md に footerLink を追加

# 1. まだ default theme を eject していないなら eject

.vuepress/theme/ がなければ eject を行います。詳細はこちら (opens new window)

footer に追加する Link を frontmatter の footerLink で設定するものとします。Home.vue を以下のように変更します





 




    <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>



 


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

Last Updated: 2023/7/11 11:29:02