TablerForNet: un framework ottimizzato per SEO per Blazor basato su Tabler

Migliora il tuo sviluppo Blazor con TablerForNet. Questo framework all'avanguardia integra il responsive design con le funzionalità SEO, consentendo agli sviluppatori di creare applicazioni web che non solo offrono esperienze utente eccezionali, ma anche una forte visibilità sui motori di ricerca.

Guida dettagliata all'installazione di TablerForNet

La guida mostra l'installazione su un nuovo progetto Blazor Server .NET 7. Si prega di attenersi ai seguenti passaggi:

• Passaggio 1: installare il pacchetto NuGet "TablerForNet".
• Passaggio 2: incorporare gli "utilizzi" necessari e registrare il servizio TablerForNet nel file Program.cs.
• Passaggio 3: Integra gli "utilizzi" richiesti nel file _imports.razor.
• Passaggio 4: modifica il tag PageTitle.
• Passaggio 5: aggiungi i file CSS e JS "tablerForNet" al file _Host.cshtml.
• Passaggio 6: Rimuovi Bootstrap e le risorse correlate.
• Passo 7: Aggiornare NavMenu.razor di conseguenza.
• Passaggio 8: perfeziona MainLayout.razor.
• Passaggio 9: regolare le pagine Indice, Contatore e RecuperaDati.

Passaggio 1: installazione del pacchetto NuGet

Procedere secondo le linee guida su nuget.org.

Passaggio 2: registrare il servizio TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Passaggio 3: incorpora gli "usi"

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

Passaggio 4: Conflitto tag PageTitle

C'è una collisione di denominazione tra il tag PageTitle di TablerForNet e il tag PageTitle di Microsoft. Si consiglia di eliminare il primo o di rinominarlo esplicitamente in "TablerForNet.Components.PageTitle". Garantire le modifiche nei seguenti file:

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

Passaggio 5: Integra CSS e JS

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

Passaggio 6: Elimina Bootstrap

Cancellare la cartella Bootstrap all'interno della directory CSS. Inoltre, rimuovi la cartella "open-iconic" poiché utilizzerai le icone tabler. Eliminare il link associato nel file _Host.cshtml come mostrato di seguito:

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

Passaggio 7: NavMenu Revisione

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

Passaggio 8: Fine-tuning MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Passaggio 9: modifica altre pagine

Come osservato di seguito, è stato aggiunto un tag "div" alla pagina dell'indice. Si consiglia di replicarlo in tutte le altre pagine.

@page "/"

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

	Welcome to your new app.

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

Congratulazioni! Hai integrato con successo TablerForNet nel tuo progetto Blazor. Una volta completati questi passaggi, sei sulla buona strada per sfruttare appieno il potenziale di questo potente framework. Abbraccia le funzionalità avanzate e crea applicazioni web eccezionali. In caso di difficoltà, ricorda che ogni ostacolo è un'opportunità di crescita. Buona programmazione!