Skip to content

Commit

Permalink
📃 docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaron-yang-biz
aaron-yang-biz committed Jul 4, 2024
1 parent 1089083 commit 5f39f69
Show file tree
Hide file tree
Showing 2 changed files with 320 additions and 150 deletions.
315 changes: 166 additions & 149 deletions README-cn.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
Slidev-theme-rich
========
# Slidev-theme-rich

[English](README.md) [Live demo](https://zillionare.github.io/slidev-theme-rich/)

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


一个Slidev主题，提供丰富的UI组件和令人惊叹的视觉效果。
Rich是一个Slidev主题，它提供丰富的UI组件和令人惊叹的视觉效果。


![](https://images.jieyu.ai/images/2024/07/cover.gif)
Expand All @@ -17,23 +16,20 @@ Slidev-theme-rich

关于Slidev，请参考[Slidev](https://github.com/slidevjs/slidev).

 🛠 安装
------
[在线演示](https://zillionare.github.io/slidev-theme-rich/)

## 🛠 安装


将以下 frontmatter 添加到您的 `slides.md` 中。启动Slidev然后它会提示你自动安装本主题。

---
```yaml
theme: rich
---
```

对于主题提供的内容，您可以参考 [Demo](https://zillionare.github.io/slidev-theme-rich)以了解有关如何使用主题的更多信息。
 💼 布局
------
## 💼布局

该主题提供以下布局：
###  cover
Expand All @@ -43,15 +39,14 @@ Slidev-theme-rich
对于其他布局，只需使用内置的 Slidev 即可。
 🧩 componentss
------
## 🧩 components
**提示：几乎每个组件都支持 v-motion，因此您不必另外声明。**
该主题提供以下组件：
###  Device
###  Device Mockup
![alt text](https://images.jieyu.ai/images/2024/07/mockup-device.gif)
Expand Down Expand Up @@ -115,6 +110,136 @@ Slidev-theme-rich

在示例中，我们只是将视频放入设备的屏幕中。但实际上，任何有效的 html/markdown 内容都可以。

### Anime

Animate.css提供了几十种简单但常用的动画。但直接使用它并不方便，比如需要额外引入css文件，样式声明较长、不易记；如果是退出效果，动画在退出动作执行完之后，仍然会回到原始状态等等。

我们提供Anime这个组件，以便可以更容易地使用Animate.css。

#### props

| name | type | default | description |
| ------ | --------------------- | ------- | -------------------------------------------------------- |
| action | String | '' | 必须提供，动画名称 |
| dur | String | 1s | 动画持续时间 |
| delay | String | 0ms | 允许实现延迟加载 |
| at | Number, Array[Number] | -1 | 只在at指定的$clicks时加显示本组件。-1意味着与$clicks无关 |

#### Style
无特殊样式。调用者传入的样式会绑定到组件上。

#### 用法示例

```
<Anime class="abs w-full h-full left-20%">Bounce me</Anime>
```
###  Markmap
以交互方式显示演示文稿的议程和目录。
![alt text](public/markmap.png)
####  props
| 名称 | 类型 | 默认 | 描述 |
| ---------------- | ------- | ---- | ---------------------------------- |
| colorFreezeLevel | number | 3 | 在哪个级别之后，标记图将冻结颜色图 |
| duration | 数字 | 200 | 展开/折叠节点时的动画持续时间 |
| maxWidth | number | 0 | 标记图的最大宽度 |
| ExpandLevel | number | -1 | 启动时级别会扩展。 -1 表示展开全部 |
| Zoom | boolean | true | 允许缩放 |
| pan | boolean | true | 显示控制面板 |
#### Styling
使用通用 unocss 指令来控制组件的位置和大小。
####  用法示例
```html
<Markmap class="abs top-400px left-50px w-full">
` ``
## level1
### level2
## level1
` ``
</Markmap>
```


确保将您的内容封装到一对“\`\`\`”（三个backtits）指令中。

### Timeline

Timeline是故事叙述的好帮手。

![](https://images.jieyu.ai/images/2024/07/timeline.gif)

您通过yaml语法来定义时间轴。其语法是：

```yaml

- event: 1606年
img: https://*.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
title: 第一张股票
text: 1606年，荷兰东印度公司发行了人类第一张股票
```
每一项都有event,img, title,subtitle,text来组成。subtitle和text可以省略。
img字段允许添加参数以指定大小、是否圆角和添加阴影。
使用方法：
```md
<Timeline class="abs h-full w-full">

your yaml content here
</Timeline>
```

### SoarText

如果你只有很少几张图，要通过slidev录制一个好的视频，SoarText将是好帮手。它通过把字幕动画化，弥补了视觉元素的不足。

使用方法：

```md
<SoarText class="abs top-150px w-80% h-80% left-50px" :offsetY=200 colorMix="None">

your subtitles here
</SoarText>
```

SoarText的内容通过markdown来指定：

```md

Nature’s first green is gold<bg>https://images.unsplash.com/photo-1555465910-31f7f20a184d?q=80&w=600

Her hardest hue to hold

Her early leaf’s a flower<bg>https://images.unsplash.com/photo-1478217655296-6ca53ca4b677?w=800

But only so an hour

Then leaf subsides to leaf

So Eden sank to grief

So dawn goes down to day

Nothing gold can stay
```

每一行将在屏幕上作为一个独立的显示部分，当文本较多时，自动缩小字体，反之，自动放大字体。它由文本及背景指标组成。背景可以指定为一张图片。它与显示文本间通过<bg>来分隔。

###  Card

Expand Down Expand Up @@ -245,136 +370,7 @@ Card变体的另一个例子。背景和正文被S型曲线分开。
</Scard>
```

### Anime

Animate.css提供了几十种简单但常用的动画。但直接使用它并不方便，比如需要额外引入css文件，样式声明较长、不易记；如果是退出效果，动画在退出动作执行完之后，仍然会回到原始状态等等。

我们提供Anime这个组件，以便可以更容易地使用Animate.css。

#### props

| name | type | default | description |
| ------ | --------------------- | ------- | -------------------------------------------------------- |
| action | String | '' | 必须提供，动画名称 |
| dur | String | 1s | 动画持续时间 |
| delay | String | 0ms | 允许实现延迟加载 |
| at | Number, Array[Number] | -1 | 只在at指定的$clicks时加显示本组件。-1意味着与$clicks无关 |

#### Style
无特殊样式。调用者传入的样式会绑定到组件上。

#### 用法示例

```
<Anime class="abs w-full h-full left-20%">Bounce me</Anime>
```


###  Markmap


以交互方式显示演示文稿的议程和目录。

![alt text](public/markmap.png)

####  props


| 名称 | 类型 | 默认 | 描述 |
| ---------------- | ------- | ---- | ---------------------------------- |
| colorFreezeLevel | number | 3 | 在哪个级别之后，标记图将冻结颜色图 |
| duration | 数字 | 200 | 展开/折叠节点时的动画持续时间 |
| maxWidth | number | 0 | 标记图的最大宽度 |
| ExpandLevel | number | -1 | 启动时级别会扩展。 -1 表示展开全部 |
| Zoom | boolean | true | 允许缩放 |
| pan | boolean | true | 显示控制面板 |


#### Styling


使用通用 unocss 指令来控制组件的位置和大小。

####  用法示例

```html
<Markmap class="abs top-400px left-50px w-full">

` ``
## level1
### level2
## level1
` ``
</Markmap>
```


确保将您的内容封装到一对“\`\`\`”（三个backtits）指令中。

### Timeline

Timeline是故事叙述的好帮手。

![](https://images.jieyu.ai/images/2024/07/timeline.gif)

您通过yaml语法来定义时间轴。其语法是：

```yaml

- event: 1606年
img: https://*.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
title: 第一张股票
text: 1606年，荷兰东印度公司发行了人类第一张股票
```
每一项都有event,img, title,subtitle,text来组成。subtitle和text可以省略。
img字段允许添加参数以指定大小、是否圆角和添加阴影。
使用方法：
```md
<Timeline class="abs h-full w-full">

your yaml content here
</Timeline>
```

### SoarText

如果你只有很少几张图，要通过slidev录制一个好的视频，SoarText将是好帮手。它通过把字幕动画化，弥补了视觉元素的不足。

使用方法：

```md
<SoarText class="abs top-150px w-80% h-80% left-50px" :offsetY=200 colorMix="None">

your subtitles here
</SoarText>
```

SoarText的内容通过markdown来指定：

```md

Nature’s first green is gold<bg>https://images.unsplash.com/photo-1555465910-31f7f20a184d?q=80&w=600

Her hardest hue to hold

Her early leaf’s a flower<bg>https://images.unsplash.com/photo-1478217655296-6ca53ca4b677?w=800

But only so an hour

Then leaf subsides to leaf

So Eden sank to grief

So dawn goes down to day

Nothing gold can stay
```

每一行将在屏幕上作为一个独立的显示部分，当文本较多时，自动缩小字体，反之，自动放大字体。它由文本及背景指标组成。背景可以指定为一张图片。它与显示文本间通过<bg>来分隔。



Expand Down Expand Up @@ -441,10 +437,10 @@ name|type|default|description at|number|-1|控制何时显示视频。 -1 表示
<Video src="https://cdn.pixabay.com/video/2016/09/21/5373-183629075_medium.mp4" class="abs top-100px left-100px w-400px h-400px" />
```

 🔌 插件
------
## 🔌 插件

###  警告

###  Admonition

![alt text](public/admonition.png)

Expand Down Expand Up @@ -478,8 +474,7 @@ Admonition 是另一种卡片，但它是由 markdown-it 插件而不是组件

**仅 Github 短代码有效**

 参与开发
---
## 参与开发

* `npm install`
*
Expand All @@ -490,3 +485,25 @@ Admonition 是另一种卡片，但它是由 markdown-it 插件而不是组件
`npm run export` 生成预览 PDF
*
`npm run screenshot` 生成预览 PNG

## History

### 0.2
- Release at July 4, 2024
- Features:
- SoarText
- Timeline
- Anime
- Fixed:
- Markmap在初次显示时，可能无法加载，需要刷新一次才能显示。
### 0.1
- Released at June, 2024
- Features:
- Device Mockup
- Markmap
- Card (naive and s-curve split card)
- Profile
- Audio
- Video
- Markdown admonition
- Emoji Icon
Loading

0 comments on commit 5f39f69

Please sign in to comment.