Slidev Theme GTlabo

学術発表やプレゼンテーション用に設計されたSlidev用カスタムテーマ。引用管理、数式表示、階層リストなどの機能を提供します。

Install

npm install slidev-theme-gtlabo

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: slidev-theme-gtlabo
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

TODO:

Components

このテーマは以下のコンポーネントを提供します：

1. Citation コンポーネント

インライン引用と参考文献の管理を行います。

<Citation id="reference-key" />

機能:

• インライン引用番号の表示（[1]形式）
• 画面下部に現在のページの引用情報を表示
• 引用番号の自動管理
• 複数ページにわたる引用の追跡

使用例:

この技術について<Citation id="smith2023" />の研究が参考になります。

2. CitationListPage コンポーネント

参考文献一覧ページを生成します。

<CitationListPage />

機能:

• 全ての参考文献を一覧表示
• 学術スタイルでの引用フォーマット
• DOI、URL、ISSN等の情報表示
• ソート機能（キー、著者、年別）

プロパティ:

• style: 引用スタイル（academic、ieee、apa）
• sortBy: ソート基準（key、author、year）

3. Header コンポーネント

プレゼンテーションのヘッダー部分を管理します。

<Header 
  :chapter-data="{ title: 'セクションタイトル' }"
  chapter="section1"
  current-section="intro"
/>

機能:

• 章・セクションの進捗表示
• 現在位置の可視化
• ページ番号表示
• 動的なプログレスバー

プロパティ:

• chapter: 章のキー
• chapterData: 章の情報オブジェクト
• currentSection: 現在のセクション
• currentChapter: 現在の章

4. MathText コンポーネント

数式とテキストを統合表示します。

<MathText 
  text="これは数式 $x^2 + y^2 = z^2$ を含むテキストです。"
  container-tag="p"
  :simple="false"
  :disable-markdown="false"
/>

機能:

• LaTeX数式の自動レンダリング
• インライン数式（$...$）とブロック数式（$$...$$）
• Markdownサポート（太字、イタリック、リンク等）
• KaTeX による数式描画
• シンプルモード対応

プロパティ:

• text: 表示するテキスト
• containerTag: コンテナのHTMLタグ
• simple: シンプルモード（基本的な数式のみ）
• disableMarkdown: Markdownを無効化
• customDelimiters: カスタム区切り文字

5. SectionTitle コンポーネント

セクションタイトルを表示します。

<SectionTitle 
  title="セクションタイトル"
  color="sky-800"
/>

機能:

• 左側のカラーバーと組み合わせたタイトル表示
• UnoCSS/Tailwindカラー対応
• カスタムカラー対応
• スロットコンテンツ対応

プロパティ:

• title: タイトルテキスト
• color: カラー（Tailwind形式またはHEX）

6. SubSectionTitle コンポーネント

サブセクションタイトルを表示します。

<SubSectionTitle 
  title="サブセクションタイトル"
  color="sky-700"
/>

機能:

• 左側のアイコン（矢印）と組み合わせたタイトル表示
• UnoCSS/Tailwindカラー対応
• カスタムカラー対応

プロパティ:

• title: タイトルテキスト
• color: カラー（Tailwind形式またはHEX）

7. TextColorBox コンポーネント

色付きのテキストボックスを表示します。

<TextColorBox 
  title="タイトル"
  text="本文テキスト"
  container-class="my-4"
/>

機能:

• タイトル付きのカラーボックス
• HTMLタグ対応
• マーキング機能（v-mark）
• カスタムスタイル適用

プロパティ:

• title: ボックスのタイトル
• text: ボックスの本文
• containerClass: 追加のCSSクラス

機能:

• SVGベースの入れ子円グラフ
• データ構造の階層表示
• アニメーション効果
• 課題提起セクション付き
• パーセンテージ表示

特徴:

• 外側の円：全体データの分類（構造化/非構造化）
• 内側の円：構造化データの詳細分類
• 自動アニメーション効果
• 完全にカスタマイズ可能なSVG

8. bib2slidev

bib2slidevは、BibTeX形式の参考文献をSlidev用の引用形式に変換するツールです。 Pythonで実装されています。 dev/bib2slidev.ipynbを参照してください。

🛠️ 設定方法

1. 参考文献の設定

frontmatter に citations を追加：

---
citations:
  smith2023:
    author: "Smith, J."
    title: "Research on AI"
    journal: "Journal of AI"
    year: "2023"
    doi: "10.1000/example"
  jones2022:
    author: "Jones, A."
    title: "Machine Learning Basics"
    publisher: "Tech Press"
    year: "2022"
---

2. 章・セクション構造の設定

---
chapters:
  intro:
    title: "はじめに"
    sections:
      overview:
        title: "概要"
      objectives:
        title: "目的"
  method:
    title: "手法"
    sections:
      approach:
        title: "アプローチ"
      implementation:
        title: "実装"
---

📱 使用例

<template>
  <div>
    <!-- ヘッダー -->
    <Header 
      :chapter-data="{ title: '研究手法' }"
      chapter="method"
      current-section="approach"
    />
    
    <!-- セクションタイトル -->
    <SectionTitle title="提案手法" />
    
    <!-- 数式を含むテキスト -->
    <MathText 
      text="提案手法では、損失関数 $L = \frac{1}{n}\sum_{i=1}^{n}(y_i - \hat{y_i})^2$ を最小化します。"
    />
    
    <!-- 階層リスト -->
    <HierarchyList>
      - 手法の特徴
        - 高精度
        - 高速処理
        - 省メモリ
    </HierarchyList>
    
    <!-- 引用 -->
    <p>この手法は<Citation id="smith2023" />で提案されました。</p>
    
    <!-- カラーボックス -->
    <TextColorBox 
      title="重要なポイント"
      text="この手法により従来手法より<strong>20%</strong>の性能向上を実現しました。"
    />
  </div>
</template>

🎨 スタイル

テーマは以下のカラーパレットを使用：

• プライマリ: Sky（sky-600、sky-700、sky-800）
• セカンダリ: Gray（gray-600、gray-700、gray-800）
• アクセント: Blue（blue-500、blue-600）

📦 依存関係

• Vue 3
• Slidev
• UnoCSS/Tailwind CSS
• KaTeX（数式レンダリング）
• Lucide Icons

Contributing

• npm install
• npm run dev to start theme preview of example.md
• Edit the example.md and style to see the changes
• npm run export to generate the preview PDF
• npm run screenshot to generate the preview PNG