[Slidev]フロントマターを概説してみる
フロントマターとは?
フロントマターとは、各スライドの冒頭の---で囲われた部分のことです。スライドに関する各種設定を行うことができます。
フロントマターの設定項目
layout
スライドのレイアウトを設定します。どのようなレイアウトがあるかはテーマによって異なります。詳しくは各テーマのページをご参照ください。
なお、デフォルトのテーマのレイアウトについては、以下のページで紹介しています。
title
スライドのタイトルを設定します。Webブラウザ上のタブに反映されます。titleが指定されていない場合は、最初のヘッダーがtitleとして設定されます。
title: ''
titleTemplate
タイトルのテンプレートとなります。%sにtitleに設定した文字列が入ります。デフォルトは%s - Slidevです。
titleTemplate: '%s - Slidev'
theme
スライドで使用するテーマを設定します。テーマは自分で作成したり、テーマギャラリーから選択することができます。デフォルトはdefaultです。
theme: default
addons
使用するアドオンを設定します。デフォルトは[]です。
addons: []
remoteAssets
リモートアセットのダウンロードに関する設定です。ダウンロードする場合にはtrueを、しない場合にはfalseを設定します。また、開発環境でのみ有効にする場合にはdev、ビルド時のみ有効にする場合にはbuildと設定することも可能です。デフォルトはfalseです。
remoteAssets: false
monaco
コードブロックにおけるMonacoエディタの使用に関する設定です。Monacoエディタを使用する場合には trueを、しない場合にはfalseを設定します。また、開発環境でのみ有効にする場合にはdev、ビルド時のみ有効にする場合にはbuildと設定することも可能です。デフォルトはdevです。
monaco: dev
download
SPAにビルドした際に、ダウンロードボタンを表示するかしないかを設定します。trueにするとダウンロードボタンが表示されるようになります。デフォルトはfalseです。
download: false
codeCopy
コードブロックでコピーボタンを表示するかしないかを設定します。trueにするとコピーボタンが表示されるようになります。デフォルトはtrueです。
codeCopy: true
info
SPAにビルドした際に、Informationとして説明文を表示することが可能です。マークダウンで記述することが可能です。デフォルトではfalseになっています。
info: false
highlighter
コードブロックでのシンタックスハイライトの設定です。Slidevではシンタックスハイライトとして、PrismとShikiを使うことができます。デフォルトではprismとなっています。
highlighter: prism
lineNumbers
コードブロックで行番号を表示するかしないかを設定します。trueを設定すると、行番号を表示します。デフォルトではfalseになっています。
lineNumbers: false
colorSchema
スライドの配色に関する設定です。dark、light、all、autoから選択可能です。デフォルトではautoが設定されています。
colorSchema: auto
routerMode
SlidevはVueを使って作成されています。routerModeではVue Routerのモード設定を行います。hashもしくはhistoryが選択可能です。デフォルトではhistoryとなっています。
routerMode: history
hashモードとhistoryモードの違いについては、以下の記事をご参照ください。
aspectRatio
スライドのアスペクト比を設定します。16/9や1:1のように設定します。デフォルトでは16/9となっています。
aspectRatio: 16/9
canvasWidth
スライドの幅を設定します。単位はpxです。デフォルトでは980となっています。
canvasWidth: 980
exportFilename
スライドをエクスポートした際のファイル名を設定します。拡張子は自動的に追加されます。デフォルトではslides-export.pdf（あるいは.png）というファイル名でエクスポートされます。
exportFilename: ''
selectable
スライド中のテキストを選択できるようにするかしないかを設定します。trueを設定すると選択できるようになります。デフォルトではtrueとなっています。
selectable: true
themeConfig
テーマのカスタマイズをします。デフォルトでは{}となっており、何も設定されていません。
なお、どのようなオプションがあるかは各テーマのドキュメントをご参照ください。
Seriphテーマのカスタマイズ例:
theme: seriph
themeConfig:
primary: '#5d8392'
fonts
スライドのフォントに関する設定です。デフォルトでは{}となっており、何も設定されていません。
なお、フォントはGoogle Fontsから自動的にインポートしてくれます。
fontsの設定例:
fonts:
sans: 'Robot'
serif: 'Robot Slab'
mono: 'Fira Code'
favicon
Webブラウザのタブに表示されるアイコンを設定します。デフォルトはSlidevのアイコンになっています。(以下のURL)
favicon: https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png
drawings
スライドに対して行った描画に関する設定をします。デフォルトでは{}となっており、何も設定されていません。詳しくは以下のページをご参照ください。
drawingsの設定例:
drawings:
persist: true
plantUmlServer
ダイアグラムをレンダリングする際に使用するPlantUMLサーバのURLを指定します。デフォルトではhttps://www.plantuml.com/plantumlとなっています。
plantUmlServer: https://www.plantuml.com/plantuml
record
スライドのレコーディングに関する設定を行います。レコーディングを可能にする場合はtrueを設定します。また、開発環境でのみ有効にする場合にはdev、ビルド時のみ有効にする場合にはbuildと設定することも可能です。デフォルトはdevです。
record: dev
remote?
インバウンドリクエストにサーバを公開する際に設定します。remote?に設定した文字列がプレゼンターモードにアクセスする際のパスワードとして設定されます。デフォルトではfalseになっています。
remote?: false
css
使用するCSSエンジンを設定します。windicssとunocssから選択できます。ただしUnoCSSは2022/12/16現在試行中です。デフォルトはwindicssとなっています。
css: windicss
備考
permalink
Jekyllでは定義済みグローバル変数としてpermalinkがありますが、Slidevでは無効になっているようです。
published
また、Jekyllでは定義済みグローバル変数としてpublishedという変数もありますが、こちらもSlidevでは無効になっているようです。
参考サイト
- フロントマターの設定 | Slidev
-
Front Matter | Jekyll
Discussion