TablerForNet Blazor 安裝指南與管理模板

Github TranslateForNet
NuGet TablerForNet · latest
軟體堆疊 Blazor Server · VS 2026 · .NET 10 · TablerForNet
最後更新 2026/1/29

完整步驟教學，將 TablerForNet 整合至 Blazor Server 應用，取代 Bootstrap，打造現代響應式管理介面框架。

TablerForNet 管理介面佈局，適用於 Blazor，展示現代化儀表板元件與導覽
基於 Tabler 的現代 Blazor 管理介面，具響應式佈局與可重用 UI 元件

使用 TablerForNet 提升您的 Blazor 開發體驗。此先進框架結合響應式設計與 SEO 功能，助您打造優質且具搜尋引擎優勢的網頁應用。

TablerForNet 基於熱門 Tabler 管理模板，為 Blazor 提供超過 300 個 UI 元件。結合 完善的 SEO 元資料 及 文化感知路由, 您能打造具備生產力且搜尋引擎排名優異的應用程式。

若您是 Blazor 新手，請先參考我們的 Blazor 入門指南 以了解框架基礎。

目錄

TablerForNet 安裝逐步教學

本指南示範在全新 Blazor Server .NET 7 專案中安裝，請依照以下步驟操作：

  • 步驟 1：安裝 'TablerForNet' NuGet 套件。
  • 步驟 2：加入必要的 'usings'，並在 Program.cs 註冊 TablerForNet 服務。
  • 步驟 3：將所需 'usings' 加入 _imports.razor 檔案。
  • 步驟 4：修改 PageTitle 標籤。
  • 步驟 5：將 'tablerForNet' CSS 與 JS 檔案加入 _Host.cshtml。
  • 步驟 6：移除 Bootstrap 及相關資源。
  • 步驟 7：依需求更新 NavMenu.razor。
  • 步驟 8：優化 MainLayout.razor。
  • 步驟 9：調整 Index、Counter 與 FetchData 頁面。

步驟 1：NuGet 套件安裝

請依照 nuget.org 指示進行。

NuGet TablerForNet · latest

步驟 2：註冊 TablerForNet 服務

C#Program.cs
using TablerForNet;
 builder.Services.AddTablerForNet();

步驟 3：加入 'usings'

Razor_Imports.razor
@using TablerForNet;
 @using TablerForNet.Components
 @using GhostlyInc.Components.Icons
 @using TablerForNet.Flags

步驟 4：PageTitle 標籤衝突

TablerForNet 的 PageTitle 標籤與 Microsoft 內建 PageTitle 衝突，建議移除前者或明確改名為 'TablerForNet.Components.PageTitle'。請修改以下檔案：

  • App.razor
  • Index.razor
  • Counter.razor
  • Fetchdata.razor
  • MainLayout.razor

步驟 5：整合 CSS 與 JS

HTML_Host.cshtml
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

步驟 6：刪除 Bootstrap

刪除 CSS 目錄下的 Bootstrap 資料夾，並移除 'open-iconic' 資料夾，因為將使用 tabler 圖示。請同時刪除 _Host.cshtml 中相關連結，如下所示：

Razor_Host.cshtml
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

步驟 7：重新設計 NavMenu

RazorNavMenu.razor
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" />
			</MenuItemIcon>
		</NavbarMenuItem>

步驟 8：微調 MainLayout

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

步驟 9：調整其他頁面

如以下所示，index 頁面新增了 'div' 標籤，建議在其他頁面也採用相同做法。

RazorIndex.razor
@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

恭喜您成功將 TablerForNet 整合至 Blazor 專案！完成這些步驟後，您已能充分發揮此強大框架的潛力。善用其強大功能，打造卓越的網頁應用。遇到挑戰時，請記得每個困難都是成長的機會。祝您開發順利！

常見問題

關於 TablerForNet 安裝與使用的常見問題