📃

[Slidev]スライドにヘッダーやフッター、ページ番号を挿入する

2022/11/29に公開約1,500字

Slidevではグローバルレイヤーを使用することで、ヘッダーやフッター、ページ番号を挿入することができます。
プロジェクトのルートにglobal-top.vueglobal-bottom.vueを作成し、ヘッダーやフッター、ページ番号の設定を行います。

ヘッダーの挿入

global-top.vue
<template>
  <footer class="absolute top-0 right-0 p-2">これはヘッダーです</footer>
</template>

top-0とするとヘッダーにテキストが表示されます。right-0とすると右寄せでテキストが表示されます。toprightの数字で余白を設定します。なお、topbottomleftrightを何も指定しないとデフォルトでtopleftに表示されます。
pでフォントサイズを設定します。

フッターの挿入

global-bottom.vue
<template>
  <footer class="absolute bottom-0 left-0 p-2">これはフッターです</footer>
</template>

bottom-0とするとフッターにテキストが表示されます。left-0とすると左寄せでテキストが表示されます。余白の設定はヘッダーと同じです。表示位置のデフォルトもヘッダーと同じでtopleftに表示されます。

ページ番号の挿入

global-bottom.vue
<template>
  <footer class="absolute bottom-0 left-0 right-0 p-2">
    {{ $slidev.nav.currentPage }} / {{ $slidev.nav.total }}
  </footer>
</template>

$slidev.navプロパティにアクセスすると、現在のページ数やスライド全体のページ数を取得することができます。
$slidev.navプロパティは他にもスライドナビゲーションのコントロールなども保持しています。詳しくは以下のページをご参照ください。

https://ja.sli.dev/custom/vue-context.html#プロパティ

所感

global-top.vueglobal-bottom.vueの違いは何なんでしょうか…
global-bottom.vueならデフォルトでボトムに文字が入るのかと思いましたが、トップに入りました。
まだBeta版ということもあり、今後何か変更があるかもしれないので、ヘッダーに書きたいことはglobal-top.vueに、フッターに書きたいことはglobal-bottom.vueに記述しておくと無難かなと考えています。

中央揃えの方法も分かりません…
今はとりあえずleft-90で良い感じに中央のあたりに配置されたので、leftもしくはrightで微調整することで対応しています。

このあたりの詳細をご存知の方はコメントで教えていただけると嬉しいです!

参考サイト

Discussion

ログインするとコメントできます