{"id":16346648,"url":"https://github.com/zillionare/slidev-theme-rich","last_synced_at":"2025-10-26T02:30:19.563Z","repository":{"id":246689264,"uuid":"821815659","full_name":"zillionare/slidev-theme-rich","owner":"zillionare","description":"A Slidev theme that offers rich UI components and stunning visual effects.","archived":false,"fork":false,"pushed_at":"2024-07-06T09:46:53.000Z","size":2313,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-28T02:44:30.359Z","etag":null,"topics":["awesome","powerpoint","slidev","slidev-them-rich","slidev-theme","template","visual-effects"],"latest_commit_sha":null,"homepage":"https://zillionare.github.io/slidev-theme-rich/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zillionare.png","metadata":{"files":{"readme":"README-cn.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-29T14:11:10.000Z","updated_at":"2024-12-20T16:03:24.000Z","dependencies_parsed_at":"2024-06-29T17:54:58.331Z","dependency_job_id":"26434225-3de7-4cfe-be62-922a58205645","html_url":"https://github.com/zillionare/slidev-theme-rich","commit_stats":null,"previous_names":["zillionare/slidev-theme-rich"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zillionare%2Fslidev-theme-rich","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zillionare%2Fslidev-theme-rich/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zillionare%2Fslidev-theme-rich/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zillionare%2Fslidev-theme-rich/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zillionare","download_url":"https://codeload.github.com/zillionare/slidev-theme-rich/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238241438,"owners_count":19439767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","powerpoint","slidev","slidev-them-rich","slidev-theme","template","visual-effects"],"created_at":"2024-10-11T00:35:53.059Z","updated_at":"2025-10-26T02:30:18.692Z","avatar_url":"https://github.com/zillionare.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slidev-theme-rich\n\n[English](README.md) \n▶️▶️[Live demo](https://zillionare.github.io/slidev-theme-rich/)\n[Github](https://github.com/zillionare/slidev-theme-rich)\n\n[![NPM version](https://img.shields.io/npm/v/slidev-theme-rich?color=3AB9D4\u0026label=)](https://www.npmjs.com/package/slidev-theme-rich)\n\n  \nRich是一个Slidev主题，它提供丰富的UI组件和令人惊叹的视觉效果。\n\n\n![](https://images.jieyu.ai/images/2024/07/cover.gif)\n![alt text](https://images.jieyu.ai/images/2024/07/mockup-device.gif)\n![](https://images.jieyu.ai/images/2024/07/markmap.gif)\n![](https://images.jieyu.ai/images/2024/07/soartext.gif)\n![](https://images.jieyu.ai/images/2024/07/timeline.gif)\n\n关于Slidev，请参考[Slidev](https://github.com/slidevjs/slidev).\n\n[在线演示](https://zillionare.github.io/slidev-theme-rich/)\n\n## 🛠 安装\n\n将以下 frontmatter 添加到您的 `slides.md` 中。启动Slidev然后它会提示你自动安装本主题。\n\n```yaml\n    theme: rich\n```\n\n对于主题提供的内容，您可以参考 [Demo](https://zillionare.github.io/slidev-theme-rich)以了解有关如何使用主题的更多信息。\n\n## 💼布局\n\n该主题提供以下布局：\n\n###  cover\n\n![alt text](public/cover.png)\n\n  \n对于其他布局，只需使用内置的 Slidev 即可。\n\n## 🧩 components\n\n**提示：几乎每个组件都支持 v-motion，因此您不必另外声明。**\n\n  \n该主题提供以下组件：\n\n###  Device Mockup\n\n![alt text](https://images.jieyu.ai/images/2024/07/mockup-device.gif)\n\n  \n由 Devices.css 提供支持，支持 10 多种设备，包括 iPhone、Macbook、iMac、Galaxy、Google Pixels、Apple-Watch 等。\n\n####  props\n\n  \n这些组件接受以下属性：\n\n| name  | type   | default | description                                         |\n| ----- | ------ | ------- | --------------------------------------------------- |\n| kind  | String | None    | The name of the device, for example, iphone-14-pro. |\n| scale | Number | 1       | to scale the mockup                                 |\n\n\n  \n更多设备名请参考devices.css的文档\n\n####  Styling\n\n  \n您可以向组件添加 unocss 指令，即类似 `class=\"absolute left-50px\"` 的指令来调整位置和大小。\n\n```html\n    \u003cDevice kind=\"apple-watch-s8\"\n            class=\"abs left-50px w-100px\"\n            style=\"transform: rotateZ(45deg)\"\n            scale=0.6\n            autoplay\n            loop=\"forever\"\u003e\n    \u003cVideo src=\"*.mp4\"/\u003e\n    \u003c/Device\u003e\n```\n\n  \n未使用的属性将传递给子元素，在本例中，它是视频，主题提供的另一个组件。\n\n  \n您还可以添加特定的样式，就像第 3 行那样。\n\n**请注意，这里我们使用了 `abs` 而不是 `absolute` 。这是一个与后者完全相同的类，但书写起来更简洁**\n\n####  用法示例\n\n```html\n    \u003cDevice class=\"abs top-410px left-350px\" \n            kind=\"macbook-pro\"\n            scale=0.8\u003e\n    \u003cVideo src=\"https://cdn.pixabay.com/video/2016/09/21/5373-183629075_medium.mp4\"/\u003e\n    \u003c/Device\u003e\n    \n    \u003cDevice class=\"abs top-150px left-400px\" \n            kind=\"apple-watch-s8\"\n            autoplay\n            scale=0.6\u003e\n    \u003cVideo src=\"https://cdn.pixabay.com/video/2023/07/08/170617-843561820_large.mp4\"/\u003e\n    \u003c/Device\u003e\n```\n\n在示例中，我们只是将视频放入设备的屏幕中。但实际上，任何有效的 html/markdown 内容都可以。\n\n### Anime\n\nAnimate.css提供了几十种简单但常用的动画。但直接使用它并不方便，比如需要额外引入css文件，样式声明较长、不易记；如果是退出效果，动画在退出动作执行完之后，仍然会回到原始状态等等。\n\n我们提供Anime这个组件，以便可以更容易地使用Animate.css。\n\n#### props\n\n| name   | type                  | default | description                                              |\n| ------ | --------------------- | ------- | -------------------------------------------------------- |\n| action | String                | ''      | 必须提供，动画名称                                       |\n| dur    | String                | 1s      | 动画持续时间                                             |\n| delay  | String                | 0ms     | 允许实现延迟加载                                         |\n| at     | Number, Array[Number] | -1      | 只在at指定的$clicks时加显示本组件。-1意味着与$clicks无关 |\n\n#### Style\n无特殊样式。调用者传入的样式会绑定到组件上。\n\n#### 用法示例\n\n```\n\u003cAnime class=\"abs w-full h-full left-20%\"\u003eBounce me\u003c/Anime\u003e\n```\n\n\n###  Markmap\n\n  \n以交互方式显示演示文稿的议程和目录。\n\n![alt text](public/markmap.png)\n\n####  props\n\n  \n| 名称             | 类型    | 默认 | 描述                               |\n| ---------------- | ------- | ---- | ---------------------------------- |\n| colorFreezeLevel | number  | 3    | 在哪个级别之后，标记图将冻结颜色图 |\n| duration         | 数字    | 200  | 展开/折叠节点时的动画持续时间      |\n| maxWidth         | number  | 0    | 标记图的最大宽度                   |\n| ExpandLevel      | number  | -1   | 启动时级别会扩展。 -1 表示展开全部 |\n| Zoom             | boolean | true | 允许缩放                           |\n| pan              | boolean | true | 显示控制面板                       |\n\n\n#### Styling\n\n  \n使用通用 unocss 指令来控制组件的位置和大小。\n\n####  用法示例\n\n```html\n    \u003cMarkmap class=\"abs top-400px left-50px w-full\"\u003e\n    \n    ` ``\n    ## level1\n    ### level2\n    ## level1\n    ` ``\n    \u003c/Markmap\u003e\n```\n\n  \n确保将您的内容封装到一对“\\`\\`\\`”（三个backtits）指令中。\n\n### Timeline\n\nTimeline是故事叙述的好帮手。\n\n![](https://images.jieyu.ai/images/2024/07/timeline.gif)\n\n您通过yaml语法来定义时间轴。其语法是：\n\n```yaml\n\n- event: 1606年\n  img: https://*.jpg w=150 roundCorner=\"50%\" shadow=\"0 2px 5px rgba(0, 0, 0, 0.5)\"\n  title: 第一张股票\n  text: 1606年，荷兰东印度公司发行了人类第一张股票\n```\n\n每一项都有event,img, title,subtitle,text来组成。subtitle和text可以省略。\n\nimg字段允许添加参数以指定大小、是否圆角和添加阴影。\n\n使用方法：\n\n```md\n\u003cTimeline class=\"abs h-full w-full\"\u003e\n\nyour yaml content here\n\u003c/Timeline\u003e\n```\n\n### SoarText\n\n如果你只有很少几张图，要通过slidev录制一个好的视频，SoarText将是好帮手。它通过把字幕动画化，弥补了视觉元素的不足。\n\n使用方法：\n\n```md\n\u003cSoarText class=\"abs top-150px w-80% h-80%  left-50px\" :offsetY=200 colorMix=\"None\"\u003e\n\nyour subtitles here\n\u003c/SoarText\u003e\n```\n\nSoarText的内容通过markdown来指定：\n\n```md\n\nNature’s first green is gold\u003cbg\u003ehttps://images.unsplash.com/photo-1555465910-31f7f20a184d?q=80\u0026w=600\n\nHer hardest hue to hold\n\nHer early leaf’s a flower\u003cbg\u003ehttps://images.unsplash.com/photo-1478217655296-6ca53ca4b677?w=800\n\nBut only so an hour\n\nThen leaf subsides to leaf\n\nSo Eden sank to grief\n\nSo dawn goes down to day\n\nNothing gold can stay\n```\n\n每一行将在屏幕上作为一个独立的显示部分，当文本较多时，自动缩小字体，反之，自动放大字体。它由文本及背景指标组成。背景可以指定为一张图片。它与显示文本间通过\u003cbg\u003e来分隔。\n\n###  Card\n\n  \n一个好的 PowerPoint 演示文稿应尽量使用最少的文本。如果需要文本，则应对其进行有效组织。这就是为什么我们需要 Card 组件。\n\n  \n最初的版本提供了三种卡，naive卡、profile卡和Scard卡。\n\n![alt text](public/naive-card.png)\n\n  \n正如屏幕截图所示，一张简单的卡片就像一个 CSS 框一样简单。\n\n####  props\n\n| name          | type    | default          | description                                            |\n| ------------- | ------- | ---------------- | ------------------------------------------------------ |\n| title         | string  | None             | if provided, the card will contains a title            |\n| titleAlign    | string  | left             | controls how the title aligned horizontally.           |\n| contentAlign  | string  | justify          | controls how the main content aligns.                  |\n| gradientTitle | boolean | false            | if true, a gradient background is drawed at title area |\n| color         | string  | rgb(223,248,251) | the title's background color                           |\n| titleFont     | string  | 20px             | font size of the title                                 |\n\n#### Styling\n\n  \n使用通用 unocss 指令来控制组件的位置和大小。\n\n####  用法示例\n\n```html\n    \u003cCard title=\"Card with header\"\n          :enter=\"{opacity: 1}\"\n          :click-1=\"{opacity: 0}\"\u003e\n    \n    this is naive card with a Title. \n    v-motion is supported out-of-box.\n    \u003c/Card\u003e\n    \n    \u003cCard :enter=\"{opacity: 1}\"\n          :click-1=\"{opacity: 0}\"\n          class=\"abs top-250px left-450px w-300px h-450px\"\u003e\n    \n    \u003cimg src=\"https://images.jieyu.ai/images/hot/blue-purple-gradient.jpg\"\u003e\n    \n    this is Card without a Title\n    \u003c/Card\u003e\n```\n\n###  Profile\n\n![alt text](public/profile.png)\n\n  \n使用此组件来显示人员的个人资料。它需要一个头像img src，如果没有提供，只需使用数字，然后它可以用作带有步骤的列表。\n\n####  props\n\n  \n| name      | type   | default | description                      |\n| --------- | ------ | ------- | -------------------------------- |\n| headerImg | string | None    | 必填，标题背景图片的src          |\n| avatar    | string | None    | 头像图片的src                    |\n| w         | string | 300px   | 盒子的宽度                       |\n| h         | string | 450px   | 高度框                           |\n| fontSize  | string | 14px    | 字体大小                         |\n| seq       | string | 1       | 序列号。如果头像存在则将被忽略。 |\n\n\n#### Styling\n\n  \n使用通用 unocss 指令来控制组件的位置和大小。\n\n####  用法示例\n\n```html\n    \u003cProfile class=\"top-250px\"\n    headerImg=\"https://images.unsplash.com/photo-1517825729380-9df085a3fbc3?w=700\u0026auto=format\u0026fit=crop\u0026q=60\u0026ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bW9ybmluZyUyMGNvZmZlZXxlbnwwfDB8MHx8fDA%3D\" \u003e\n    \n    ### Aaron\n    \n    Course Instructor\n    \u003c/Profile\u003e\n```\n\n###  Scard\n\n![alt text](public/scard.png?1)\n\n  \nCard变体的另一个例子。背景和正文被S型曲线分开。\n\n####  props\n\n  \n| 名称          | 类型   | 默认  | 描述                                                       |\n| ------------- | ------ | ----- | ---------------------------------------------------------- |\n| w             | 字符串 | 300px | 卡片的宽度                                                 |\n| h             | 字符串 | 450px | 卡片的高度                                                 |\n| round         | 字符串 | 10px  | 卡片的半径                                                 |\n| contentHeight | 字符串 | 100%  | 卡片的高度内容区域背景                                     |\n| background    | 字符串 | \"\"    | 背景。如果未提供，则将按主题的primary/third 颜色来进行计算 |\n\n\n#### Styling\n\n  \n除了 props 中列出的之外，其他部分可以通过通用 unocss 指令指定。\n\n####  用法示例\n\n```html\n    \u003cScard background=\"url('https://.../*.jpg') no-repeat center center / cover\" \n        h=\"450px\" w=\"300px\"\n        class=\"top-250px left-50px\"\u003e\n       the content of the box\n    \u003c/Scard\u003e\n    \n    \u003cScard background=\"url('https://.../*.jpg') no-repeat center center / cover\" \n        h=\"450px\" \n        w=\"300px\"\n        contentHeight=\"400px\"\n        class=\"left-400px top-250px\"\u003e\n       the content of the box\n    \u003c/Scard\u003e\n```\n\n### Floating Card\n\n![](https://images.jieyu.ai/images/2024/07/float3dcard.png)\n\n由一个序号、标题和描述文字组成。适合用于展示一个列表。\n\n#### 用法示例\n\n```\n\u003cFloatingCard :at=[0,1,2,3]\n    class=\"abs w-300px h-500px top-200px left-100px\"\u003e\n\n```yaml\n\ncolor: \"#F5C345\"\ncapping: header\nseq: \"01\"\ntitle: LOREM IPSUM\ndesc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n```\n\n\n\n###  Audio\n\n提供带有音量控制、基本淡入、淡出、延迟控制和预定义音频流集合的音频播放。\n\n  \n以下屏幕截图显示了内置音频列表：\n\n![alt text](public/audio.png)\n\n####  props\n\n \n| name    | type   | default | description                                                                                           |\n| ------- | ------ | ------- | ----------------------------------------------------------------------------------------------------- |\n| at      | number | -1      | controls when the audio is played. It can be overridden by add `controls` attribute on the component. |\n| name    | string | None    | required. The name of predefined audio, or the src url of the audio.                                  |\n| fadeOut | number | 0       | fadeOut time in milliseconds                                                                          |\n| fadeIn  | number | 0       | fadeIn time in milliseconds                                                                           |\n| volume  | number | 1       | the volume of the audio                                                                               |\n| delay   | number | 0       | delay time in milliseconds                                                                            |\n\n\n#### Styling\n\n  \n不需要任何样式设计。默认情况下，当 `$slidev.nav.clicks` 等于 `:at` 时，Audio 组件将在后台自动播放，因此没有附加 UI。您可以将 `controls` 添加到其中，如下所示：\n\n```vue\n    \u003cAudio name=\"wechat-huwo\" controls /\u003e\n```\n\n  \n这将显示一个播放控制器。\n\n####  用法示例\n\n```html\n    \u003cAudio name=\"wechat-dingdong\" controls /\u003e\n    \u003cAudio name=\"giggling1\" :at=0 :delay=3000 :fadeOut=1000/\u003e\n    \u003cAudio name=\"https://.../*.wav\"/\u003e\n```\n\n###  Video\n\n  \nhtml 视频标签的简单包装。\n\n####  props\n\n  \nname|type|default|description at|number|-1|控制何时显示视频。 -1 表示始终显示，只要页面存在，就始终显示。否则，仅当 `$slidev.nav.clicks` 等于 `at` 时才显示视频。 muted|boolean|false|控制视频是否静音 src|string|None|视频的 src\n\n#### Styling\n\n  \n使用通用 unocss 指令来控制视频的位置和大小。\n\n####  用法示例\n\n```html\n    \u003cVideo src=\"https://cdn.pixabay.com/video/2016/09/21/5373-183629075_medium.mp4\" class=\"abs top-100px left-100px w-400px h-400px\" /\u003e\n```\n\n## 🔌 插件\n\n\n###  Admonition\n\n![alt text](public/admonition.png)\n\n  \nAdmonition 是另一种卡片，但它是由 markdown-it 插件而不是组件渲染的。\n\n 用法示例：\n\n```markdown\n    !!! tip\n        this is a tip admonition!\n    \n    !!! quote\n        this is a quote/cite\n```\n\n###  emoji图标\n\n  \n对于一小部分表情符号图标，您可以在 Markdown 内容中使用以下语法：\n\n```md\n    - :smile: using icons is very simple, just write `:smile:`\n    - :heart: visit https://emojipedia.org/ for more emoji icons\n```\n\n  \n正如示例所示，如果您不知道如何引用图标，请查看 https://emojipedia.org，如下截图所示：\n\n![alt text](public/emoji.png)\n\n**仅 Github 短代码有效**\n\n## 参与开发\n\n*   `npm install`\n*     \n    `npm run dev` 开始 `example.md` 的主题预览\n*     \n    编辑 `example.md` 和样式以查看更改\n*     \n    `npm run export` 生成预览 PDF\n*     \n    `npm run screenshot` 生成预览 PNG\n\n## History\n\n### 0.3\n- Released at July 5, 2024\n- Features:\n  - Floating Card\n- Fixed:\n  - markmap doesn't work when theme is installed from npmjs\n\n### 0.2 \n- Release at July 4, 2024\n- Features:\n  - SoarText\n  - Timeline\n  - Anime\n- Fixed:\n  - Markmap在初次显示时，可能无法加载，需要刷新一次才能显示。\n### 0.1\n- Released at June, 2024\n- Features:\n  - Device Mockup\n  - Markmap\n  - Card (naive and s-curve split card)\n  - Profile\n  - Audio\n  - Video\n  - Markdown admonition\n  - Emoji Icon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzillionare%2Fslidev-theme-rich","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzillionare%2Fslidev-theme-rich","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzillionare%2Fslidev-theme-rich/lists"}