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

阿里的心流 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 github.com/marketplace... 已经发布到了 GitHub 的 Marketplace 市场。欢迎来玩~

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

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

使用 iFLOW CLI GitHub Action

如果想要使用这个 iFLOW CLI GitHub Action, 你需要在 GitHub 中创建一个代码库 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 官网 www.iflow.cn/ 注册一个账号,然后通过这个链接可以获取到密钥 iflow.cn/?open=setti....

我们将密钥保存到 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 中看到运行过程和结果,效果如下 github.com/vibe-ideas/...:

接下来我们再看看如何基于 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 发布到网络上。这里的效果可以访问这个网站看到 👀 version-fox.github.io/vfox-erlang...

结语

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

相关推荐
曹勖之16 分钟前
用Git在 Ubuntu 22.04(Git 2.34.1)把 ROS 2 工作空间上传到全新的 GitHub 仓库 步骤
git·ubuntu·github
孟健10 小时前
Claude Code 太贵用不起?这个中转站让你省一半钱,还更稳定
ai编程
Molesidy12 小时前
【Git】对于github的本地ssh客户端的配置与分支的使用
git·ssh·github
playStudy12 小时前
从0到1玩转 Google SEO
python·搜索引擎·github·全文检索·中文分词·solr·lucene
nil15 小时前
【开源推荐】双击即译!我用 trae 打造了一款轻量级Chrome网页翻译插件
chrome·llm·ai编程
ahauedu19 小时前
30分钟入门实战速成Cursor IDE(1)
ide·ai编程·cursor
ahauedu20 小时前
30分钟入门实战速成Cursor IDE(2)
ide·ai编程·cursor
北城笑笑20 小时前
Git 9 ,.git/index.lock 文件冲突问题( .git/index.lock‘: File exists. )
前端·git·gitee·gitlab·github
小先生0010121 小时前
GraphRAG 知识图谱核心升级:集成 langextract 与 Gemini ----实现高精度实体与关系抽取
人工智能·python·开源·prompt·github·bert·知识图谱
用户4099322502121 天前
FastAPI测试环境配置的秘诀,你真的掌握了吗?
后端·ai编程·trae