当前位置：首页 > news >正文

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

news 2025/8/11 9:20:37

阿里的心流 https://www.iflow.cn/ 团队最近开源了一款基于终端的 AI Agent 工具 iFLOW CLI, 目前可以免费使用到强大的 Qwen3-Coder、Kimi K2 等模型。又是一款类似 Anthropics Claude Code 的产品。

iFlow CLI 是一款直接在终端中运行的强大 AI 助手。它能够无缝分析代码仓库、执行编程任务、理解上下文需求，通过自动化处理从简单的文件操作到复杂的工作流程，全面提升您的工作效率。

既然是基于终端的 AI Agent 工具，那么就可以很好的利用 Github Action 来实现在文档内容更新之后, 自动生成幻灯片风格的文档站点。

趁着发布当日，立马基于 GitHub Copilot Agent、iFLOW CLI vibe coding 了一个 GitHub Actions 来方便在隔离的 GitHub Actions 环境中大规模使用。

GitHub Actions https://github.com/marketplace/actions/iflow-cli-action 已经发布到了 GitHub 的 Marketplace 市场。欢迎来玩~

这里我们介绍如何基于这个 GitHub Actions 来生成幻灯片风格的文档站点，最终的效果可以查看这个网站 https://vibe-ideas.github.io/iflow-cli-action/#/, 预览效果如下：
在这里插入图片描述

iflow-action-usage-demo GIF

接下来我们看看如何使用这个 GitHub Actions.

使用 iFLOW CLI GitHub Action

如果想要使用这个 iFLOW CLI GitHub Action, 你需要在 GitHub 中创建一个代码库 https://github.com/new, 然后在代码库中创建一个 .github/workflows 目录，在 .github/workflows 目录下创建一个 iflow-cli-action.yml 文件使用 iFLOW CLI GitHub Action:

git clone https://github.com/yourname/your-repo.git
cd your-repomkdir -p .github/workflows
touch .github/workflows/iflow-cli-action.yml

iflow-cli-action.yml 文件内容如下：

name: iFlow CLI Example
on: [push]jobs:analyze-code:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4- name: Run iFlow CLIuses: vibe-ideas/iflow-cli-action@v1.2.0with:prompt: "Analyze this codebase and suggest improvements"api_key: ${{ secrets.IFLOW_API_KEY }}model: "Qwen3-Coder"timeout: "1800"extra_args: "--debug"

prompt 即提示词，指导 AI Agent 完成你的目标🎯. 模型我们选用了 Qwen3-Coder.

secrets.IFLOW_API_KEY 是 iFLOW CLI 的 API 接口访问密钥，你可以在 iFLOW CLI 官网 https://www.iflow.cn/ 注册一个账号，然后通过这个链接可以获取到密钥 https://iflow.cn/?open=setting.

我们将密钥保存到 GitHub 仓库的 Secrets 中，避免密钥泄露。Settings -> Secrets and variables -> Actions -> New repository secret, Secrets 名为 IFLOW_API_KEY:

以上配置完成后，将工作流文件提交到 GitHub 仓库中就可以正常使用这个 GitHub Actions 了：

git add .
git commit -m "add iflow-cli-action.yml"
git push

推送之后，一般可以在代码仓库的 Actions 中看到运行过程和结果，效果如下 https://github.com/vibe-ideas/iflow-cli-action/actions/runs/16844856504:

接下来我们再看看如何基于 iFLOW CLI GitHub Action 生成前文提到的幻灯片风格的文档站点。

基于 iFLOW CLI GitHub Action 生成幻灯片风格的文档站点

相信通过前文，你已经知道如何使用 iFLOW CLI GitHub Action. 这里我们直接给出 GitHub Actions 的配置文件，方便大家参考，这个编排文件也放到了一个 GitHub 公开仓库中 :

name: Build and Deploy Homepageon:# Allow manual triggerworkflow_dispatch:# Also run on pushes to main branchpush:branches: [ main ]# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:contents: readpages: writeid-token: write# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
concurrency:group: "pages"cancel-in-progress: falsejobs:build:runs-on: ubuntu-latestenv:GITHUB_PAGES: truesteps:- name: Checkout repositoryuses: actions/checkout@v4- name: Setup Pagesuses: actions/configure-pages@v4- name: Create homepage directoryrun: mkdir -p _site- name: Generate homepage using iFlow CLIuses: vibe-ideas/iflow-cli-action@mainwith:prompt: |Please read only the README.md file content from the current repository (do not read any other files), and convert it into a beautiful slideshow-style documentation website based on Reveal.js and save it as _site/index.html.Requirements:1. Use the Reveal.js framework to build a slideshow presentation, splitting the README content into multiple slide pages according to logical structure;2. Slideshow structure design:- Homepage slide: Project title, subtitle, GitHub link, and project introduction- Feature highlights slide: Showcase main features and characteristics- Installation guide slide: Step-by-step installation process- Usage examples slide: Display code examples and configuration instructions- Advanced features slide: Show advanced usage and best practices- Closing slide: Acknowledgments, contribution guidelines, and contact information;3. Use modern Reveal.js themes and configurations:- Enable horizontal and vertical navigation- Configure slide transition animation effects (such as slide, fade, zoom)- Add progress bar and slide counter- Support keyboard navigation and touch gestures- Enable autoplay functionality (pausable)- Add slide thumbnail overview;4. Visual design using surreal digital collage style:- Use vivid color contrasts and geometric elements- Create layered visual effects combining text and graphic elements- Use irregular shapes, transparency, and overlapping effects to create depth- Employ dynamic backgrounds and animated transitions for visual impact- Use abstract graphics and digital elements as decorative elements- Ensure overall design has artistic appeal and visual attraction;5. Font size and layout optimization (important):- Title font sizes: Main title 2.5em, subtitle 1.8em, section title 1.5em- Body text font size: Use 1.2em, ensure clear readability on all devices- Code font size: Use 0.9em, avoid code blocks being too large causing layout issues- Line height settings: Body text 1.6x line height, titles 1.4x line height- Content area margins: Set appropriate padding for each slide (60px top/bottom, 40px left/right)- Ensure sufficient spacing between text and background, avoid blocking and overlap- Limit content amount per slide to avoid information overload- Implement vertical scrolling for long code blocks instead of shrinking font;6. Code display optimization:- Use Reveal.js code highlighting plugin- Support syntax highlighting (YAML, Bash, Markdown, etc.)- Add line numbers and copy buttons- Use appropriate maximum height (60vh) and scrollbars for code blocks- Implement animated display effects for code snippets;7. Interactive features:- Add navigation menu and chapter jumping- Implement fullscreen mode and speaker mode- Support ESC key to display slide overview- Add sharing and export functionality;8. Responsive design:- Ensure good experience on desktop, tablet, and mobile devices- Appropriately reduce font size on mobile devices while maintaining readability- Adapt fonts and layout to different screen sizes- Optimize interaction experience for touch devices;9. Technical implementation:- Import latest version of Reveal.js from CDN- Configure necessary plugins (highlight.js, notes, zoom, etc.)- Add custom CSS styles to enhance visual effects- Ensure fast loading and smooth animation performance;10. SEO and accessibility:- Add complete meta tags and structured data- Ensure keyboard navigation accessibility- Add alt text and aria labels- Optimize search engine indexing.Please directly create a complete HTML file using inline CSS and JavaScript, ensuring the file is self-contained and can run directly in browsers.Project URL: https://github.com/version-fox/vfox-erlangapi_key: ${{ secrets.IFLOW_API_KEY }}# settings_json: ${{ secrets.IFLOW_SETTINGS_JSON }}model: "Qwen3-Coder"timeout: "1800"extra_args: "--debug"- name: Verify reveal.js presentation was generatedrun: |if [ -f "_site/index.html" ]; thenecho "Reveal.js presentation generated successfully!"echo "Checking for reveal.js content..."if grep -q "reveal.js" "_site/index.html"; thenecho "✓ Reveal.js framework detected"elseecho "⚠ Warning: Reveal.js framework not found in generated file"fils -la _site/elseecho "Error: Presentation was not generated by iFlow"exit 1fi- name: Upload artifactuses: actions/upload-pages-artifact@v3with:path: ./_sitedeploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-latestneeds: buildsteps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4