tech-slide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tech Slide

技术幻灯片

Create consistent, educational technical presentations following tech-slide patterns for structured learning materials.

遵循技术幻灯片模板，创建风格统一、用于结构化学习资料的教育类技术演示文稿。

When to Use

适用场景

Technical tutorials and workshops
Technology introductions and demos
Educational course materials
Conference talks with learning objectives
Documentation presentations

技术教程与工作坊
技术介绍与演示
教育课程资料
带有学习目标的会议演讲
文档类演示文稿

Presentation Structure

演示文稿结构

Every tech-slide presentation follows this structure:

Cover - Title, author, contact info
Table of Contents - Overview of all sections
Section Dividers - Topic transitions with context
Content Slides - Learning material
Key Takeaways - Summary of main points
Thank You - Optional closing slide

每份技术演示文稿均遵循以下结构：

封面 - 标题、作者、联系方式
目录 - 所有章节概览
章节分隔页 - 带上下文的主题过渡页
内容幻灯片 - 学习资料内容
要点总结 - 核心内容摘要
致谢页 - 可选的结束幻灯片

Design Principles

设计原则

Simplicity First - Keep slides clean and minimal
Avoid Excessive Emojis - Use sparingly, only when adding value
No Emojis in Section Titles - Keep section headers professional
Content Over Decoration - Focus on learning material, not visual clutter

简洁优先 - 保持幻灯片简洁明了
避免过度使用表情符号 - 仅在能增加价值时少量使用
章节标题中不使用表情符号 - 保持章节标题专业
内容优先于装饰 - 聚焦学习内容，避免视觉杂乱

Quick Start

快速开始

Step 1: Choose Color Scheme

步骤1：选择配色方案

IMPORTANT: Select ONE primary color for your entire presentation.

Common choices:

```
navy
```
- Professional, technical (recommended)
```
emerald
```
- Growth, sustainability
```
violet
```
- Creative, innovative
```
amber
```
- Warm, energetic
```
pink
```
- Friendly, modern
```
sky
```
- Clear, tech-focused

Color mode: Light (recommended) or Dark

重要提示：为整个演示文稿选择一种主色调。

常见选择：

```
navy
```
- 专业、技术向（推荐）
```
emerald
```
- 成长、可持续
```
violet
```
- 创意、创新
```
amber
```
- 温暖、有活力
```
pink
```
- 友好、现代
```
sky
```
- 清晰、技术聚焦

配色模式： 浅色（推荐）或深色

Step 2: Use the Template

步骤2：使用模板

Copy

assets/templates/basic-tech-slide.md

and customize:

bash

undefined

复制

assets/templates/basic-tech-slide.md

并进行自定义：

bash

undefined

Copy template

cp assets/templates/basic-tech-slide.md ./slides.md

Edit content, keeping the structure

Update title, author, sections in slides.md

Run Slidev

npx slidev slides.md --open


**CRITICAL: First Slide Structure**

The first slide configuration goes directly in the frontmatter. Include `layout` and `color` in the frontmatter, then the slide content follows immediately without a slide separator.

✅ **CORRECT:**
```md
---
theme: neversink
title: My Presentation
layout: intro
color: navy
---

npx slidev slides.md --open


**关键注意：首幻灯片结构**

首幻灯片的配置直接写在前置元数据（frontmatter）中。需在前置元数据中包含`layout`和`color`，随后直接编写幻灯片内容，无需使用幻灯片分隔符。

✅ **正确示例：**
```md
---
theme: neversink
title: My Presentation
layout: intro
color: navy
---

First Slide Content

layout: default

Second Slide


❌ **WRONG:**
```md
---
theme: neversink
title: My Presentation
---

---
layout: intro
---


❌ **错误示例：**
```md
---
theme: neversink
title: My Presentation
---

---
layout: intro
---

First Slide ← This creates issues

undefined

undefined

Slide Patterns

幻灯片模板样式

1. Cover Slide (Full-Color)

1. 全彩封面幻灯片

First slide with presentation metadata. Configuration goes in frontmatter.

---
theme: neversink
colorSchema: light
title: Introduction to [Your Topic]
author: Your Name
email: your.email@example.com
layout: intro
color: navy  # Your primary color
---

包含演示文稿元数据的首幻灯片。配置信息写在前置元数据中。

---
theme: neversink
colorSchema: light
title: Introduction to [Your Topic]
author: Your Name
email: your.email@example.com
layout: intro
color: navy  # Your primary color
---

Introduction to [Your Topic]

A Comprehensive Guide

Your Name
your.email@example.com

:: note :: Last updated: 2026-02-09


**Rules:**
- ✅ First slide layout and color in frontmatter
- ✅ Include title, author, email
- ❌ Don't use white/black background

A Comprehensive Guide

Your Name
your.email@example.com

:: note :: Last updated: 2026-02-09


**规则：**
- ✅ 首幻灯片的布局和颜色配置在前置元数据中
- ✅ 包含标题、作者、邮箱
- ❌ 不要使用白色/黑色背景

2. Table of Contents (Full-Color)

2. 全彩目录幻灯片

Overview of all sections. Use slide separator for second slide onwards.

---
layout: side-title
side: l
align: lm-lm
colorSchema: light
color: navy  # Use primary color
---

:: title ::

所有章节的概览。从第二张幻灯片开始使用幻灯片分隔符。

---
layout: side-title
side: l
align: lm-lm
colorSchema: light
color: navy  # Use primary color
---

:: title ::

:: content ::

Background & Motivation
Core Concepts
Implementation Guide
Best Practices
Key Takeaways

</div> ```

Rules:

✅ Use primary color (same as cover and sections)
✅ Keep simple and clean - avoid excessive emojis
✅ Number all sections consistently
✅ Wrap in
```
<div style="font-weight: bold">
```
for bold styling

:: content ::

Background & Motivation
Core Concepts
Implementation Guide
Best Practices
Key Takeaways

</div> ```

规则：

✅ 使用主色调（与封面和章节分隔页一致）
✅ 保持简洁明了 - 避免过度使用表情符号
✅ 统一为所有章节编号
✅ 用
```
<div style="font-weight: bold">
```
包裹以实现加粗样式

3. Section Dividers (Full-Color)

3. 全彩章节分隔页

Mark major topic transitions.

---
layout: section
color: navy  # Same primary color for ALL sections
---

标记主要主题的过渡。

---
layout: section
color: navy  # Same primary color for ALL sections
---

Section: Core Concepts

<hr>

<span style="opacity: 0.4">Background & Motivation</span>
Core Concepts
<span style="opacity: 0.4">Implementation Guide</span>
<span style="opacity: 0.4">Best Practices</span>
<span style="opacity: 0.4">Key Takeaways</span>


**Rules:**
- ✅ Use primary color (same for ALL sections)
- ✅ Use ordered list (1. 2. 3.) for table of contents
- ✅ Show full ToC with current section bold
- ✅ Dim other sections with `<span style="opacity: 0.4">`
- ✅ Keep section titles clean - no emojis
- ❌ Don't wrap in `<div>` tags - use Markdown ordered lists
- ❌ Don't rotate colors between sections

<hr>

<span style="opacity: 0.4">Background & Motivation</span>
Core Concepts
<span style="opacity: 0.4">Implementation Guide</span>
<span style="opacity: 0.4">Best Practices</span>
<span style="opacity: 0.4">Key Takeaways</span>


**规则：**
- ✅ 使用主色调（所有章节分隔页保持一致）
- ✅ 使用有序列表（1. 2. 3.）展示目录
- ✅ 显示完整目录，当前章节加粗
- ✅ 用`<span style="opacity: 0.4">`淡化其他章节
- ✅ 章节标题保持简洁 - 不使用表情符号
- ❌ 不要用`<div>`标签包裹 - 使用Markdown有序列表
- ❌ 不要在不同章节间更换颜色

4. Content Slides (White/Black Background)

4. 白底/黑底内容幻灯片

Regular learning content.

---
layout: default

常规学习内容幻灯片。

---
layout: default

NO COLOR - white/black background

Fundamental Principle #1

Definition: Clear explanation of the concept

python

undefined

Definition: Clear explanation of the concept

python

undefined

Code example

def example(): return "result" ```

<v-clicks>

Key Point: Important detail
Implication: What this means
Usage: When to apply

</v-clicks> ```

Rules:

✅ Use white/black background (NO color)
✅ Use primary color for accents only
❌ Don't use full-color backgrounds

Two-column layout:

---
layout: two-cols-title
---

:: title ::

def example(): return "result"


<v-clicks>

- **Key Point**: Important detail
- **Implication**: What this means
- **Usage**: When to apply

</v-clicks>

规则：

✅ 使用白底/黑底（不设置主色调）
✅ 仅将主色调用于强调元素
❌ 不要使用全彩背景

双栏布局：

---
layout: two-cols-title
---

:: title ::

Principle #2

:: left ::

Concept

Point 1
Point 2

:: right ::

Point 1
Point 2

:: right ::

Visual

mermaid

graph LR
    A --> B --> C
\`\`\`

mermaid

graph LR
    A --> B --> C

5. Key Takeaways (White/Black Background)

5. 白底/黑底要点总结幻灯片

Summary of main learnings.

---
layout: default
---

核心学习内容的总结。

---
layout: default
---

Key Takeaways

Main learnings from this presentation:

Concept A: Core understanding gained
Concept B: Key skill learned
Concept C: Important principle
Next Steps: Continue learning
Resources: Community and docs


**Rules:**
- ✅ Use white/black background (NO color)
- ✅ Limit to 3-5 key points
- ✅ Make actionable and memorable

Main learnings from this presentation:

Concept A: Core understanding gained
Concept B: Key skill learned
Concept C: Important principle
Next Steps: Continue learning
Resources: Community and docs


**规则：**
- ✅ 使用白底/黑底（不设置主色调）
- ✅ 限制为3-5个要点
- ✅ 内容需具备可操作性且易于记忆

6. Thank You Slide (Full-Color)

6. 全彩致谢幻灯片

Optional closing slide.

---
layout: section
color: navy  # Primary color
---

<div style="text-align: center">

可选的结束幻灯片。

---
layout: section
color: navy  # Primary color
---

<div style="text-align: center">

Thank You!

</div> ```

Color Guidelines

配色指南

Full-Color Slides (Use Primary Color)

全彩幻灯片（使用主色调）

Cover -
```
layout: intro
```
+
```
color: navy
```
Table of Contents -
```
layout: side-title
```
+
```
color: navy
```
Section Dividers -
```
layout: section
```
+
```
color: navy
```
Thank You -
```
layout: section
```
+
```
color: navy
```

封面 -
```
layout: intro
```
+
```
color: navy
```
目录 -
```
layout: side-title
```
+
```
color: navy
```
章节分隔页 -
```
layout: section
```
+
```
color: navy
```
致谢页 -
```
layout: section
```
+
```
color: navy
```

White/Black Background (NO Color)

白底/黑底幻灯片（不设置主色调）

All Content Slides -
```
layout: default
```
or
```
two-cols-title
```
(no color)
Key Takeaways -
```
layout: default
```
(no color)

所有内容幻灯片 -
```
layout: default
```
或
```
two-cols-title
```
（不设置color）
要点总结 -
```
layout: default
```
（不设置color）

Accents (Primary Color)

强调色（主色调）

Use primary color for highlights within content slides:

Callout borders:
```
border-navy-500
```
Callout backgrounds:
```
bg-navy-50
```
(light) or
```
bg-navy-900
```
(dark)
Important highlights
Links and interactive elements

undefined

在内容幻灯片中，仅将主色调用于高亮元素：

提示框边框：
```
border-navy-500
```
提示框背景：
```
bg-navy-50
```
（浅色模式）或
```
bg-navy-900
```
（深色模式）
重要内容高亮
链接与交互元素

undefined

Content Slide (white background)

<div class="p-4 border-l-4 border-navy-500 bg-navy-50"> 💡 **Tip**: Primary color as accent </div> ```

Layout Best Practices

布局最佳实践

two-cols-title Content Placement

two-cols-title 布局的内容放置规范

CRITICAL: Place ALL content inside

:: left ::

and

:: right ::

sections.

❌ WRONG:

---
layout: two-cols-title
---

:: title ::

关键提示：所有内容必须放在

:: left ::

和

:: right ::

区域内。

❌ 错误示例：

---
layout: two-cols-title
---

:: title ::

Title

Text outside sections causes spacing issues

:: left :: Left

:: right :: Right


✅ **CORRECT**:
```md
---
layout: two-cols-title
---

:: title ::

Text outside sections causes spacing issues

:: left :: Left

:: right :: Right


✅ **正确示例：**
```md
---
layout: two-cols-title
---

:: title ::

Title

:: left :: All left content

:: right :: All right content

undefined

:: left :: All left content

:: right :: All right content

undefined

Consistent Spacing

统一间距

Option 1: Add descriptions (Recommended for educational content)

undefined

方案1：添加描述（推荐用于教育类内容）

undefined

Title

Brief description providing context.

List items


**Option 2: Global CSS (Place after first slide content)**
```md
<style>
/* Global styles - placed after first slide but applies to all slides */
.slidev-layout h1 + p,
.slidev-layout h1 + ul,
.slidev-layout h1 + ol,
.slidev-layout h1 + pre,
.slidev-layout h1 + blockquote,
.slidev-layout h1 + table,
.slidev-layout h1 + div,
.slidev-layout h1 + .v-clicks,
.slidev-layout h1 + .v-click {
  margin-top: 1.5rem !important;
}

/* Adjust list spacing if needed */
:global(ul li), :global(ol li) {
  margin-bottom: 0.5rem !important;
}
</style>

Brief description providing context.

List items


**方案2：全局CSS（放置在首幻灯片内容之后）**
```md
<style>
/* Global styles - placed after first slide but applies to all slides */
.slidev-layout h1 + p,
.slidev-layout h1 + ul,
.slidev-layout h1 + ol,
.slidev-layout h1 + pre,
.slidev-layout h1 + blockquote,
.slidev-layout h1 + table,
.slidev-layout h1 + div,
.slidev-layout h1 + .v-clicks,
.slidev-layout h1 + .v-click {
  margin-top: 1.5rem !important;
}

/* Adjust list spacing if needed */
:global(ul li), :global(ol li) {
  margin-bottom: 0.5rem !important;
}
</style>

Best Practices

最佳实践

ONE primary color - Use consistently throughout
White/black for content - Never use color backgrounds for learning slides
Keep it simple - Avoid excessive emojis and decorations
Clean section titles - No emojis in section headers
3-5 major sections - Stay focused on core objectives
Section dividers every 8-12 slides - Prevent overload
Key Takeaways = 3-5 points - Keep memorable
Use ordered lists for section ToC - Use Markdown lists (1. 2. 3.) with bold/opacity for progress
Include contact info - On cover slide
Place global styles after first slide - CSS applies to all slides when placed in
```
<style>
```
tag after cover content

单一主色调 - 全程保持一致使用
内容幻灯片用白底/黑底 - 学习类幻灯片绝不使用彩色背景
保持简洁 - 避免过度使用表情符号和装饰元素
章节标题简洁 - 章节标题中不使用表情符号
3-5个主要章节 - 聚焦核心目标
每8-12张幻灯片添加章节分隔页 - 避免信息过载
要点总结控制在3-5个 - 易于记忆
章节目录使用有序列表 - 使用Markdown列表（1. 2. 3.），通过加粗/透明度标记进度
包含联系方式 - 在封面幻灯片上
全局样式放在首幻灯片之后 - 将CSS放在
```
<style>
```
标签中并置于封面内容之后，可应用于所有幻灯片

Complete Example

完整示例

See assets/templates/basic-tech-slide.md for a complete presentation demonstrating all patterns.

完整示例请参考assets/templates/basic-tech-slide.md，该演示文稿展示了所有模板样式。