theme | contents | |||||||
---|---|---|---|---|---|---|---|---|
./ |
|
中国传媒大学 视听技术与智能控制系统文化和旅游部重点实验室 非官方作品
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
Read more about Why Slidev?
Hover on the bottom-left corner to see the navigation's controls panel
space / tab / right | next animation or slide |
left / shiftspace | previous animation or slide |
up | previous slide |
down | next slide |
该Slidev主题拥有以下几个板式:
- 封面
- 目录页
- 分章节页
- 正文页
这个Slider的目录、章节title、以及正文页上方的title都依赖于扉页中的 contents
内容, 如有需要,请按照 yaml
语法填写这一内容。
使用 一级标题+正文 书写即可。
不需要填写内容,只需要指定 layout
为 contents
或 part
即可,对于分章节页,需要手动输入 id
,从1开始计数。
正常书写即可,如需显示顶部title,在本页slider前标注本页的ID,注意从1开始计数。
使用Slidev等前端技术做Slider的一个好处就是:可以突破传统PPT的版面限制,结合网页的形式进行展示交互。
如过长的图片、表格、文章等,在没有必要分页展示时,可以通过上下滚动来完整的展示。
滚动框效果如下,使用方法见README文档:
space / tab / right | next animation or slide |
left / shiftspace | previous animation or slide |
up | previous slide |
down | next slide |
在使用Markdown制作Slider时,常遇到图片排版不够美观的问题。在Slidev中插入图片可以使用Markdown语法或HTML语法:
![Title](URL)
<img src="URL">
使用HTML语法虽然可以结合WindiCSS
进行图片样式的调整,但实际上常在Slider中使用的图片布局无非就几种,因此增加了<mimage>
标签,可以用于方便地插入图片,并在三种排版板式中切换。
- 水平居中,上下环绕式
- 向右浮动式
- 右上角悬浮式
<mimage layout="c" url="https://cn.sli.dev/logo.svg" class="h-50" />
Slidev 旨在为开发者提供灵活性和交互性,通过使用他们已经熟悉的工具和技术,使他们的演示文稿更加有趣、更具表现力和吸引力。
<mimage layout="r" url="https://cn.sli.dev/logo.svg" class="h-50" />
Slidev 旨在为开发者提供灵活性和交互性,通过使用他们已经熟悉的工具和技术,使他们的演示文稿更加有趣、更具表现力和吸引力。
当使用所见即所得的编辑器时,人们很容易被样式选项所干扰。Slidev 通过分离内容和视觉效果来弥补这一点。这使你能够一次专注于一件事,同时也能够重复使用社区中的主题。Slidev 并不寻求完全取代其他幻灯片制作工具。相反,它专注于迎合开发者社区的需求。
Slidev 旨在为开发者提供灵活性和交互性
通过使用他们已经熟悉的工具和技术
使他们的演示文稿更加有趣、更具表现力和吸引力。
当使用所见即所得的编辑器时
人们很容易被样式选项所干扰. Slidev 通过分离内容和视觉效果来弥补这一点.
由于这个图片定位使用了Absolute,它会与文字部分重叠,建议只有在Slider左边只有短文字时使用
<mimage layout="rt" url="https://cn.sli.dev/logo.svg" class="h-50" />
该主题是基于实验室Powerpoint模板制作的Slidev模板,适用于组会、简单的学术汇报等场景。
目前已知该主题会出现一些问题:
- 在Mac与iPad上的元素定位可能会不大一致
- 导出为pdf时,每页下方会有一条白线
- 导出为pdf时,最后一页下方会有一块白色区域,可以在最后插入空白页并删除pdf中的空白页解决
在HTML标签中使用Markdown内容时,要注意HTML标签与Markdown内容之间要有空行,否则不能正常解析。
在该主题中使用了许多图片资源,当全局安装Slidev、本主题使用时,会导致图片资源不能被正常解析。可以考虑将 public
文件夹下的图片拷贝到 .md
的 public
目录,或将图片资源上传到自己的图床,并修改模板中的链接。
欢迎大家使用并提出建议!