TablerForNet: un marco optimizado para SEO para Blazor basado en Tabler

Mejore su desarrollo de Blazor con TablerForNet. Este marco de vanguardia integra el diseño receptivo con las capacidades de SEO, lo que permite a los desarrolladores crear aplicaciones web que no solo brindan experiencias de usuario sobresalientes, sino que también logran una fuerte visibilidad en los motores de búsqueda.

Guía paso a paso para instalar TablerForNet

La guía muestra la instalación en un nuevo proyecto .NET 7 de Blazor Server. Por favor, siga los siguientes pasos:

• Paso 1: Instale el paquete NuGet 'TablerForNet'.
• Paso 2: Incorpore los 'usings' necesarios y registre el servicio TablerForNet en el archivo Program.cs.
• Paso 3: Integre los 'usings' requeridos en el archivo _imports.razor.
• Paso 4: Modifique la etiqueta PageTitle.
• Paso 5: Agregue archivos CSS y JS 'tablerForNet' al archivo _Host.cshtml.
• Paso 6: Retire Bootstrap y los activos relacionados.
• Paso 7: Actualice NavMenu.razor en consecuencia.
• Paso 8: refine MainLayout.razor.
• Paso 9: Ajuste las páginas Index, Counter y FetchData.

Paso 1: Instalación del paquete NuGet

Proceda de acuerdo con las pautas en nuget.org.

Paso 2: Registrar servicio TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Paso 3: Incorporar 'usings'

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

Paso 4: Conflicto de etiquetas PageTitle

Hay una colisión de nombres entre la etiqueta PageTitle de TablerForNet y la etiqueta PageTitle de Microsoft. Se recomienda eliminar el primero o renombrarlo explícitamente a 'TablerForNet.Components.PageTitle'. Asegurar modificaciones en los siguientes archivos:

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

Paso 5: Integrar CSS y JS

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

Paso 6: Eliminar Bootstrap

Borre la carpeta Bootstrap dentro del directorio CSS. Además, elimina la carpeta «open-iconic», ya que usarás los iconos del tabulador. Elimina el enlace asociado en el archivo _Host.cshtml como se muestra a continuación:

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

Paso 7: Revisión de 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;
	}
}

Paso 8: MainLayout Fine-tuning

@inherits LayoutComponentBase

<NavMenu />

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

Paso 9: Ajustar otras páginas

Como se observa a continuación, se ha añadido una etiqueta 'div' a la página de índice. Se recomienda replicar esto en todas las demás páginas.

@page "/"

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

	Welcome to your new app.

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

¡Felicidades! Ha integrado con éxito TablerForNet en su proyecto Blazor. Una vez completados estos pasos, está en camino de aprovechar todo el potencial de este poderoso marco. Adopte las capacidades mejoradas y cree aplicaciones web sobresalientes. Si te encuentras con algún desafío, recuerda que cada obstáculo es una oportunidad de crecimiento. ¡Feliz codificación!