---
theme: ./
title: Lucas Yang's Slidev Theme
---

# Lucas Yang's Slidev Theme

開發者專屬的幻燈片工具

---
layout: presenter
---

---
layout: presenter-v
---

---

# 什麼是 Slidev?

Slidev is a slides maker and presenter designed for developers, consist of the following features

- 📝 **Text-based** - focus on the content with Markdown, and then style them later
- 🎨 **Themable** - theme can be shared and used with npm packages
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
- 🤹 **Interactive** - embedding Vue components to enhance your expressions
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
- 🛠 **Hackable** - anything possible on a webpage

<br>
<br>

Read more about [Why Slidev?](https://sli.dev/guide/why)


---

# 導覽

Hover on the bottom-left corner to see the navigation's controls panel

### Keyboard Shortcuts

|     |     |
| --- | --- |
| <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide |
| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
| <kbd>up</kbd> | previous slide |
| <kbd>down</kbd> | next slide |

---
layout: image-right
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
---

# 程式碼

Use code snippets and get the highlighting directly!

`inline code`

```ts
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = {...user, ...update}
  saveUser(id, newUser)
}

// 中文文字
```

---
layout: center
class: 'text-center'
---

<Yt id="yxo-h0scF98" width="640" height="360" />

---
layout: center
class: 'text-center'
---

# 了解更多

[Slidev 文檔](https://cn.sli.dev) / [GitHub 程式碼](https://github.com/ycs77/slidev-theme-ycs77)