Blazor 管理介面
使用 TablerForNet Blazor UI 範式打造實用管理介面
TablerForNet 為 Blazor 團隊提供基於 Tabler 的管理介面，包含現成的導覽、卡片、表單、圖示和版面元件。適合用於工具型應用，而非需要自訂視覺風格的行銷頁面。
本指南聚焦實務操作：安裝 NuGet 套件、註冊服務、有計畫地替換預設 Bootstrap 資產、遷移版面元件，並透過元資料與路由處理 SEO，而非 UI 元件。
快速解答
當 Blazor 應用作為後台系統時，TablerForNet 很實用
Tabler 風格元件庫適合需要密集導覽、狀態卡片、表單、表格、篩選器及重複使用儀表板畫面的使用者。若頁面主要是編輯內容、登陸頁或需自有設計系統的品牌體驗，則較不適用。
適用性檢查
只有當重複工具畫面是問題時，才使用管理 UI 框架
當多個畫面共用導覽、表單範式、間距、圖示和狀態元件時，此庫可節省時間。若每頁需不同品牌風格或自訂互動模式，可能反而拖慢開發。
內部工具與儀表板
當使用者在資料表格、篩選器、詳細頁、設定畫面及流程密集的管理區域花費大量時間時，使用 TablerForNet。
一致的 CRUD 畫面
多頁面重複使用表單、表格、卡片、徽章、空狀態和工具列操作時，共用元件風格有助統一。
小型公開內容頁面
完整管理 UI 框架通常不適用於文章、登陸頁、文件或需品牌設計主導的頁面。
混合 Bootstrap 與 Tabler 樣式
除非有明確遷移計畫，否則不要同時啟用兩套視覺基礎。小型 CSS 衝突日後調試成本高。
目錄
安裝
安裝套件、註冊服務，再有計畫地替換預設資產
分階段提交或設置檢查點進行整合。TablerForNet 會改變應用程式版面，分開套件設定、匯入、靜態資產、導覽和版面變更更易審查。
新增 NuGet 套件
使用套件管理器或 .NET CLI，並在更改版面前執行 dotnet restore。
dotnet add package TablerForNet註冊 TablerForNet
將服務註冊放在 Blazor 設定附近，方便未來升級查找。
using TablerForNet;
builder.Services.AddTablerForNet();匯入命名空間
只加入實際使用的命名空間，避免其他庫暴露相似元件名稱時隱藏型別衝突。
@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.Flags載入 TablerForNet 資產
在應用模型使用的主機文件或版面路徑中，加入 CSS 和 JavaScript 捆綁包一次。
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>遷移
只有確定版面擁有該頁面後，才替換 Bootstrap 預設
預設 Blazor 範本使用 Bootstrap、起始 NavMenu 和簡單頁面容器。TablerForNet 可替換這些元件，但須有意識地操作，避免遺留重複 CSS、混合圖示集或兩個競爭的頁面標題元件。
盤點現有版面
列出擁有導覽、頁面容器、圖示、Bootstrap 參考及頁面標題使用的範本檔案。
逐層替換
從資產和匯入開始，接著遷移 NavMenu、MainLayout 及簡單頁面，再處理複雜畫面。
解決元件名稱衝突
若 PageTitle 或其他元件名稱存在於兩個命名空間，請明確限定並保持 using 清單簡潔。
檢視響應式行為
在宣告遷移完成前，開啟桌面與行動裝置寬度。管理導覽通常在小螢幕先出現斷點問題。
移除預設 Bootstrap 參考
保持單一視覺基礎。保留範本 CSS 可能導致後續出現看似隨機的小版面錯誤。
<!-- Remove these default template references when TablerForNet owns the visual layout. -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />處理 PageTitle 衝突
若兩個庫都提供 PageTitle 元件，請明確指定使用的元件或移除衝突的 using。
<TablerForNet.Components.PageTitle>
Dashboard
</TablerForNet.Components.PageTitle>版面
將導覽和頁面框架移入版面，再進行畫面美化
乾淨的版面讓後續頁面工作更有規律：統一導覽模型、內容容器、圖示系統及頁面操作位置。先從這裡開始，再調整個別頁面樣式。
導覽範例
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">
<NavbarMenu>
<NavbarMenuItem Href="/" Text="Home">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Home" />
</MenuItemIcon>
</NavbarMenuItem>
<NavbarMenuItem Href="/reports" Text="Reports">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Chart_bar" />
</MenuItemIcon>
</NavbarMenuItem>
</NavbarMenu>
</Navbar>版面範例
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<main class="container-xl py-3">
@Body
</main>
</div>驗證
檢查渲染後的應用程式，不只套件安裝
頁面編譯後，在瀏覽器檢視實際 UI。導覽、響應式斷點、焦點狀態、重複 CSS 和元資料輸出比套件管理器輸出更容易視覺發現問題。
- 執行應用程式並開啟使用新版面的頁面。
- 確認 Bootstrap 與 TablerForNet 資產不互相衝突。
- 檢查導覽、焦點狀態、圖示及響應式斷點。
- 檢視公開頁面的標題、H1、元描述、正規 URL 和 JSON-LD 輸出。
- 保持套件設定、版面遷移及 SEO 元資料變更可分別審查。
常見問題
TablerForNet 為 Blazor 應用帶來什麼？
提供基於 Tabler 的 Blazor UI 元件，適合管理風格應用：導覽、卡片、表單範式、圖示、版面元件及儀表板結構。
使用 TablerForNet 時應移除 Bootstrap 嗎？
通常是。TablerForNet 建立於 Tabler 視覺系統，保留預設 Bootstrap 範本資產會造成間距、按鈕、圖示及版面規則重複。
TablerForNet 適合所有 Blazor 網站嗎？
不適合。它適用於管理畫面、內部工具、儀表板及資料密集型應用。對於編輯頁面、登陸頁或高度品牌化公開網站，自訂設計較乾淨。
TablerForNet 解決 Blazor SEO 嗎？
不會。它能幫助建立更乾淨介面，但 SEO 仍依賴渲染內容、標題、描述、正規 URL、hreflang 連結、Open Graph 資料及與可見頁面匹配的 JSON-LD。
我可以在 Blazor WebAssembly 使用 TablerForNet 嗎？
可以，但前端規則相同：保持捆綁包合理、資產只載入一次，且當 SEO 重要時，公開內容應以渲染 HTML 提供。
如何處理 PageTitle 衝突？
明確使用元件的命名空間，或移除衝突的 using。這比依賴編譯器優先找到的 PageTitle 更清晰。