基本
次の項で詳細を書きますが、基本的に VuePress は footer をカスタマイズするのにあまり向いていません。
手順
結論から申し上げますと、MarkdownのFrontmatterを以下のように設定します。
まず、Markdown の Frontmatter で home を true に変更します。
参考：Frontmatter | VuePress (vuejs.org)
そして、footer等を設定していきます。ここではfooterHtmlを有効にしてHTML形式でfooterを設定するようにしています。
参考：Frontmatter | VuePress (vuejs.org)
---
home: true
footer: MIT Licensed | Copyright © 2023-ryuden<br/><a href="https://ryuden.org/">公式サイト</a>
footerHtml: true
---しかし、これには問題があります。
Markdownに設定する項目のため、他のページにはfooterを設定できません。いいえ、できるのですが、全てのMarkdownファイルを変更する必要があるため大変面倒です。ちょっと書き換えるたびに全ファイル書き換えです。バカかよ
また、footerを設定したらLast Update などが表示されなくなります。home:trueの通り、基本的にホームページ/TOPページ向きの設定になっているためです。
まとめ
TOPページにだけ設定するか、navbarからアクセスできるようにした方が良いと思います。
私はお問い合わせフォームへのリンクや、規約のページなどをfooterに書くことが多いのですが、これらをnavbarの方に移動させました。
navbarの項目が増えてしまうのが少々難点であります。
コメント