dev-slides

開發者簡報技能

概述

此技能讓你能使用 Slidev（一個基於 Vue 的簡報框架）來建立專為開發者設計的簡報。用 Markdown 撰寫投影片，並可加入即時程式碼展示、圖表與元件。

使用方式

1. 描述你的技術簡報需求
2. 我會產生正確語法的 Slidev Markdown
3. 包含程式碼區塊、圖表與 Vue 元件

範例提示：

• 「建立一個 Vue.js 工作坊簡報」
• 「製作可即時執行程式碼的投影片」
• 「製作含有圖表的技術演講」
• 「建立開發者入門簡報」

領域知識

Slidev 基本用法

---
theme: default
title: My Presentation
---

# 歡迎

這是第一張投影片

---

# 第二張投影片

內容在這裡

投影片分隔線

---   # 新水平投影片

---   # 另一張投影片
layout: center
---

# 置中內容

版面配置

---
layout: cover
---
# 標題投影片

---
layout: intro
---
# 簡介

---
layout: center
---
# 置中

---
layout: two-cols
---
# 左欄
::right::
# 右欄

---
layout: image-right
image: ./image.png
---
# 含圖片的內容

程式碼區塊

# 程式碼範例

\`\`\`ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = \`Hello, \${name}!\`
console.log(greeting)
// 輸出：Hello, Slidev!
\`\`\`

<!-- 逐步高亮行數 -->

Monaco 編輯器（即時程式碼）

\`\`\`ts {monaco}
// 可編輯的程式碼區塊
function add(a: number, b: number) {
  return a + b
}
\`\`\`

\`\`\`ts {monaco-run}
// 可執行的程式碼
console.log('Hello from Slidev!')
\`\`\`

圖表（Mermaid）

\`\`\`mermaid
graph LR
  A[開始] --> B{決策}
  B -->|是| C[動作 1]
  B -->|否| D[動作 2]
\`\`\`

\`\`\`mermaid
sequenceDiagram
  Client->>Server: 請求
  Server-->>Client: 回應
\`\`\`

Vue 元件

<Counter :count="10" />

<Tweet id="1390115482657726468" />

<!-- 自訂元件 -->
<MyComponent v-click />

動畫

<v-click>

點擊後出現

</v-click>

<v-clicks>

- 項目 1
- 項目 2
- 項目 3

</v-clicks>

<!-- 或使用 v-click 指令 -->
<div v-click>動畫內容</div>

Frontmatter

---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
  persist: false
css: unocss
---

範例

範例：API 工作坊

---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
---

# REST API 工作坊

使用 Node.js 建立現代 API

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer">
    按空白鍵到下一頁 <carbon:arrow-right />
  </span>
</div>

---
layout: two-cols
---

# 我們將涵蓋

<v-clicks>

- RESTful 原則
- Express.js 基礎
- 認證
- 錯誤處理
- 測試

</v-clicks>

::right::

\`\`\`ts
// 預覽
const app = express()
app.get('/api/users', getUsers)
app.listen(3000)
\`\`\`

---

# 即時展示

\`\`\`ts {monaco-run}
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

console.log(JSON.stringify(users, null, 2))
\`\`\`

---
layout: center
---

# 有問題嗎？

[GitHub](https://github.com) · [文件](https://docs.example.com)

安裝

npm init slidev@latest

資源

• Slidev 文件
• GitHub
• 主題