演示文稿工具

基于reveal.js的演示文稿工具,支持Markdown编辑、本地预览和GitHub Pages自动部署。

  • by rfay
  • CSS
  • 本地部署
  • 更新于
在 GitHub 查看 rfay/presentation-upsun-mcp

使用说明

Upsun MCP 实验

这个仓库包含一个用(某种工具或软件)构建的演示文稿 reveal.js。

🚀 快速入门

选项1:作为模板使用(推荐)

  1. 点击此仓库顶部的“使用此模板”按钮
  2. 创建你的新仓库
  3. 克隆你的新仓库
  4. 运行安装脚本进行自定义:
    ./setup-template.sh
    
  5. 该脚本将:
    • 在README文件中更新为你的仓库名称
    • 在index.html中更新为您的演示文稿标题
    • 将Markdown文件重命名为与您的仓库名称相匹配的名称
    • 更新 package.json
    • 完成时自动删除

选项2:手动设置

  1. 克隆此存储库
  2. 手动更新:
    • README.md用你的值替换占位符
    • index.html更新标题和Markdown文件引用
    • slides/presentation.md重命名为您喜欢的名称
    • package.json更新名称字段

🎯 查看演示文稿

👉 观看实时演示

设置完成后,此链接将自动指向您的GitHub Pages部署站点。

📝 编辑您的演示文稿

这个演示文稿是用Markdown编写的。请在文件中进行编辑 slides/ 目录。

  • 使用 --- 将幻灯片分开
  • 使用 -- 用于垂直滑轨
  • 为(内容/页面等)添加图片 images/ 目录
  • 自定义样式设置 css/custom.css

🧪 本地开发

在本地预览您的演示文稿:

npm start

这将在 http://localhost:8000 启动一个本地服务器

🌐 部署到 GitHub Pages

步骤1:启用GitHub Actions工作流权限

  1. 前往你的仓库 设置 > 行动 > [音译](人名)吉恩纳尔
  2. 向下滚动到 工作流权限
  3. 选择 读写权限
  4. 检查 允许 GitHub Actions 创建和批准拉取请求
  5. 点击 保存

步骤2:启用GitHub Pages

  1. 前往你的仓库 设置 > 页面
  2. 在……之下 来源,选择 GitHub Actions(GitHub操作) 从下拉菜单中
  3. 点击 保存

第三步:部署

  1. 将你的更改推送到 main 分支:
    git add .
    git commit -m "Initial presentation"
    git push
    
  2. GitHub Actions 工作流将自动构建并部署您的演示文稿
  3. 检查一下 行动 用于监控部署的标签(或选项卡)
  4. 完成后,您的演示文稿将可在此处查看: https://rfay.github.io/presentation-upsun-mcp/

注: 首次部署可能需要几分钟时间。之后的更新会在您推送时自动部署 main。

🎨 定制化

  • 造型编辑 css/custom.css 用于自定义样式
  • 图片向(其中)添加图片 images/ 目录
  • 主题更改reveal.js的主题 index.html
  • 配置修改 reveal.js 的设置 index.html

📚 资源