# slidev-theme-aircraft-pre1

**Repository Path**: echmo/slidev-theme-aircraft-pre1

## Basic Information

- **Project Name**: slidev-theme-aircraft-pre1
- **Description**: 航模课件主题（学前阶段）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-13
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# slidev-theme-aircraft-pre1

[![NPM version](https://img.shields.io/npm/v/@echmo/slidev-theme-aircraft-pre1?color=3AB9D4&label=)](https://www.npmjs.com/package/@echmo/slidev-theme-aircraft-pre1)

学前阶段航模课程主题

## 开头配置

```md
---
theme: "@echmo/slidev-theme-aircraft-pre1"
transition: fade
download: false
export: false
browserExporter: false
colorSchema: light
fonts:
    mono: Cherry Bomb One
---
```

## 常用方法


嵌入图片

```html
<img src="/assets/example/book.png" h-36 border-2/>

<ImgLabel label="好吃的">
    <img src="/assets/example/book.png" h-36 border-2/>
</ImgLabel>
```

![](/example-export/3.png)


## 布局

通过在小节前添加 `layout: 布局名称` 来设置布局

```md
---
layout: name
---
```

### 封面

第一页默认是这个布局

```md
---

# 课题

---
```

![](/example-export/1.png)

### 小节布局

```md
---
layout: section
---

# - 02 -

## 布局

---
```

![](/example-export/4.png)

### 默认布局

不指定时使用这个布局

![](/example-export/5.png)

### 两列布局

```md
---
layout: two-cols
---

# 标题

::left::

这是左边

::right::

这是右边
---
```

![](/example-export/6.png)


### 居中布局

```md
---
layout: center
---

# 居中布局

::center::

<img src="/assets/example/img.webp" w-48/>
---
```

![](/example-export/7.png)


### 左侧图片布局

```md
---
layout: image-left
image: /assets/example/img.webp
---

# 标题

这是图片左侧布局

---
```

![](/example-export/8.png)

### 右侧图片布局

```md
---
layout: image-right
image: /assets/example/img.webp
---

# 标题

这是图片右侧布局

---
```

![](/example-export/9.png)


### 总结布局

```md
---
layout: summary
---

## 这些课我们学习了如何...

## 这些课我们学习了如何...

## 这些课我们学习了如何...

---
```

![](/example-export/10.png)

### iframe布局

```md
---
layout: iframe
url: https://sli.dev/
---

---
```

![](/example-export/11.png)

### 纯色布局

```md
---
layout: none
class: bg-blue-400 text-white
---

# 标题

这纯色背景布局，可以通过class属性设置背景颜色

---
```

![](/example-export/12.png)

### 全屏布局

```md
---
layout: full
---

<Video>
    <source src="" />
</Video>
---
```

![](/example-export/13.png)


### 结束

在最后一页指定 `end` 布局来添加结束页

```md
---
layout: end
---
```

![](/example-export/21.png)

## 组件

组件是一些具有集成样式和功能的元素，使用大写字母开头的标签


### 字体

```html
<BigText>特别大的字</BigText>

把一部分字体<Text>突出</Text>显示
```

![](/example-export/15.png)

### 知识卡片

```html
<Knowledge>使用Knowledge组件来创建知识卡片</Knowledge>
```

![](/example-export/16.png)

### 动手实践

```html
<Try>使用Try组件来创建“动手尝试”卡片</Try>
```

![](/example-export/17.png)

### 提问

```html
<Question>
    你知道地球距离月球有多远吗？
</Question>
```

![](/example-export/18.png)

### 标签

```html
<Badge>使用Badge组件来创建标签</Badge>
```

![](/example-export/19.png)

### 选择题

```html
<Choice>
    <template v-slot:question>
        下面哪个说法是正确的?
    </template>
    <template v-slot:choices>
        <div>
            <span mr-4 v-mark.highlight.green="1">A</span>
            正确的选项        
        </div>
        <div>
            <span mr-4 v-mark.highlight.red="2">B</span>
            错误的选项        
        </div>
        <div>
            <span mr-4 v-mark.highlight.red="3">C</span>
            错误的选项        
        </div>
        <div>
            <span mr-4 v-mark.highlight.green="4">D</span>
            正确的选项        
        </div>
    </template>
</Choice>
```

![](/example-export/20.png)


---

__created by echmo__