企业官网建设流程全解析

• 前端
• 开发工具

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.ts：

export 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 lang="ts"> import { showcases } from '../../showcases' </script> <template> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> <ShowCaseInfo v-for="(info, idx) of showcases" :key="idx" :info="info" /> </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 数据模型字段详解

每个案例对象包含以下字段，全部为可选与必选混合的结构，含义如下：

对于仓库内自带的封面资源，cover使用 VitePress 的import.meta.env.BASE_URL拼接站点根路径，例如典型案例 Composable Vue 的写法：

cover: `${import.meta.env.BASE_URL}showcases/composable-vue.png`,

这行路径最终对应仓库中的 docs/public/showcases/composable-vue.png（docs/public目录在构建时会被复制到站点根目录）。而提交外部案例时，cover则直接填远程图片 URL。

案例卡片如何渲染：ShowCaseInfo.vue

ShowCaseInfo.vue 接收单个info对象，渲染一张标准卡片，布局自上而下依次为：

1. 封面区：aspect-16/9的 16:9 宽高比容器，封面图整体作为链接指向info.slidesLink，点击封面即可直接打开在线幻灯片；
2. 标题：font-bold line-clamp-2，最多两行截断；
3. 场合：info.at（如 "VueDay 2021"、"JSConf Korea"），小号半透明文字；
4. 作者行：若author.link存在则渲染为链接，否则纯文本；
5. 操作图标：按字段是否存在，依次渲染视频（videoLink）、幻灯片（slidesLink）、源码（sourceLink）三个图标链接，hover 时高亮。

从组件实现可以推断，该页面的设计目标是为每个案例提供"看封面 → 点进幻灯片 → 找源码 / 看录像"的完整链路：听众可以快速判断演讲是否值得观看，开发者则能顺着sourceLink直接学习他人用 Slidev 组织内容、编写语法的具体方式。

当前案例清单一览

截至当前仓库版本，showcases.ts 中共收录 25 条有效案例（另有 2 条被注释掉的待定条目与 1 条占位条目），按datetime倒序排列如下：

从中可以观察到一个事实：这些案例覆盖了 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?v=IMJjP6edHd0) - [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.vue）；
• monaco: true开启 Monaco 编辑器，让演讲中的代码示例可实时编辑运行；
• info块在演示时展示演讲元信息，同时可被导出为 PDF 的备注元数据。

该 demo 的工程配置见 demo/composable-vue/package.json，其脚本直接复用本地工作区中的@slidev/cli：

{ "scripts": { "dev": "nodemon -w '../../packages/slidev/dist/*.mjs' --exec 'slidev --log=info'", "build": "slidev build", "export": "slidev export", "export:clicks": "slidev export --with-clicks" } }

这套"demo 与文档同仓"的组织方式，让 Showcases 页面不只是外部链接的堆砌，还承担了官方可运行示例的职责——读者 clone 仓库后进入demo/composable-vue即可本地启动查看。

如何把自己的演讲加入 Showcases

showcases.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 -->注释，加入自己演讲的标准流程为：

1. 打开 docs/.vitepress/showcases.ts；
2. 在// Add yours here!注释处新增一个对象，仿照现有条目填写title、author.name、datetime，并按需提供cover、slidesLink、sourceLink、videoLink、at、author.link；
3. 将cover填为你的幻灯片封面（远程 URL，或把图片放入docs/public/showcases/后用import.meta.env.BASE_URL拼接）；
4. 提交改动。无需手动排序——文件末尾的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 作品、学习真实用法的入口；对开发者而言，它展示了"内容与展示分离"的文档维护模式，并且任何人都可以按模板提交自己的演讲，成为这个列表的下一个案例。

• 前端
• 开发工具