TablerForNet Blazor：インストールガイドと管理テンプレート
TablerForNetをBlazor Serverに統合する完全ステップバイステップガイド。BootstrapをTablerベースの最新レスポンシブ管理UIに置き換えます。
TablerForNetでBlazor開発を強化。レスポンシブ設計とSEO機能を統合し、優れたユーザー体験と高い検索エンジン評価を両立します。
TablerForNetは人気のTabler管理テンプレートを基に、300以上のUIコンポーネントをBlazorに提供します。 適切なSEOメタデータ および 文化対応ルーティング, 検索エンジンで上位表示される本番対応アプリケーションを構築できます。
Blazor初心者の方は、まずこちらから始めてください。 Blazorとはガイド フレームワークの基本を理解するために。
目次
TablerForNetインストールのステップバイステップガイド
新規Blazor Server .NET 7プロジェクトへのインストール手順を示します。以下のステップに従ってください。
- ステップ1：'TablerForNet' NuGetパッケージをインストールします。
- ステップ2：必要な'usings'を追加し、Program.csでTablerForNetサービスを登録します。
- ステップ3：_imports.razorファイルに必要な'usings'を追加します。
- ステップ4：PageTitleタグを修正します。
- ステップ5：_Host.cshtmlに'tablerForNet'のCSSとJSファイルを追加します。
- ステップ6：Bootstrapおよび関連資産を削除します。
- ステップ7：NavMenu.razorを適切に更新します。
- ステップ8：MainLayout.razorを調整します。
- ステップ9：Index、Counter、FetchDataページを調整します。
ステップ1：NuGetパッケージのインストール
nuget.orgの指示に従って進めてください。
ステップ2：TablerForNetサービスの登録
using TablerForNet;
builder.Services.AddTablerForNet();ステップ3：'usings'の追加
@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の統合
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>ステップ6：Bootstrapの削除
CSSディレクトリ内のBootstrapフォルダを削除します。Tablerアイコンを使用するため、'open-iconic'フォルダも削除してください。_Host.cshtmlの関連リンクも以下のように削除します。
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />ステップ7：NavMenuの全面改修
<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の微調整
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<div class="container-fluid mt-2">
@Body
<br />
</div>
</div>ステップ9：他ページの調整
下記のようにindexページに'div'タグを追加しました。他のページにも同様の対応を推奨します。
@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プロジェクトに無事統合できました。これで強力なフレームワークの全機能を活用できます。さらなる機能を活かし、優れたWebアプリを作成しましょう。困難に直面しても、それは成長のチャンスです。良いコーディングを！