使用 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/#/, 預覽效果如下：
在這里插入圖片描述

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