1.7k2 分鐘

# 問題 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; // 頁面載入時的
9k8 分鐘

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

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

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

# 後端 整體後端大致工作流程為 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.9k4 分鐘

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

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

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