CellFoam 平台技術品牌官網
2025
BioChange 是專注於獸醫再生醫學的生技品牌，核心是 CellFoam™ 明膠泡沫支架平台技術，底下延伸出 MicroFoam™（犬隻牙周治療）、Vitaloc™（止血粉）、VetFoam™（母犬尿失禁治療）三條產品線，累積 21 項已授權專利。
這個案子的挑戰不在於「再做一個官網」，而在於它必須看起來完全不像既有的母站。BioChange 的受眾是獸醫師、產品是動物臨床用的再生醫學耗材，跟母公司原本的醫美生技定位是兩個世界——若沿用母站的深藍企業風，品牌會直接被稀釋掉。
我們的作法是同一套 codebase、兩種品牌人格：CellFoam 站與母站共用同一個 Laravel + GraphQL 後端與同一份 Astro 專案，但擁有自己獨立的 Layout、配色系統與導覽列。對客戶而言，這代表未來每多一個子品牌，都不需要重養一個網站、一組後台、一條維運成本。
與母站共用同一套程式碼，卻擁有完全獨立的版型、配色與導覽列。品牌切換時使用者感受不到任何「同一個網站」的痕跡
以三維支架示意圖與分段敘事，把「明膠泡沫支架如何協助組織自我修復」這件抽象的事，講成獸醫師看得懂的臨床語言
犬隻非手術性牙周治療產品，以四步驟圖解拆解「置入齦下 1mm、輕壓數秒」的實際操作流程，降低臨床採用門檻
中重度出血控制產品，說明明膠粉末與交聯酶接觸血液後形成穩定基質的機制，並以四步驟示範實際施用方式
母犬 USMI 內視鏡引導注射式支架，以微創、注射式的產品定位切入，補齊三大產品線的最後一塊
支援縣市、鄉鎮、關鍵字與產品線的多層篩選與分頁，查到的院所可一鍵開啟 Google Maps 導航，直接把流量導向線下
獸醫師填寫院所名稱、聯絡方式與需求後直送後台並觸發通知，搭配 LINE 諮詢浮動入口，兩條轉換路徑並行
把獸醫師採用新技術前最常見的疑慮（安全性、可降解性、適應症、操作難度）整理成結構化問答，同時服務使用者與搜尋引擎
CellFoam 站以獨立的 CellfoamLayout 與一整組品牌專屬元件實作，掛載在母站 /cellfoam 路由之下。兩個品牌共用同一個後端、同一套部署流程與同一份相依套件，但前台的版型、配色、字級與導覽結構完全分離，互不干擾。這讓「新增一個子品牌站」從一個獨立專案，縮小成一個資料夾的成本。
前端以 Astro 5 建構，採用伺服器端渲染（output: 'server'）。產品敘事與技術說明等靜態內容於伺服器端完成組裝，確保搜尋引擎與社群分享預覽都能取得完整內容；互動元件則以 Vue 3 Islands 架構局部注水，維持首屏載入效能。
合作院所查詢是全站最重的元件（含篩選、分頁與地圖連結），因此以 client:visible 掛載——使用者捲動到該區塊前完全不會下載這段 JavaScript。頁面其餘部分維持零 JS 的純 HTML，把互動成本精準花在真正需要互動的地方。
院所資料透過 GraphQL 查詢，支援縣市、鄉鎮、關鍵字、產品線等多重條件與分頁。值得一提的是，查詢層另外保留一份本地院所與行政區資料作為降級後備：當後端暫時無法回應時，前台仍會顯示院所清單而非空白畫面，讓品牌形象不因後端狀況受損。
後端沿用母站的 Filament 後台，品牌端可自行維護合作院所（含類型、VIP 標記、排序）、行政區資料與索取資訊詢問單，無需為了子品牌另外學一套管理介面。
同一份程式碼可依環境變數切換部署目標：設定 IS_NETLIFY=true 時走 Netlify adapter，否則走 Node standalone 模式搭配 PM2 部署於自有伺服器。這讓專案不被任何單一平台綁定，未來要搬遷或改為自架，不需要改動任何應用程式碼。
頁面內建 Product、Brand、Organization 三種 JSON-LD 結構化資料，讓搜尋引擎能正確理解 BioChange 是一個品牌、CellFoam 系列是其產品；搭配完整的 Open Graph 與中英雙語路由設定，兼顧搜尋結果呈現與社群分享效果。
