Humanophilic Slidev Theme

学会発表用のスライドテンプレートです。Slidev を使ってスライドを作成する際に利用できます。

このフォルダ単体を他のプロジェクトにコピーして、そのまま使えます。

環境構築

npm ci

以下のコマンドでスライドのプレビューを確認することができます。

npm run presentation

PDF 出力:

npm run export

VS Code の場合は、Slidev 拡張機能をインストールすると便利です。

ディレクトリ構成

.
├── slides.md           # スライド本体
├── layouts/            # カスタムレイアウト
├── styles/             # テーマ CSS
├── global-bottom.vue   # ページ番号表示
├── public/             # 背景画像・エクスポート出力先
├── assets/             # スライド用画像
└── package.json

スライドの作り方

slides.md にスライドの内容を記述します。区切り線（---）でページを区切ります。

---
theme: default
title: 学会発表
colorSchema: light
aspectRatio: 16/9
canvasWidth: 1280
layout: title
---

<div class="top">
  <h1 class="title">ここに研究内容が<br />入ります</h1>
  <p class="subtitle">XXX研究会</p>
</div>
<div class="bottom">
  <p class="name">九大 太郎</p>
  <p class="affiliation">九州大学大学院システム情報科学府</p>
</div>

---
layout: default
---

# テストページ

ここに文章を書きます

---
layout: center
---

# 中央寄せのページ

1枚目のタイトルスライドは、headmatter に layout: title を指定してください。--- を余分に挟むと空のスライドが1枚入ってしまいます。

レイアウト

レイアウト	用途
title	タイトルページ（背景: bg-top.jpg）
default	通常ページ（背景: bg-main.jpg）
center	中央寄せページ

フロントマターで class: table-center を指定すると、テーブルを中央寄せできます。

Marp 版との記法の違い

Marp 版テンプレートと併用する場合の対応表です。

Marp	Slidev
<!-- _class: title -->	layout: title
<!-- _class: center -->	layout: center
<!-- _class: table-center -->	class: table-center

タイトルページの HTML 構造（.top / .bottom など）は Marp 版と同じです。

テーマのカスタマイズ

• スタイル: styles/humanophilic.css
• レイアウト: layouts/
• 背景画像: public/bg-main.jpg, public/bg-top.jpg

参考資料

• Slidev公式サイト
• Slidev Syntax Guide
• Slidev Directory Structure