TablerForNet : un cadre optimisé pour le référencement pour Blazor basé sur Tabler

Améliorez votre développement Blazor avec TablerForNet. Ce framework de pointe intègre une conception réactive avec des capacités de référencement, permettant aux développeurs de créer des applications Web qui offrent non seulement des expériences utilisateur exceptionnelles, mais également une forte visibilité sur les moteurs de recherche.

Guide étape par étape pour installer TablerForNet

Le guide présente l'installation sur un nouveau projet Blazor Server .NET 7. Veuillez suivre les étapes suivantes :

• Étape 1 : Installez le package NuGet « TablerForNet ».
• Étape 2 : Incorporez les « utilisations » nécessaires et enregistrez le service TablerForNet dans le fichier Program.cs.
• Étape 3 : Intégrez les « utilisations » requises dans le fichier _imports.razor.
• Étape 4 : Modifiez la balise PageTitle.
• Étape 5 : Ajoutez les fichiers CSS et JS 'tablerForNet' au fichier _Host.cshtml.
• Étape 6 : Supprimez Bootstrap et les ressources associées.
• Étape 7 : Mettez à jour NavMenu.razor en conséquence.
• Étape 8 : affinez MainLayout.razor.
• Étape 9 : Ajustez les pages Index, Counter et FetchData.

Étape 1 : Installation du package NuGet

Procédez conformément aux directives sur nuget.org.

Étape 2 : Enregistrez le service TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Étape 3 : Incorporer les « usings »

@using TablerForNet;
 @using TablerForNet.Components
 @using TablerForNet.Icons
 @using TablerForNet.Flags

Étape 4 : Conflit de balise PageTitle

Il y a une collision de nommage entre la balise PageTitle de TablerForNet et la balise PageTitle de Microsoft. Il est conseillé d'éliminer le premier ou de le renommer explicitement en « TablerForNet.Components.PageTitle ». Assurer les modifications dans les fichiers suivants :

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

Étape 5 : Intégrer CSS et JS

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

Étape 6 : Supprimer Bootstrap

Effacez le dossier Bootstrap dans le répertoire CSS. De plus, supprimez le dossier « open-iconic » puisque vous utiliserez les icônes de tabler. Supprimez le lien associé dans le fichier _Host.cshtml comme indiqué ci-dessous :

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

Étape 7 : Révision du NavMenu

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

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

@code {
	private bool collapseNavMenu = true;

	private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

	private void ToggleNavMenu()
	{
		collapseNavMenu = !collapseNavMenu;
	}
}

Étape 8 : Réglage fin de MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Étape 9 : Ajuster d'autres pages

Comme observé ci-dessous, une balise « div » a été ajoutée à la page d'index. Il est recommandé de le reproduire sur toutes les autres pages.

@page "/"

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

	Welcome to your new app.

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

Félicitations ! Vous avez réussi à intégrer TablerForNet dans votre projet Blazor. Avec ces étapes terminées, vous êtes sur la bonne voie pour exploiter tout le potentiel de ce cadre puissant. Adoptez les capacités améliorées et créez des applications Web exceptionnelles. Si vous rencontrez des défis, rappelez-vous que chaque obstacle est une opportunité de croissance. Bon codage !