slidev 部署到github pages

本文介绍了如何使用Slidev创建幻灯片,并将其单页应用部署到Github Pages进行展示。通过修改基础路径并上传dist目录内容,解决了在Github Pages上无法正常显示的问题,使得演示文稿能在任何环境下流畅查看。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Slidev 作为为开发者而生的幻灯片工具,其使用markdown语法来生成presentation,但是本地运行时需要安装npm 环境,不方便在任意地方查看和展示。

Slidev 提供了导出pdf和png格式的方法,但是这样会丧失一些互动交互的功能,而且如果需要分享文稿还是要拷贝文件很不方便。

一个更加友好的方式是使用其中的单页应用的功能,将生成的单页应用部署到web服务即可随时随地查看和演示presentation。本文简单介绍一下将Slidev的单页应用部署到Github Page的方法。

部署步骤

1. 构建slidev单页应用

slidev build

生成的单页应用程序会保存在 dist/ 目录下, 查看内容可以看到,一个index.html 文件和assets目录存放一些资源文件。

2. 将dist目录下的内容上传到github仓库

新建一个redis_intro仓库,将assets中的内容上传到github。

然后按照下图设置Pages

 进入链接网页,发现会找不到js和css文件。

3. 解决方法 

因为 index.html 中对assets路径缺少github仓库名称,修改index.html

 重新打开链接,即可在任何环境展示你的presentation了

3.1  slidev build 指定基础路径

运行slidev build时,可以使用 --base 选项来进行修改

slidev build --base /redis_intro

打开链接https://be5yond.github.io/redis_intro/可以查看在线presentation

### Slidev MCP 使用指南 Slidev 是一个专为开发者设计的演示文稿工具,支持 Markdown 语法和 Vue 组件,能够快速生成美观且功能强大的幻灯片。MCP(Multi-Component Presentation)是 Slidev 中的一个高级特性,允许用户通过多个组件或模块化的方式来构建复杂的演示文稿[^1]。 #### 项目基础介绍和主要编程语言 Slidev 的核心由 Vue.js 构建,因此其主要编程语言为 JavaScript/TypeScript。此外,Slidev 还支持多种前端技术栈,如 Vite、Tailwind CSS 和 Markdown 等。这些技术共同构成了 Slidev 的强大功能基础[^3]。 #### Slidev MCP 配置教程 在使用 Slidev 的 MCP 功能时,可以通过以下方式实现多组件演示文稿: 1. **创建自定义主题** 在 `packages/themes` 目录下,可以创建自定义的主题文件夹,并添加所需的 Vue 组件。例如: ```javascript // packages/themes/my-theme/index.vue <template> <div class="my-theme"> <slot /> </div> </template> <style> .my-theme { background-color: #f0f0f0; } </style> ``` 2. **配置 MCP 文件** 在项目的根目录下,创建一个 `.slidevrc.js` 或 `.slidevrc.ts` 文件,用于配置 MCP 参数。例如: ```javascript module.exports = { theme: 'my-theme', components: [ './components/CustomComponent.vue', './components/AnotherComponent.vue' ] }; ``` 3. **启动 Slidev 并应用 MCP** 使用以下命令启动 Slidev 并加载 MCP 配置: ```bash npm install -D @slidev/cli npx slidev --config .slidevrc.js ``` #### 示例代码 以下是一个简单的 MCP 演示文稿示例,展示了如何在 Slidev 中嵌入自定义组件: ```markdown --- title: My Multi-Component Presentation theme: my-theme --- # Slide 1 This is the first slide with a custom component. <CustomComponent /> --- # Slide 2 This is the second slide with another custom component. <AnotherComponent /> ``` #### 注意事项 - 确保所有自定义组件都已正确导入并注册到 `.slidevrc.js` 文件中。 - 如果需要团队协作,建议通过本地安装的方式管理 Slidev 依赖项,以保证版本一致性[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值