1.7k字2 分鐘

# 問題 GSAP target .page-title not found. https://gsap.com Error Component Stack at BlogPostList (blog-post-list.tsx:15:19) at div (<anonymous>) at div (<anonymous 以上這類錯誤發生的主因是 GSAP 嘗試在 DOM 元素完全渲染到頁面之前對其進行動畫處理 原本會導致錯誤發生的程式碼： useGSAP(() => &#123; // 頁面載入時的
9k字8 分鐘

# 前言 像這種郵件發送的功能，通常會在後端處理，前端只需提供表單內容，這樣做的原因有幾個： 安全性：郵件發送需要 SMTP 憑證，這些不應暴露在前端程式碼 可靠性：Django 有成熟的郵件發送模塊（django.core.mail） 擴展性：後期可以輕鬆添加更多功能，如記錄表單歷史、自動回覆等 防濫用：可以實現速率限制、驗證碼等防護機制 # 後端 針對此專案我會額外建立一個 django app 來專門放所有與郵件相關的功能 # settings 配置郵件設定 EMAIL_HOST 是用中華電信的 SMTP 郵件伺服器，通常 TLS 連接使用的是端口 587 # settings.py
3.1k字3 分鐘

# 前言 本專案選擇 martor 作為後台的文章內文 Markdown 編輯器，比 ckeditor 更輕量化且支援 Markdown 語法，還有提供預覽、支援圖片上傳...功能等功能 # martor 編輯器套件設定 安裝套件 pip install martor 然後在 settings.py 進行基本設定 # settings.py INSTALLED_APPS = [ # ... 'martor', # ... ] # Martor 配置 MARTOR_ENABLE_CONFIGS = &#123; &#
8.5k字8 分鐘

# 後端 整體後端大致工作流程為 ORM 模型設計 serializer 開發 View 開發 URL 路由配置 API 測試與驗證（Postman / DRF） # ER Model 因為已經有文章標籤(TAG)的關係，這邊將文章(POST)和分類(CATEGORY)之間的關係從多對多改為一對多，更好的去區別 # ORM 模型 程式碼就不全部列出來，先只顯示 Post 跟 PostTag 兩個表重點說明 在 tag 欄位中用 Django 的 through 參數明確定義了多對多關係的中間表模型 添加了 unique_together 確保一篇文章不會重複關聯同一個分類或標
12k字11 分鐘

# 後端 整體後端大致工作流程為 ORM 模型設計 serializer 開發 View 開發 URL 路由配置 API 測試與驗證（Postman / DRF） # ER Model ✅ Product 與其他表的關聯： ProductImage（產品圖片） → 一對多 (One-to-Many) Specification（產品規格） → 一對多 (One-to-Many) ProductTag（產品標籤關聯表） → 多對多 (Many-to-Many) Tag（標籤） → 透過 ProductTag 建立多對多關係 2️⃣ ProductImage（產品圖片表） Pr
4.9k字4 分鐘

# 目錄結構 由於大多數網路上及教學，專案大都只含一個 app，而實際上多數商用專案及實際情況都會需多管理多個 apps，這邊就來看看多個 app 的整個專案結構會變如何 先看一開始還沒有拆分多個 Apps 前的 Django 專案結構： my_project/ │ ├── manage.py # Django CLI 入口 ├── requirements.txt # Python 依賴套件 │ ├── backend/ # Django 專案設定 │ ├── _
3k字3 分鐘

# 問題 由於此專案使用 GSAP 而非 framer motion 導致 shadcn/ui 的 accordion 元件在此專案中是沒有展開/收起動畫的，因此需用 GSAP 自行製作動畫效果 # GSAP 動畫建構重點 以下 shadcn/ui 官方的寫法，若專案有 framer motion 應能直接使用 return ( &#x3C;Accordion type='single' collapsible className='w-full'> &#x3C;AccordionIt
1.6k字1 分鐘

# 設置 @ 路徑別名 到 tsconfig.json 加入 compilerOptions 的 paths 設定： baseUrl：設定為 .，確保路徑別名從此目錄開始計算。 paths：定義別名，@components/_ 代表 src/components/_。 &#123; "compilerOptions": &#123; "baseUrl": ".", // 設定為專案根目錄 "paths": &#123; &