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

阿里的心流 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/#/, 预览效果如下：

接下来我们看看如何使用这个 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:

shell 复制代码

git clone https://github.com/yourname/your-repo.git
cd your-repo

mkdir -p .github/workflows
touch .github/workflows/iflow-cli-action.yml

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

yaml 复制代码

name: iFlow CLI Example
on: [push]

jobs:
  analyze-code:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Run iFlow CLI
        uses: vibe-ideas/iflow-cli-action@v1.2.0
        with:
          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 了：

shell 复制代码

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 公开仓库中 <>:

yaml 复制代码

name: Build and Deploy Homepage

on:
  # Allow manual trigger
  workflow_dispatch:
  # Also run on pushes to main branch
  push:
    branches: [ main ]

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      GITHUB_PAGES: true
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Create homepage directory
        run: mkdir -p _site

      - name: Generate homepage using iFlow CLI
        uses: vibe-ideas/iflow-cli-action@main
        with:
          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-erlang
          api_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 generated
        run: |
          if [ -f "_site/index.html" ]; then
            echo "Reveal.js presentation generated successfully!"
            echo "Checking for reveal.js content..."
            if grep -q "reveal.js" "_site/index.html"; then
              echo "✓ Reveal.js framework detected"
            else
              echo "⚠ Warning: Reveal.js framework not found in generated file"
            fi
            ls -la _site/
          else
            echo "Error: Presentation was not generated by iFlow"
            exit 1
          fi

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./_site

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

这里 iFLOW CLI 将会基于代码仓库的 README 和 reveal.js 生成幻灯片风格的文档站点，然后通过 GitHub Pages 发布到网络上。这里的效果可以访问这个网站看到 👀 https://version-fox.github.io/vfox-erlang/#/

结语

期待你能基于 iFLOW CLI Action, 玩出更多的花样~