建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

Slidev 具有灵活性和交互性的HTML文稿演示框架

来源:易助科技网浏览量:15收藏

简介


Slidev旨在为开发人员提供灵活性和交互性,通过使用他们已经熟悉的工具和技术,使他们的演示更加有趣、富有表现力和吸引力。使用所见即所得编辑器时,很容易被样式选项分散注意力。Slidev通过分离内容和视觉效果来弥补这一点。这允许您一次只关注一件事,同时还可以重用社区中的主题。Slidev并不寻求完全取代其他滑梯平台建设者。相反,它专注于迎合开发者群体。


更多 HTML 演示插件:👉  [ 详情 ]


具有灵活性和交互性的HTML文稿演示框架Slidev


特定:


支持 Markdown 语法:Slidev 使用一种扩展的 Markdown 格式,在一个纯文本文件中存储和组织你的幻灯片。这让你专注于制作内容。而且由于内容和样式是分开的,这也使得在不同的主题之间切换变得更加容易。

可定制主题:Slidev 的主题可以通过 npm 包的形式来分享和安装。你只需要使用一行配置就可以应用它们。点击查看 主题库 或者 学习如何制作一个主题

对开发者友好:Slidev 为开发者提供了一流的代码片段支持。它同时支持 PrismShiki 以获得像素级的完美语法高亮,并且能够随时修改代码。通过内置的 Monaco 编辑器,它还能让你在演示文稿中进行现场编码/演示,并支持自动补全、类型悬停、甚至是 TypeScript 类型检查。欲了解更多,请参阅 语法高亮Monaco 配置

快速:Slidev 得益于 ViteVue 3Windi CSS,为你带来了最美妙的创作体验。你所做的每一个改变都会立即反映到你的幻灯片上。查找更多关于 技术栈。

互动性 & 直观表达:你可以编写自定义的 Vue 组件并直接在你的 MarkDown 文件中使用它们。你也可以在演示文稿中与它们互动,以更深入和直观的方式表达你的想法。

支持录制:Slidev 提供了内置的录音和摄像头视图。你可以将你的演示文稿与你的相机视图一起分享,或者为你的屏幕和相机分别录制并保存。所有这些都是内置的,不需要额外的工具。欲了解更多,请参阅 录制

可移植性:用一个命令就可以将你的幻灯片导出为 PDF 或 PNG,甚至是可托管的单页应用程序(SPA),并在任何地方分享它们。欲了解更多,请参阅 导出文档

可配置:由于 Slidev 基于 Web 技术,任何可以在 Web 应用中完成的事情,Slidev 也可以做到。例如,WebGL、API请求、iframes,甚至是实时共享。完全取决于你的想象力!


功能:


  • 📝 Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件
  • 🧑‍💻 开发者友好 —— 内置代码高亮、实时编码等功能
  • 🎨 可定制主题 —— 以 npm 包的形式共享、使用主题
  • 🌈 灵活样式 —— 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表
  • 🤹 可交互 —— 无缝嵌入 Vue 组件
  • 🎙 演讲者模式 —— 可以使用另一个窗口,甚至是你的手机来控制幻灯片
  • 🎨 绘图 - 在你的幻灯片上进行绘图和批注
  • 🧮 LaTeX 支持 —— 内置了对 LaTeX 数学公示的支持
  • 📰 图表支持 —— 使用文本描述语言创建图表
  • 🌟 图标 —— 能够直接从任意图标库中获取图标
  • 💻 编辑器 —— 集成的编辑器,或者使用 VS Code 扩展
  • 🎥 演讲录制 —— 内置录制功能和摄像头视图
  • 📤 跨平台 —— 能够导出 PDF、PNG 文件,甚至是一个可以托管的单页应用
  • ⚡️ 快速 —— 基于 Vite 的即时重载
  • 🛠 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包



使用


1. 安装


$ npm init slidev

$ yarn create slidev


2.  使用


在安装了 Slidev 的项目里,你可以在你的 npm scripts 里使用 slidev 命令。


{
  "scripts": {
    "dev": "slidev", //  启动 dev server
    "build": "slidev build", // 构建生产环境的单页面应用
    "export": "slidev export" // 将幻灯片导出为 pdf 格式
  }
}


3.  用法示例


如需为元素添加 “点击动画”,你可以使用 v-click 指令或 <v-click> 组件。


# Hello

<!-- 组件用法:在你按下 “下一步” 之前,这是不可见的 -->
<v-click>

Hello World

</v-click>

<!-- 指令用法:在你第二次按下 “下一步” 之前,这是不可见的 -->
<div v-click class="text-xl p-2">

Hey!

</div>


v-after 和 v-click 用法类似,但是 v-after 会在上一个 v-click 触发后使元素可见。


<div v-click>Hello</div>
<div v-after>World</div>


当你点击了“下一步”按钮之后,Hello 和 World 会同时出现。


v-clicks 仅作为组件提供。它可以快速将其子元素全部添加 v-click 指令。它在列表中尤为实用。


<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>


每次你点击“下一步”按钮时,元素会逐条依次出现。



相关链接


官方文档 :  https://cn.sli.dev/

GitHub 地址 :  https://github.com/slidevjs/slidev

效果演示 : https://stackblitz.com/edit/slidev-z19spc?file=slides.md