Skip to main content

林協霆醫師

my-slidev-template：含 Chart.js 元件與 Tailscale Funnel 開發伺服器的 Slidev 簡報模板

/blog/my-slidev-template-2026-04-08/ 林協霆
Table of Contents

# Introduction（引言）

Slidev 為基於 Markdown 的程式設計師友善簡報工具，能在版本控制下協作維護講稿，並支援程式碼高亮、互動 demo 與動畫。然而其預設模板與醫學／研究演講需求並不完全契合：缺乏統計圖元件、缺乏快速分享連結機制。本專案以個人需求為基底打造可重用模板，將反覆出現的版型、元件與部署設定一次到位。

# Methods（方法）

模板以 Vue 為主要實作技術，整合 Chart.js 提供原生統計圖支援：使用者可在 Markdown 中以結構化資料定義圖表，模板自動產生風格一致的視覺呈現。版型方面預設了標題頁、章節頁、引用頁、結論頁等學術簡報常用樣式。為解決現場演示時的網路分享需求，模板內建 Tailscale Funnel 開發伺服器設定，可一鍵將本機簡報暴露於網際網路供觀眾掃碼觀看。

設計重點為「合理預設、可被改寫」：所有元件皆以 Vue 元件方式提供，使用者可依個別演講需求調整。Markdown 編輯體驗保持單純，避免將模板複雜度推給作者。

# Results（結果）

使用此模板可大幅縮短一場學術演講從草稿到可演示的時間，特別是在有大量資料圖需求的情境（如試驗結果簡報、Meta 分析摘要）。Tailscale Funnel 整合則簡化了「演講中即時分享連結」的痛點，讓觀眾能在自己裝置上同步閱讀，提升互動性。

# Discussion（討論）

本專案展示了「將個人演講基礎建設模組化」的工程實踐：與其每次重做樣板，不如把它打磨為可複用資產。限制方面，Slidev 對複雜動畫的支援仍不及 Keynote／PowerPoint，部分高度視覺性需求需妥協；Tailscale Funnel 需使用者預先設定帳戶。未來可加入更多醫學演講常用元件（試驗流程圖、生存曲線、決策樹），並結合 Claude Code 一鍵生成投影片草稿。

# 連結

Read next