教案圖片轉換指南

教案圖片轉換指南

已完成的學校

✅ 青山國中小 - 所有圖片已轉換為本地路徑

待處理的學校

🏫 有圖片檔案的學校：

  • 中正國中 - 有12張圖片
  • 汐止國中 - 有13張圖片
  • 淡水國中 - 有7張圖片
  • 清水高中 - 有2張圖片

🏫 需要圖片檔案的學校：

  • 鷺江國中 - 需要18張圖片
  • 重慶國中 - 需要4張圖片
  • 樟樹國際實中 - 需要6張圖片
  • 林口國中 - 需要8張圖片
  • 大觀國中 - 需要14張圖片
  • 佳林國中 - 需要8張圖片
  • 二重國中 - 需要圖片

轉換模式

原始格式：

<img src="https://lh4.googleusercontent.com/..." alt="Image 13" style="...">

本地格式：

<img src="/assets/images/lessons/%E5%AD%B8%E6%A0%A1%E5%90%8D%E7%A8%B1/%E5%8E%9F%E5%A7%8B%E7%85%A7%E7%89%87/%E5%9C%96%E7%89%87%E5%90%8D%E7%A8%B1.jpg" alt="描述性文字" style="...">

範例轉換

中正國中範例：

<!-- 原始 -->
<img src="https://外部連結..." alt="體育課程">

<!-- 轉換後 -->
<img src="/assets/images/lessons/%E4%B8%AD%E6%AD%A3%E5%9C%8B%E4%B8%AD/%E5%8E%9F%E5%A7%8B%E7%85%A7%E7%89%87/%E4%B8%AD%E6%AD%A3%E5%9C%8B%E4%B8%AD-%E9%AB%94%E8%82%B2%E8%AA%B2%E7%A8%8B-%E6%9E%97%E5%AD%90%E7%9A%93.jpg" alt="中正國中體育課程">

汐止國中範例：

<!-- 原始 -->
<img src="https://外部連結..." alt="雙語課程">

<!-- 轉換後 -->
<img src="/assets/images/lessons/%E6%B1%90%E6%AD%A2%E5%9C%8B%E4%B8%AD/%E5%8E%9F%E5%A7%8B%E7%85%A7%E7%89%87/%E9%9B%99%E8%AA%9E%E8%AA%B21.jpg" alt="汐止國中雙語課程">

操作步驟

  1. 準備圖片：將圖片放在對應學校的 /原始照片/ 目錄
  2. 命名規範：使用描述性的中文檔名，如 學校名-課程-教師.jpg
  3. 替換連結：將外部 URL 改為本地路徑格式
  4. 測試顯示：在本地伺服器確認圖片正常顯示
  5. 提交變更：使用 git 提交更新

優先順序建議

第一階段（有圖片檔案）：

  1. 中正國中 ⭐⭐⭐
  2. 汐止國中 ⭐⭐⭐
  3. 淡水國中 ⭐⭐
  4. 清水高中 ⭐

第二階段（需要圖片檔案）：

  1. 鷺江國中（圖片最多）
  2. 大觀國中
  3. 林口國中
  4. 其他學校

技術細節

  • 使用 Jekyll 的 /path/to/image 濾鏡確保路徑正確
  • 保持原有的 CSS 樣式不變
  • 更新 alt 文字為有意義的描述
  • 圖片格式支援：JPG, PNG, WebP

完成後的優點

✅ 圖片載入速度更快
✅ 不依賴外部服務
✅ 離線也能瀏覽
✅ 圖片不會失效
✅ 版本控制管理
✅ SEO 友好