BPS 網頁前端架構
為 BPS 這樣的高階神經科學研究機構建構數位平台時，核心挑戰在於如何將複雜、深奧的科學研究，轉化為條理分明、合乎邏輯且極致純淨的網頁介面。神經科學講求的是網絡與精準度——而我們希望這個網站的架構，也能完美镜像這些原則。
作為這個網站的網頁開發者，我的目標是將清晰的科學呈現與現代工程實踐相結合。以下將帶你一窺網頁底層的技術奧秘，看我們如何運用現代開發框架、打造無縫的微互動，並在整個平台中維持嚴格的視覺一致性。
穩固的結構骨幹：WordPress + Roots Sage 框架
神經科學研究會產生龐大的文獻、實驗數據與計畫更新。為了高效管理這些內容同時避免產生臃腫的 HTML 程式碼，我們採用了「程式碼優先」的開發策略。BPS 架設於 WordPress 之上，但我們透過 Roots Sage 框架 開發了客製化佈景主題，徹底擺脫了傳統主題的凌亂與包袱。
使用 Sage 框架讓我們能將這個平台當作現代 Web 應用程式來打造：
- Blade 模板引擎： Sage 將 Laravel 著名的 Blade 模板引擎引進了 WordPress。這讓我們能為 Elite 和 Neulive 等不同研究區塊建立乾淨的模組化組件，確保研究資料的排版高度組織化且能重複使用。
- 現代建置工具與資產管道： 透過內建的現代資產打包工具，Sage 會自動優化我們的指令碼、編譯樣式表並處理圖檔壓縮，這直接轉化為極速的網頁載入時間。
- 清晰的權責分離： 我們將後端的資料處理邏輯與前端的標記語言（Markup）完全分離，確保網站能輸出精簡、高效的純淨 HTML，免受平台肥大之苦。
突觸般流暢的動態：微互動與滑順過渡
在神經科學中，訊號傳遞的細微時間差往往決定了訊息的意義。我們將同樣的哲學帶進了使用者介面。在 Elite 和 Neulive 的研究空間中，我們極其重視細緻的動畫效果，藉此引導訪客的視線，同時避免造成不必要的視覺干擾。
- 硬體加速過渡效果： 為了保證每個淡入效果和懸停（Hover）互動都能穩定在 60 FPS 的絲滑畫質，我們堅持只對
transform和opacity這類屬性做動畫處理。這會直接觸發使用者裝置的 GPU（圖形處理器），而非轉嫁給 CPU，即使在手機上瀏覽也絕不卡頓。 - 滾動驅動的顯現狀態： 當你向下閱讀研究成果時，網頁元素會順暢地浮現。瀏覽器只會在元素真正進入視窗的當下才觸發這些進場動畫，讓滾動瀏覽的效能維持得非常滑順。
嚴格的視覺一致性
科學的清晰度建立在嚴謹的結構之上，因此我們在每個頁面上都維持了近乎強迫症般的視覺一致性。
我們建立了一套嚴格、統一的設計系統，並直接對應到樣式表中。不論是字型大小、行高、網格間距還是色彩數值，全部透過中央主題設定檔進行控制。不論你是在瀏覽結構嚴密的 Elite 數據集，還是在探索視覺強烈的 Neulive 創新計畫，網站都維持著完全相同的空間節奏與視覺邏輯。