2026/09 on BenzHub

RAG 架構實作:在 Cloudflare 上打造知識庫問答 | Cloudflare 完整教學

Mon, 07 Sep 2026 00:00:00 +0000

RAG(檢索增強生成,Retrieval-Augmented Generation) 是讓 LLM「有憑有據」回答問題的關鍵架構:在生成回答之前,先從你自己的知識庫檢索出最相關的資料,再交給 LLM 生成答案。這一篇,我們把 Workers AI 的 embedding、Vectorize 的語意搜尋與 LLM 的生成串成一條龍,在 Cloudflare 上做出一個完整、可執行、不會亂編的知識庫問答系統。

效能最佳化:壓小 CSS 與加速建置 | TailwindCSS 完整教學

Mon, 07 Sep 2026 00:00:00 +0000

效能最佳化 是把 TailwindCSS 專案從「能跑」推向「跑得又快又輕」的最後一哩路。在 v4,全新的 Oxide 引擎讓增量建構快到以微秒計,天生的 tree-shaking 搭配自動內容偵測,讓 production CSS 通常只有幾 KB。這一篇帶你把效能拆成三個面向——建構速度、CSS 檔案大小、執行期渲染,學會用 @source 精準掃描、量測產出大小、避開 safelist 膨脹,讓網站不只寫得快,也跑得快。

Vectorize 向量資料庫入門:語意搜尋的第一塊拼圖 | Cloudflare 完整教學

Sun, 06 Sep 2026 00:00:00 +0000

Cloudflare Vectorize 是一個與 Workers 深度整合的全球分散式向量資料庫(vector database),專為儲存與查詢 embedding(向量嵌入) 而生。有了它,你就能在邊緣運算環境裡做語意搜尋——不是比對關鍵字,而是比對「意思」。這一篇我們從「什麼是向量、什麼是相似度」講起,教你用 wrangler 建立 index、設定 binding,並跑一遍 insert、upsert、query、getByIds、deleteByIds、metadata 過濾與 namespaces。

建置工具整合:Vite、PostCSS 與 CLI 三途徑 | TailwindCSS 完整教學

Sun, 06 Sep 2026 00:00:00 +0000

建置工具整合 是把 TailwindCSS 從「範例裡的 class」變成「真實專案裡的樣式」的關鍵一步。在 v4,你有三條路:跟 Vite 深度整合的 @tailwindcss/vite(最推薦)、通用於 Next.js 等框架的 @tailwindcss/postcss,以及無框架場景的 @tailwindcss/cli。這一篇帶你認識背後的 Oxide 引擎與 Lightning CSS,搞懂 @import "tailwindcss" 與 @source,並把三種建置工具的設定一次對照清楚。

AI Gateway:替所有 AI 請求加上快取、限流與可觀測 | Cloudflare 完整教學

Sat, 05 Sep 2026 00:00:00 +0000

上一篇《AI.run() 與常見任務》,我們用同一個 env.AI.run() 跑遍了文字、向量、影像、語音與工具呼叫。但當這些 AI 呼叫進到生產環境,新的煩惱就浮現:重複的 prompt 每次都重算很浪費、成本無從觀測、失敗沒重試、還可能想同時代理 Workers AI 與 OpenAI/Anthropic。這一篇的主角 AI Gateway——一層架在應用程式與 AI 供應商之間的統一閘道——正是來解決這些問題的。我們會替所有 AI 請求加上快取、限流(rate limiting)、重試 / fallback、可觀測(logs / analytics / costs)與多供應商路由。

回饋模式:Modal、Toast 與 Skeleton 全攻略 | TailwindCSS 完整教學

Sat, 05 Sep 2026 00:00:00 +0000

回饋(Feedback) 是介面對使用者每一次操作的回應——你點了儲存,它得告訴你成功了;你按了刪除,它得先問你確定嗎;資料還在載入,它得讓你知道別急。這一篇用 TailwindCSS 把原生 <dialog> Modal、右上角滑入的 Toast、純 CSS 的 Tooltip、四色語意的 Alert、animate-pulse 的 skeleton 與 spinner,以及 Progress 進度條一次做齊,搭配 v4 的 @starting-style 進場動畫與少量 JS,兼顧美觀、流暢與無障礙。

AI.run() 與常見任務:一個方法跑遍模型目錄 | Cloudflare 完整教學

Fri, 04 Sep 2026 00:00:00 +0000

上一篇《Workers AI 入門》,我們跑通了第一個 env.AI.run() 文字生成推論。但這個方法遠不只「丟 prompt、拿回答」這一招——同一個 env.AI.run(),換個模型識別符、換個輸入,就能跑遍整個模型目錄。這一篇我們深入 AI.run() 本身:把文字生成的進階參數(messages/prompt、temperature、max_tokens)、串流輸出(stream: true + SSE)、給 RAG 用的 text embedding、影像生成、Whisper 語音轉文字、以及 function calling 工具呼叫,各自跑一遍。

導覽模式:navbar、下拉選單與行動 Drawer 全攻略 | TailwindCSS 完整教學

Fri, 04 Sep 2026 00:00:00 +0000

導覽(Navigation) 是使用者在網站裡移動的動線——navbar、下拉選單、麵包屑、Drawer,每一個都在回答「我現在在哪、可以去哪」。這一篇用 TailwindCSS 把桌機水平 navbar、響應式 hamburger 選單、group/peer/details 下拉、行動版 Drawer 側邊抽屜,以及 sticky 固定導覽、麵包屑與 pagination、tabs 一次做齊,搭配 v4 語法與少量 JS,兼顧美觀、響應式與無障礙。

Workers AI 入門:在邊緣直接跑 AI 推論 | Cloudflare 完整教學

Thu, 03 Sep 2026 00:00:00 +0000

Cloudflare Workers AI 讓你不必自己租 GPU、不必架 GPU 伺服器,就能在全球邊緣節點直接執行機器學習推論(inference)。這一篇是 Workers AI 的第一課:我們會先講清楚什麼是「邊緣 GPU 推論」、怎麼在 wrangler.jsonc 設定 AI binding、模型目錄裡有哪些種類(LLM、embedding、影像、語音、分類)、怎麼寫出你的第一個 env.AI.run() 推論,並釐清 Neurons 計費、免費額度,以及它和 OpenAI 這類外部 API 的根本差異。

表單模式:input/驗證/自訂 checkbox 的優雅寫法 | TailwindCSS 完整教學

Thu, 03 Sep 2026 00:00:00 +0000

表單(Form) 是最考驗一致性的 UI——原生元素在各瀏覽器長得七零八落,狀態(focus/disabled/invalid)又多。這一篇用 TailwindCSS 把 input、textarea、select、checkbox、radio 一路樣式化,搭配 @tailwindcss/forms plugin 重置預設外觀,再用 focus:、disabled:、user-invalid: 等狀態變體與 accent-color 做出優雅又無障礙的驗證回饋 UI。

非同步編排選型:Queues vs Workflows vs DO | Cloudflare 完整教學

Wed, 02 Sep 2026 00:00:00 +0000

走完 Workflows 的深水區後,一個更上層的問題浮上檯面:面對一個非同步需求,我到底該選 Queues、Workflows,還是 Durable Objects?這三者不是互相取代的競品,而是各有專精的原語——Queues 擅長大量獨立訊息與簡單重試,Workflows 擅長單一長時多步的持久化流程,Durable Objects 搭配 Alarms 擅長有狀態協調與自我排程。這一篇,我們用一張對照表、一棵決策樹、幾段可執行骨架,把「該用哪個、又怎麼串成一條管線」徹底講清楚,替 CF-4 這條非同步主線收尾。

設計系統建構:從 0 用 @theme 打造多品牌體系 | TailwindCSS 完整教學

Wed, 02 Sep 2026 00:00:00 +0000

前面幾篇我們把 設計 Token、元件模式、暗色模式、響應式一塊塊拆開來看;這一篇要把它們組裝成一個整體。我們會從 0 開始,用 TailwindCSS v4 的三大 CSS-first 指令——@theme 定 Token、@utility 建語意 utility、@custom-variant 建品牌變體——搭出一套能支援白牌與多品牌主題切換的設計系統,並談元件層、文件化與可維護性策略,讓一人專案到大型團隊都能穩健成長。

Workflows steps 深入:重試、sleep 與等待事件 | Cloudflare 完整教學

Tue, 01 Sep 2026 00:00:00 +0000

上一篇《Workflows 持久化執行入門》,我們寫出了第一個 Workflow,學會用 step.do(名稱, 函式) 把每個有副作用的動作包成一個持久化步驟。但那只是最基本的兩參數形式。真正讓 Cloudflare Workflows 強大的,是 step 的深水區:每一步要怎麼設定重試與指數退避?怎麼讓流程睡上七天卻完全不計費?怎麼暫停下來等待一個外部的人工審核事件? 這一篇,我們就把 step.do、step.sleep、step.waitForEvent 這三支 API 一次拆透,並釐清背後那條所有人都會踩的紅線——決定性(determinism)。

設計 Token:用 @theme 打造單一真相源頭 | TailwindCSS 完整教學

Tue, 01 Sep 2026 00:00:00 +0000

上一篇《shadcn/ui》我們看到它換膚的祕密,就在那組語意化的 CSS 變數——--primary、--background、--radius… 這些其實有個更宏大的名字:設計 Token(Design Tokens)。這一篇要帶你系統性地理解:如何在 TailwindCSS v4 用 @theme 把 Token 變成「同時是 CSS 變數、又是 utility class」的單一真相源頭,並用 primitive / semantic 分層、--alpha() 函式與任意值引用,讓品牌、明暗、多主題都能一鍵切換。