Skill 進階實戰：手把手教你打通 GitHub 圖牀與 AI 生圖雙鏈路
整理版優先睇
本文詳細介紹兩種配圖方案——GitHub圖牀（穩定免費）與Qwen AI生圖（全自動創意），並提出混合工作流最佳實踐，令文章生成器Skill擁有強大視覺表現力。
呢篇文章係講點樣喺開發公眾號文章生成器Skill嗰陣，處理圖片呢個最關鍵又複雜嘅環節。作者發現AI生圖成本高，但唔配圖又影響讀者體驗，所以諗咗兩個實用方案出嚟。
第一個方案係用GitHub圖牀，適合手頭有現成圖片嘅情況，可以穩定免費咁上傳同埋嵌入文章。第二個方案係用Qwen AI生圖，全部自動化，根據文章內容生成配圖，創意十足。作者仲提出混合工作流，先AI生圖做正文配圖，再用GitHub圖牀上傳頭圖，咁就可以平衡成本同穩定性。
整體結論係只要掌握呢兩套方案，無論係技術文定係感性文，都可以輕鬆配圖，提升文章質素。
- GitHub圖牀方案：將圖片放喺images/目錄，用Python腳本上傳到GitHub倉庫，生成CDN加速連結，穩定免費，適合頭圖。
- Qwen AI生圖方案：利用Aliyun Dashscope API，根據文章內容生成提示詞，自動生成插圖，節省用戶配圖時間，但需消耗API Token。
- 混合工作流：先AI生圖生成正文圖，再用GitHub圖牀上傳本地頭圖，最後注入文章，兼顧成本與內容相關性。
- 成本控制：AI生圖消耗API Token，GitHub圖牀免費，混合使用可降低整體成本。
- 實作關鍵：配置.env文件（GitHub Token、Repo、Dashscope API Key），運行對應腳本（upload_images.py、generate_images.py），再運行inject_images.py注入連結。
內容結構
GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxx # GitHub 個人訪問令牌GITHUB_REPO=your_name/your_repo # 存放圖片的倉庫 (如: wuliuqi/skillImages567)GITHUB_BRANCH=main # 分支名圖片處理：Skill開發嘅核心痛點
喺開發Skill嗰陣，圖片處理係最關鍵又複雜嘅環節。AI生圖成本唔細，但唔配圖讀者體驗又差。呢篇文章分享兩套配圖方案，等你可以靈活切換。
方案一：GitHub圖牀——穩定免費嘅頭圖方案
呢個方案啱曬手頭有現成圖片嘅情況，例如截圖、攝影相。原理係將圖片放喺images/目錄，用Python腳本上傳到GitHub倉庫，再用GitHub Pages連結嵌入文章，享有CDN加速效果。
- 1 將圖片命名為 cover.png、content_1.png 等，放入 images/ 文件夾。
- 2 運行 python scripts/upload_images.py，腳本會自動上傳並更新 article_data.json。
- 3 運行 python scripts/inject_images.py 將連結注入文章正文。
方案二：Qwen AI生圖——全自動創意配圖
如果只有文章內容冇配圖，可以用呢個方案。佢會喺生成文章內容嗰陣一併生成圖片提示詞，然後調用阿里雲Dashscope API生圖，使用wanx-v1模型，自動更新連結。
- 1 確保 article_data.json 包含 new_cover_img_prompt 同 new_img_prompt 字段。
- 2 運行 python scripts/generate_images.py，腳本會調用 wanx-v1 模型生成圖片。
- 3 運行 python scripts/inject_images.py 將連結注入文章。
最佳實踐：混合工作流，平衡成本與質素
為咗獲得最穩定又自動化嘅體驗，建議將兩種方案結合：先用AI生圖做正文配圖，再用GitHub圖牀上傳本地頭圖。
- 生成：python scripts/generate_images.py（AI畫正文圖）。
- 上傳：python scripts/upload_images.py（上傳頭圖到圖牀）。
- 注入：python scripts/inject_images.py（替換連結）。
- 發佈：python scripts/publish_article.py。
喺開發公眾號文章生成器 Skill 嘅過程中，「圖片處理」 係最關鍵亦都最複雜嘅環節。
AI 生成圖片係有成本嘅，而調試過程中如果不斷咁生成圖片就會消耗大量 token，就算 qwen 會送啲免費額度都唔夠用。
但係如果文章正文唔配圖或者用固定嘅圖，讀者嘅體驗就會好差。
呢篇文章會詳細介紹點樣喺 Skill 入面實現兩套成熟嘅配圖方案，幫你根據實際需要靈活切換。
方案一：GitHub 圖牀方案（穩定、免費）
適用場景：你手頭上已經有現成嘅圖片（例如截圖、攝影相、精心設計嘅封面），需要將佢哋插入文章入面。
當然呢啲現成嘅圖片，通常都係我哋影嘅相或者網上揾嘅素材，同我哋嘅文章內容通常冇乜關係，呢啲圖片適合用嚟做文章頭圖。
核心原理：
本地儲存：將圖片放入 images/目錄。上傳託管：用 Python 腳本將圖片上傳到 GitHub 倉庫。 獲取連結：生成 GitHub Pages 連結（支援 CDN 加速，國內訪問較穩定）。 內容注入：將文章中嘅 《圖片1》佔位符替換成真實嘅 URL。
1. 配置準備（.env）
在 .env 檔案入面配置 GitHub 相關資訊：
GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxx # GitHub 個人訪問令牌
GITHUB_REPO=your_name/your_repo # 存放圖片的倉庫 (如: wuliuqi/skillImages567)
GITHUB_BRANCH=main # 分支名
2. 核心腳本邏輯
我哋用 scripts/upload_images.py 嚟實現上傳。
關鍵代碼解析：腳本會讀取 images/ 資料夾入面嘅 cover.png 和 content_x.png，呼叫 GitHub API 上傳，並返回 GitHub Pages 格式嘅連結。
# upload_images.py 片段
def upload_image(file_path):
# ... (讀取環境變量) ...
# 構建 GitHub API URL
url = f"https://api.github.com/repos/{repo}/contents/{remote_path}"
# 上傳文件
response = requests.put(url, headers=headers, json=data)
# 返回 GitHub Pages 連結 (比 raw 連結更穩定)
return f"https://{owner}.github.io/{repo_name}/{remote_path}"
3. 使用步驟
將圖片改名做 cover.png,content_1.png,content_2.png等，放入images/資料夾。執行腳本： python scripts/upload_images.py。腳本會自動更新 article_data.json入面嘅圖片連結。運行 python scripts/inject_images.py將連結注入文章正文。
方案二：Qwen AI 生圖方案（全自動、創意）
適用場景：你只有文章內容，冇配圖，希望 AI 根據上文下理自動生成插圖。
核心原理：
提取提示詞：喺生成文章內容嘅時候，叫 LLM 同時生成圖片嘅提示詞（Prompt）。 呼叫 API：用阿里雲 Qwen (通義萬相) API 生成圖片。 本地儲存圖片連結：將生成嘅圖片連結更新到 article_data.json圖片連結字段入面。無縫銜接：生成之後可以直接用，或者銜接「GitHub 圖牀方案」進行上傳。
1. 配置準備（.env）
你需要開通阿里雲 Dashscope 服務並獲取 API Key：
DASHSCOPE_API_KEY=sk-xxxxxxxxxxxxxxxxx
2. 核心腳本邏輯
我哋用 scripts/generate_images.py 嚟實現生圖。
關鍵代碼解析：腳本從 article_data.json 讀取 new_img_prompt，呼叫 Dashscope API。
# generate_images.py 片段
def generate_image_and_return_url(prompt, filename):
# 調用阿里雲 wanx-v1 模型
data = {
"model": "wanx-v1",
"input": {"prompt": prompt},
"parameters": {"size": "1024*1024"}
}
# ... (提交任務並輪詢狀態) ...
if task_status == 'SUCCEEDED':
img_url = task_result['output']['results'][0]['url']
# 下載保存到本地，方便後續上傳到 GitHub
urllib.request.urlretrieve(img_url, filename)
return img_url
3. 使用步驟
確保 article_data.json中包含new_cover_img_prompt和new_img_prompt字段（呢一步通常由文章生成步驟自動完成）。執行腳本： python scripts/generate_images.py。運行 python scripts/inject_images.py將連結注入文章正文。
最佳實踐：混合工作流（Hybrid Workflow）
為咗獲得最穩定、自動化嘅體驗，建議將兩種方案結合使用：
流程：AI 生成提示詞 -> Qwen 生圖獲取正文圖連結 -> GitHub 上傳本地圖 (獲取穩定頭圖外鏈) -> 注入文章 -> 發佈
操作流：
生成：運行 python scripts/generate_images.py（AI 幫你畫圖，返回圖片連結作為正文圖使用）。上傳：運行 python scripts/upload_images.py（上傳到 github 圖牀，返回 github 圖片連結，固定素材庫入面嘅圖片作為文章頭圖使用）。注入：運行 python scripts/inject_images.py（將連結替換入文章）。發佈：運行 python scripts/publish_article.py。
咁樣，你嘅文章質量都有保障，正文圖片係 AI 生成同文章內容相關嘅圖，而頭圖又係精心影嘅風景圖，降低咗 AI 生成圖片嘅成本。
總結
| 圖片來源 | ||
| 成本 | ||
| 穩定性 | ||
| 適用性 |
掌握咗呢兩套方案，你嘅 wechat-article-generator Skill 就擁有咗強大嘅視覺表現力，無論係嚴謹嘅技術文定係感性嘅雞湯文，都可以輕鬆駕馭！
掃碼加好友，回覆 1，領取文中提到嘅完整代碼資料。
在開發公眾號文章生成器 Skill 的過程中，“圖片處理” 是最關鍵也最複雜的環節。
AI 生成圖片是有成本的，而調試過程中如果不斷的生成圖片就會消耗大量的 token，就算 qwen 會送一些免費額度也不夠用的。
但是如果文章正文不配圖或者配置固定的圖，讀者的體驗就會很不好。
本文將詳細介紹如何在 Skill 中實現兩套成熟的配圖方案，助你根據實際需求靈活切換。
方案一：GitHub 圖牀方案 (穩定、免費)
適用場景：你手頭已經有現成的圖片（如截圖、攝影照片、精心設計的封面），需要將其插入到文章中。
當然這個現成的圖片，一般都是我們拍攝的圖片或者網上找的素材，與我們的文章內容一般沒什麼關係，這種圖片適合作為文章頭圖使用。
核心原理：
本地存儲：將圖片放入 images/目錄。上傳託管：使用 Python 腳本將圖片上傳到 GitHub 倉庫。 獲取連結：生成 GitHub Pages 連結（支持 CDN 加速，國內訪問較穩定）。 內容注入：將文章中的 《圖片1》佔位符替換為真實的 URL。
1. 配置準備 (.env)
在 .env 文件中配置 GitHub 相關信息：
GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxx # GitHub 個人訪問令牌
GITHUB_REPO=your_name/your_repo # 存放圖片的倉庫 (如: wuliuqi/skillImages567)
GITHUB_BRANCH=main # 分支名
2. 核心腳本邏輯
我們使用 scripts/upload_images.py 來實現上傳。
關鍵代碼解析： 腳本會讀取 images/ 文件夾下的 cover.png 和 content_x.png，調用 GitHub API 上傳，並返回 GitHub Pages 格式的連結。
# upload_images.py 片段
def upload_image(file_path):
# ... (讀取環境變量) ...
# 構建 GitHub API URL
url = f"https://api.github.com/repos/{repo}/contents/{remote_path}"
# 上傳文件
response = requests.put(url, headers=headers, json=data)
# 返回 GitHub Pages 連結 (比 raw 連結更穩定)
return f"https://{owner}.github.io/{repo_name}/{remote_path}"
3. 使用步驟
將圖片命名為 cover.png,content_1.png,content_2.png等，放入images/文件夾。運行腳本： python scripts/upload_images.py。腳本會自動更新 article_data.json中的圖片連結。運行 python scripts/inject_images.py將連結注入文章正文。
方案二：Qwen AI 生圖方案 (全自動、創意)
適用場景：你只有文章內容，沒有配圖，希望 AI 根據上下文自動生成插圖。
核心原理：
提取提示詞：在生成文章內容時，讓 LLM 同時生成圖片的提示詞（Prompt）。 調用 API：使用阿里雲 Qwen (通義萬相) API 生成圖片。 本地保存圖篇連結：將生成的圖片連結更新到 article_data.json圖片連結字段中。無縫銜接：生成後可直接使用，或銜接“GitHub 圖牀方案”進行上傳。
1. 配置準備 (.env)
你需要開通阿里雲 Dashscope 服務並獲取 API Key：
DASHSCOPE_API_KEY=sk-xxxxxxxxxxxxxxxxx
2. 核心腳本邏輯
我們使用 scripts/generate_images.py 來實現生圖。
關鍵代碼解析： 腳本從 article_data.json 讀取 new_img_prompt，調用 Dashscope API。
# generate_images.py 片段
def generate_image_and_return_url(prompt, filename):
# 調用阿里雲 wanx-v1 模型
data = {
"model": "wanx-v1",
"input": {"prompt": prompt},
"parameters": {"size": "1024*1024"}
}
# ... (提交任務並輪詢狀態) ...
if task_status == 'SUCCEEDED':
img_url = task_result['output']['results'][0]['url']
# 下載保存到本地，方便後續上傳到 GitHub
urllib.request.urlretrieve(img_url, filename)
return img_url
3. 使用步驟
確保 article_data.json中包含new_cover_img_prompt和new_img_prompt字段（這一步通常由文章生成步驟自動完成）。運行腳本： python scripts/generate_images.py。運行 python scripts/inject_images.py將連結注入文章正文。
最佳實踐：混合工作流 (Hybrid Workflow)
為了獲得最穩定、自動化的體驗，建議將兩種方案結合使用：
流程：AI 生成提示詞 -> Qwen 生圖獲取正文圖連結 -> GitHub 上傳本地圖 (獲取穩定頭圖外鏈) -> 注入文章 -> 發佈
操作流：
生成：運行 python scripts/generate_images.py(AI 幫你畫圖，返回圖片連結作為正文圖使用)。上傳：運行 python scripts/upload_images.py(上傳到 github 圖牀，返回 github 圖片連結，固定素材庫中的圖片作為文章頭圖使用)。注入：運行 python scripts/inject_images.py(把連結替換進文章)。發佈：運行 python scripts/publish_article.py。
這樣，你的文章質量也有保障，正文圖片是 AI 生成與文章內容相關的圖，而頭圖又是精心拍攝的風景圖，降低了 AI 生成圖片的成本。
總結
| 圖片來源 | ||
| 成本 | ||
| 穩定性 | ||
| 適用性 |
掌握了這兩套方案，你的 wechat-article-generator Skill 就擁有了強大的視覺表現力，無論是嚴謹的技術文還是感性的雞湯文，都能輕鬆駕馭！
掃碼加好友，回覆 1，領取文中提到的完整代碼資料。