前端开发工具【免费下载链接】slidevPresentation Slides for Developers项目地址https://gitcode.com/GitHub_Trending/sl/slidev点击查看免费下载Showcases 是 Slidev 官方文档站docs 目录基于 VitePress 构建中的演讲案例资源页集中收录了世界各地开发者使用 Slidev 制作的会议演讲、技术分享与教学课件。本文以 docs/resources/showcases.md 为主线结合 docs/.vitepress/showcases.ts 数据源与两个渲染组件源码完整讲解该页面一行 Markdown 一个组件标签的极简骨架、ShowCaseInfo数据模型、案例卡片的渲染逻辑并给出向该列表提交你自己演讲的实操步骤。Showcases 页面是什么从文档定义看Showcases 页面的定位只有一句话Talks / Presentations using Slidev即使用 Slidev 制作的演讲 / 演示。它和 Theme Gallery、Addon Gallery、Learning Resources 等页面一起被编排在文档站的 Resources资源导航分组中见 docs/.vitepress/pages.tsexport const Resources [ { text: Showcases, link: /resources/showcases, }, // Theme Gallery / Addon Gallery / Learning Resources / Curated Covers ... ]整个页面的正文 Markdown 极其精简全文只有 10 行--- aside: false --- # Showcases Talks / Presentations using Slidev. !-- Edit in ./docs/.vitepress/showcases.ts -- ShowCases /其中值得注意的三点aside: false关闭该页面的侧边栏让案例卡片网格获得完整的阅读宽度注释!-- Edit in ./docs/.vitepress/showcases.ts --官方明确告知维护这份案例列表的入口是数据文件而非 Markdown 本身ShowCases /真正的页面内容全部由这个自定义组件渲染Markdown 只负责挂载。这正是典型的数据驱动文档站写法内容与展示分离增删案例只需编辑数据文件无需改动页面布局。数据驱动骨架从 Markdown 到组件ShowCases.vue响应式卡片网格ShowCases.vue 是页面入口组件逻辑非常短script setup langts import { showcases } from ../../showcases /script template div classgrid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 ShowCaseInfo v-for(info, idx) of showcases :keyidx :infoinfo / /div /template它从../../showcases即 docs/.vitepress/showcases.ts导入全部案例数据用 UnoCSS 的响应式栅格类grid-cols-1 sm:grid-cols-2 md:grid-cols-3在手机、平板、桌面分别以 1/2/3 列展示并为每个案例渲染一个ShowCaseInfo卡片。文档站使用 UnoCSS 扫描生成样式相关配置见 docs/uno.config.ts。数据文件的类型定义showcases.ts 首先导出一个 TypeScript 接口它定义了整个案例库的数据契约export interface ShowCaseInfo { title: string cover: string slidesLink?: string sourceLink?: string videoLink?: string at?: string datetime: string author: { name: string link?: string } }随后导出一个由该类型组成的数组showcases并在文件末尾按日期倒序排序].sort((a, b) new Date(b.datetime).getTime() - new Date(a.datetime).getTime())也就是说列表顺序完全由datetime字段驱动最新的演讲永远排在前面人工无需维护顺序。ShowCaseInfo 数据模型字段详解每个案例对象包含以下字段全部为可选与必选混合的结构含义如下字段类型必填含义titlestring是演讲标题coverstring是卡片封面图 URL 或站点内资源路径slidesLinkstring?否可在线浏览的幻灯片地址sourceLinkstring?否幻灯片源码仓库地址videoLinkstring?否演讲录像地址atstring?否演讲场合会议名 / 活动名 / 分享主题datetimestring是演讲日期YYYY-MM-DD用于排序author.namestring是作者姓名author.linkstring?否作者主页地址对于仓库内自带的封面资源cover使用 VitePress 的import.meta.env.BASE_URL拼接站点根路径例如典型案例 Composable Vue 的写法cover: ${import.meta.env.BASE_URL}showcases/composable-vue.png,这行路径最终对应仓库中的 docs/public/showcases/composable-vue.pngdocs/public目录在构建时会被复制到站点根目录。而提交外部案例时cover则直接填远程图片 URL。案例卡片如何渲染ShowCaseInfo.vueShowCaseInfo.vue 接收单个info对象渲染一张标准卡片布局自上而下依次为封面区aspect-16/9的 16:9 宽高比容器封面图整体作为链接指向info.slidesLink点击封面即可直接打开在线幻灯片标题font-bold line-clamp-2最多两行截断场合info.at如 VueDay 2021、JSConf Korea小号半透明文字作者行若author.link存在则渲染为链接否则纯文本操作图标按字段是否存在依次渲染视频videoLink、幻灯片slidesLink、源码sourceLink三个图标链接hover 时高亮。从组件实现可以推断该页面的设计目标是为每个案例提供看封面 → 点进幻灯片 → 找源码 / 看录像的完整链路听众可以快速判断演讲是否值得观看开发者则能顺着sourceLink直接学习他人用 Slidev 组织内容、编写语法的具体方式。当前案例清单一览截至当前仓库版本showcases.ts 中共收录 25 条有效案例另有 2 条被注释掉的待定条目与 1 条占位条目按datetime倒序排列如下标题作者场合日期Reliability: Manual → AutopilotSeverin NeumannKarlsruhe Cloud Native – Summer Edition 20262026-07-28Reverse Engineering Denuvo in Hogwarts LegacyMaurice HeumannNavaja Negra 20252025-10-03Taming Dependency Chaos for LLM in K8sNekoKubeCon 2025 China2025-06-11A 14-year journey developing nCine, an open-source 2D game frameworkAngelo Theodorou/dev/games/20252025-06-05Python Zero To Hero - Episode 1Kareim TarekKareem Kreates YouTube Channel2025-01-12Hacker NumerologyHD MooreLASCON 20242024-10-25Sit Back and Relax with Fault Awareness and Robust Instant Recovery for Large Scale AI WorkloadsNekoKubeCon 2024 China2024-08-21How Rust error handling ease web developmentNguyễn Hồng QuânFOSSASIA Summit 20242024-04-10Comparison of Packaging Tools in 2023Peacock (Yoichi Takai)PyCon APAC 20232023-10-28Exploring Social Engineeringzyf722Computers in Society class2023-10-20Single Image Super-Resolution Based on Capsule Neural NetworksGeorge Corrêa de AraújoBRACIS 20232023-09-27Threat ModelingguissoOWASP Meetup2023-09-22Building a Polite Popup with Nuxt 3Michael HoffmannVue.js Nation 20232023-01-25Dev Environment as CodeAlexander EbleInternal Tech Talk2022-12-01Blazing slidev ppt template with naive-uigodkunpersonal sharing2022-10-24Is it Okay to Pursue Functional Programming on Frontend?Minsu Kim, Changhui LeeJSConf Korea 20222022-09-16Diablo Health Orb ShaderSuneBearrctAI Sessions2022-09-01OpenFunction 202Haili ZhangOpenFunction Tutorial Sharing2022-05-08Gits Most WantedAlexander EbleInternal Tech Talk2022-03-11Introduction to SVGEstee TeyThoughtworks Internal Lunch Learn2021-11-12Prisma as my ORM for PostgreSQLCedric NicolosoLyonJS Meetup2021-07-21BeAPTDaniel Sousa TutoDSCollege final project2021-07-20Vue 3 Vue 2 1Thorsten LünborgEnter.js Vue Day2021-06-15Developer SeonglaeSeonglae ChoSeongland2021-05-10Composable VueAnthony FuVueDay 20212021-04-29从中可以观察到一个事实这些案例覆盖了 Vue / JS 生态会议VueDay、JSConf Korea、Vue.js Nation、云原生会议KubeCon、安全会议OWASP、LASCON、Navaja Negra、编程语言社区PyCon APAC、FOSSASIA以及大量企业内部技术分享时间跨度从 2021 年延续至今。从源码结构看这份列表正是 Slidev开发者幻灯片定位最直接的现实佐证——不同领域、不同规模的技术分享都在用它制作课件。典型案例深读Composable Vue列表第一条也是时间上最早的一条Composable Vue 值得单独展开因为它的完整工程就内嵌在本仓库的 demo/composable-vue 目录中是研究 Slidev 真实用法的最佳样本。该演讲由 Slidev 作者 Anthony Fu 于 VueDay 2021 发表其 slides.md 开头的前置配置展示了 Slidev 封面页的典型写法--- layout: cover download: https://antfu.me/talks/2021-04-29 highlighter: shiki monaco: true info: | ## Composable Vue Patterns and tips for writing good composable logic in Vue [Anthony Fu](https://antfu.me/) at [VueDay 2021](https://2021.vueday.it/) - [Recording](https://www.youtube.com/watch?vIMJjP6edHd0) - [Transcript](https://antfu.me/posts/composable-vue-vueday-2021) - [Source code](https://github.com/antfu/talks/tree/master/2021-04-29) ---layout: cover使用内置封面布局见 packages/client/layouts/cover.vuemonaco: true开启 Monaco 编辑器让演讲中的代码示例可实时编辑运行info块在演示时展示演讲元信息同时可被导出为 PDF 的备注元数据。该 demo 的工程配置见 demo/composable-vue/package.json其脚本直接复用本地工作区中的slidev/cli{ scripts: { dev: nodemon -w ../../packages/slidev/dist/*.mjs --exec slidev --loginfo, build: slidev build, export: slidev export, export:clicks: slidev export --with-clicks } }这套demo 与文档同仓的组织方式让 Showcases 页面不只是外部链接的堆砌还承担了官方可运行示例的职责——读者 clone 仓库后进入demo/composable-vue即可本地启动查看。如何把自己的演讲加入 Showcasesshowcases.ts 的末尾明确给出了投稿入口先是注释// Add yours here!随后是一个占位条目// Add yours here! { title: Yours?, author: { name: , }, at: Submit your talk/presentation to be list here!, slidesLink: https://github.com/slidevjs/slidev/edit/main/docs/.vitepress/showcases.ts, cover: ${import.meta.env.BASE_URL}theme-placeholder.png, datetime: 2020-1-1, },这个占位条目刻意使用最早的日期2020-1-1因此永远被排序在列表末尾充当虚位以待的提示。结合文件头部的!-- Edit in ./docs/.vitepress/showcases.ts --注释加入自己演讲的标准流程为打开 docs/.vitepress/showcases.ts在// Add yours here!注释处新增一个对象仿照现有条目填写title、author.name、datetime并按需提供cover、slidesLink、sourceLink、videoLink、at、author.link将cover填为你的幻灯片封面远程 URL或把图片放入docs/public/showcases/后用import.meta.env.BASE_URL拼接提交改动。无需手动排序——文件末尾的sort会按datetime自动将新条目排到合适位置。参考模板字段结构以ShowCaseInfo接口为准{ title: Your Talk Title, cover: https://example.com/your-cover.png, slidesLink: https://example.com/your-slides, sourceLink: https://example.com/your-source, videoLink: https://example.com/your-recording, at: Your Conference Name, datetime: 2026-01-01, author: { name: Your Name, link: https://example.com/your-homepage, }, },Showcases 在文档体系中的位置Showcases 并非孤立页面它与 Slidev 的构建与托管文档存在双向引用docs/guide/hosting.md 在讲解导出为 SPA 后托管时把slidev build的产物与 Showcases 联系起来Here are a few examples of the exported SPA并直接引用 Composable Vue 作为示例、以More in [Showcases]引导读者进入本页。这说明 Showcases 同时承担了托管效果演示的角色——列表中大量案例正是部署在 Netlify、GitHub Pages 等平台上的 Slidev 单页应用在文档站导航中它与 Theme Gallery、Addon Gallery 同属 Resources 分组docs/.vitepress/pages.ts三者的数据驱动模式完全一致页面 Markdown 只放组件标签数据分别维护在 showcases.ts、themes.ts、addons.ts 中渲染组件位于 docs/.vitepress/theme/components 目录。小结Slidev 的 Showcases 页面是一个小而完整的数据驱动案例showcases.md用 10 行 Markdown 挂载组件showcases.ts用ShowCaseInfo接口定义数据契约并自动排序ShowCases.vue与ShowCaseInfo.vue负责把 25 条真实演讲渲染成带封面、标题、场合与视频/幻灯片/源码链接的卡片。对读者而言它是发现优秀 Slidev 作品、学习真实用法的入口对开发者而言它展示了内容与展示分离的文档维护模式并且任何人都可以按模板提交自己的演讲成为这个列表的下一个案例。赞分享前端开发工具【免费下载链接】slidevPresentation Slides for Developers项目地址https://gitcode.com/GitHub_Trending/sl/slidev点击查看免费下载相关推荐Slidev开发者专用的演示文稿工具指南Slidev开发者专用的演示文稿工具指南 一、项目目录结构及介绍 Slidev一个专为开发者设计的幻灯片制作工具其目录结构清晰地组织了各种功能组件和配置文前端开发工具Slidev为开发者定制的演示文稿工具Slidev为开发者定制的演示文稿工具 在寻找一种既直观又强大的方式来创建和展示你的想法时你可能已经遇到了许多选择。但是有一种工具将改变你对演示文稿的看法前端开发工具Slidev 快速上手面向开发者的 Markdown 演示文稿工作流与实战指南Slidev 快速上手面向开发者的 Markdown 演示文稿工作流与实战指南 Slidevslide dev读作 /slaɪdɪv/ 是一个基于前端开发工具上一篇FUXA告警脚本执行让工业自动化系统拥有智能决策能力下一篇Switch注入工具终极指南TegraRcmGUI完整使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考