TablerForNet: een SEO-geoptimaliseerd kader voor Blazor op basis van Tabler

Verhoog uw Blazor-ontwikkeling met TablerForNet. Dit state-of-the-art framework integreert responsief ontwerp met SEO-mogelijkheden, waardoor ontwikkelaars webapplicaties kunnen maken die niet alleen uitstekende gebruikerservaringen bieden, maar ook een sterke zichtbaarheid van zoekmachines bereiken.

Stapsgewijze handleiding voor het installeren van TablerForNet

De gids toont de installatie op een nieuw Blazor Server .NET 7-project. Houd u alstublieft aan de volgende stappen:

• Stap 1: Installeer het NuGet-pakket 'TablerForNet'.
• Stap 2: Neem de nodige 'usings' op en registreer de TablerForNet-service in het Program.cs-bestand.
• Stap 3: Integreer vereiste 'usings' in het bestand _imports.razor.
• Stap 4: Wijzig de PageTitle-tag.
• Stap 5: Voeg 'tablerForNet' CSS- en JS-bestanden toe aan het bestand _Host.cshtml.
• Stap 6: Verwijder Bootstrap en gerelateerde activa.
• Stap 7: Werk NavMenu.razor dienovereenkomstig bij.
• Stap 8: Verfijn MainLayout.razor.
• Stap 9: Pas de pagina 's Index, Teller en FetchData aan.

Stap 1: NuGet-pakket installeren

Ga verder volgens de richtlijnen op nuget.org.

Stap 2: TablerForNet-service registreren

using TablerForNet;
 builder.Services.AddTablerForNet();

Stap 3: Neem 'usings' op

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

Stap 4: PageTitle Tag Conflict

Er is een naamgevingsbotsing tussen de PageTitle-tag van TablerForNet en de PageTitle-tag van Microsoft. Het wordt geadviseerd om het eerste te elimineren of expliciet te hernoemen naar 'TablerForNet.Components.PageTitle'. Zorg voor wijzigingen in de volgende bestanden:

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

Stap 5: CSS en JS integreren

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

Stap 6: Bootstrap verwijderen

Wis de Bootstrap-map in de CSS-directory. Verwijder bovendien de map 'open-iconic', omdat je de tabler-pictogrammen gaat gebruiken. Verwijder de bijbehorende link in het bestand _Host.cshtml zoals hieronder weergegeven:

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

Stap 7: NavMenu-revisie

<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;
	}
}

Stap 8: MainLayout Fine-tuning

@inherits LayoutComponentBase

<NavMenu />

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

Stap 9: Andere pagina 's aanpassen

Zoals hieronder opgemerkt, is er een 'div' -tag toegevoegd aan de indexpagina. Het wordt aanbevolen om dit op alle andere pagina 's te repliceren.

@page "/"

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

	Welcome to your new app.

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

Gefeliciteerd! Je hebt TablerForNet met succes geïntegreerd in je Blazor-project. Met deze stappen ben je goed op weg om het volledige potentieel van dit krachtige raamwerk te benutten. Omarm de verbeterde mogelijkheden en creëer uitstekende webapplicaties. Mocht je uitdagingen tegenkomen, onthoud dan dat elke hindernis een kans is om te groeien. Veel plezier met coderen!