使用 iFLOW-CLI GitHub Action 和 Qwen-Coder 给 GitHub 仓库生成幻灯片风格的文档站点

为什么需要幻灯片风格的文档站点？在开源项目中，传统的 README 或 Wiki 虽然能承载信息，但往往缺乏视觉吸引力。想象一下：当你向团队成员或面试官展示项目时，一个幻灯片风格的文档站点能像演讲一样逐页展开，既能突出重点，又能让观众跟随你的思路。这就是 iFLOW-CLI 和 Qwen-Coder 组合的魅力——它们能将普通的 Markdown 文档自动转换为优雅的幻灯片站点，并且整个过程只需一次 GitHub Action 的触发。## 技术栈解读- iFLOW-CLI：一个轻量级的幻灯片生成工具，支持 Markdown 语法，能将 .md 文件转换为响应式 HTML 幻灯片。- Qwen-Coder：阿里云的通义千问代码模型，能理解自然语言需求并生成结构化代码。这里它负责自动生成幻灯片配置文件。- GitHub Action：CI/CD 自动化工作流，用于监听仓库变化、调用 iFLOW-CLI 并部署到 GitHub Pages。## 实战：从零搭建幻灯片文档站点### 第一步：准备仓库结构首先，在你的 GitHub 仓库中创建一个专用的幻灯片目录，例如 slides/。每个 .md 文件代表一张幻灯片，文件名按顺序命名（如 01-intro.md、02-architecture.md）。my-project/├── .github/workflows/│ └── slides-deploy.yml├── slides/│ ├── 01-intro.md│ ├── 02-architecture.md│ └── 03-demo.md└── README.md### 第二步：编写幻灯片内容以下是一个示例幻灯片文件 slides/01-intro.md：markdown# 项目简介## 一个基于 AI 的智能助手- 支持自然语言交互- 实时代码生成- 跨平台部署---# 技术架构## 核心组件1. **前端**：React + TypeScript 2. **后端**：FastAPI + PostgreSQL 3. **AI 引擎**：Qwen-Coder API> 注：所有组件均通过 Docker 容器化部署。每个 --- 分隔符会生成一张新幻灯片。### 第三步：编写 Qwen-Coder 配置脚本Qwen-Coder 可以自动生成 iFLOW-CLI 的配置文件。以下是一个 Python 脚本，它读取 slides/ 目录并生成 iflow.config.json：python# generate_config.pyimport osimport jsondef generate_iflow_config(slides_dir="slides"): """根据 slides 目录生成 iFLOW-CLI 配置文件""" md_files = [f for f in os.listdir(slides_dir) if f.endswith(".md")] md_files.sort() # 按文件名排序 config = { "title": "项目文档幻灯片", "author": "Your Name", "slides": [{"file": f, "transition": "slide"} for f in md_files], "theme": "moon", # 主题：moon, sky, beige 等 "highlight_theme": "monokai" } with open("iflow.config.json", "w", encoding="utf-8") as f: json.dump(config, f, indent=2) print(f"配置文件已生成，包含 {len(md_files)} 张幻灯片")if __name__ == "__main__": generate_iflow_config()运行 python generate_config.py 后，会生成如下 iflow.config.json：json{ "title": "项目文档幻灯片", "author": "Your Name", "slides": [ {"file": "slides/01-intro.md", "transition": "slide"}, {"file": "slides/02-architecture.md", "transition": "slide"}, {"file": "slides/03-demo.md", "transition": "slide"} ], "theme": "moon", "highlight_theme": "monokai"}### 第四步：编写 GitHub Action 工作流现在，我们来编写核心的 CI/CD 流水线。当 slides/ 目录有更新时，自动生成幻灯片并部署到 GitHub Pages。yaml# .github/workflows/slides-deploy.ymlname: 幻灯片文档站点部署on: push: paths: - 'slides/**' # 仅当 slides 目录有变更时触发 - 'iflow.config.json'jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: 检出代码 uses: actions/checkout@v4 - name: 设置 Node.js 环境（iFLOW-CLI 依赖） uses: actions/setup-node@v4 with: node-version: 18 - name: 安装 iFLOW-CLI run: npm install -g iflow-cli - name: 生成幻灯片 HTML run: iflow build # 该命令会读取 iflow.config.json 并生成 dist/ 目录 - name: 部署到 GitHub Pages uses: peaceiris/actions-gh-pages@v4 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist # iFLOW-CLI 默认输出到 dist/### 第五步：启用 GitHub Pages1. 进入仓库 Settings → Pages2. Source 选择 "Deploy from a branch"3. Branch 选择 gh-pages4. 保存后，你的幻灯片站点将在 https://<你的用户名>.github.io/<仓库名> 访问## 扩展：如何让 Qwen-Coder 自动生成幻灯片内容？你可以利用 Qwen-Coder 的 API 将自然语言描述转化为幻灯片格式。以下是一个示例：python# ai_slides_generator.pyimport requestsdef generate_slides_from_prompt(prompt): """调用 Qwen-Coder API 生成幻灯片 Markdown 内容""" api_key = "你的阿里云API密钥" url = "https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation" headers = { "Authorization": f"Bearer {api_key}", "Content-Type": "application/json" } # 构造提示词：要求生成带分隔符的幻灯片格式 slide_prompt = f""" 请将以下描述转换为三张幻灯片的Markdown格式，每张幻灯片用'---'分隔： {prompt} 要求： - 第一张：标题和概述 - 第二张：核心功能 - 第三张：使用示例 """ payload = { "model": "qwen-coder-plus", "input": { "messages": [ {"role": "user", "content": slide_prompt} ] }, "parameters": { "max_tokens": 1500, "temperature": 0.7 } } response = requests.post(url, headers=headers, json=payload) result = response.json() # 提取生成的内容并保存为Markdown文件 slides_content = result["output"]["text"] with open("slides/01-ai-generated.md", "w", encoding="utf-8") as f: f.write(slides_content) print("AI 生成的幻灯片已保存")# 使用示例：描述你的项目generate_slides_from_prompt("一个基于大模型的代码审查工具，支持Python和JavaScript")运行此脚本后，slides/01-ai-generated.md 将包含 AI 生成的幻灯片内容，格式完全兼容 iFLOW-CLI。## 高级技巧：自定义幻灯片样式iFLOW-CLI 支持通过 CSS 覆盖默认样式。在仓库根目录创建 custom.css：css/* custom.css - 自定义幻灯片样式 */.reveal h1 { color: #ff6b6b; font-size: 2.5em;}.reveal .slides section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 40px;}.reveal blockquote { border-left: 5px solid #4ecdc4; background: rgba(255,255,255,0.1);}然后在 iflow.config.json 中添加：json{ "css_files": ["custom.css"]}## 总结通过 iFLOW-CLI、Qwen-Coder 和 GitHub Action 的组合，我们实现了一个完全自动化的幻灯片文档站点生成方案：1. 内容创作：使用 Markdown 编写幻灯片，或通过 Qwen-Coder API 自动生成2. 配置自动化：Python 脚本动态生成 iFLOW 配置文件3. 持续部署：GitHub Action 监听代码变更，自动构建并部署到 Pages这套方案特别适合：- 开源项目的快速演示- 技术博客的幻灯片版本- 团队内部的知识分享你可以根据项目需求，进一步集成代码高亮、数学公式渲染或自定义动画。现在，不妨在你的下一个 GitHub 仓库中尝试一下，让文档真正“动”起来！