TablerForNet: uma estrutura otimizada para SEO para Blazor com base no Tabler

Eleve o seu desenvolvimento Blazor com TablerForNet. Esta estrutura de última geração integra design responsivo com recursos de SEO, permitindo que os desenvolvedores criem aplicativos da web que não apenas ofereçam excelentes experiências ao usuário, mas também alcancem uma forte visibilidade nos mecanismos de pesquisa.

Guia passo a passo para instalar o TablerForNet

O guia mostra a instalação em um novo projeto Blazor Server .NET 7. Por favor, siga as seguintes etapas:

• Etapa 1: Instale o pacote NuGet 'TablerForNet'.
• Etapa 2: Incorpore os 'usos' necessários e registre o serviço TablerForNet no arquivo Program.cs.
• Etapa 3: Integre os "usos" necessários no arquivo _imports.razor.
• Etapa 4: Modifique a tag PageTitle.
• Etapa 5: Adicione arquivos CSS e JS 'tablerForNet' ao arquivo _Host.cshtml.
• Etapa 6: Remova o Bootstrap e os ativos relacionados.
• Etapa 7: Atualize o NavMenu.razor de acordo.
• Passo 8: Refine MainLayout.razor.
• Etapa 9: Ajuste as páginas Index, Counter e FetchData.

Etapa 1: Instalação do Pacote NuGet

Proceda de acordo com as diretrizes em nuget.org.

Etapa 2: Registrar o serviço TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Etapa 3: Incorpore "usos"

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

Etapa 4: Conflito de Tag PageTitle

Há uma colisão de nomenclatura entre a tag PageTitle do TablerForNet e a tag PageTitle da Microsoft. É aconselhável eliminar o primeiro ou renomeá-lo explicitamente para 'TablerForNet.Components.PageTitle'. Assegurar modificações nos seguintes arquivos:

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

Etapa 5: Integre CSS e JS

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

Etapa 6: Excluir Bootstrap

Apague a pasta Bootstrap dentro do diretório CSS. Além disso, remova a pasta 'open-iconic', pois você usará os ícones do tabler. Elimine o link associado no arquivo _Host.cshtml como mostrado abaixo:

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

Etapa 7: Revisão do 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;
	}
}

Etapa 8: Ajuste fino do MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Passo 9: Ajustar Outras Páginas

Como observado abaixo, uma tag 'div' foi adicionada à página de índice. Recomenda-se replicar isso em todas as outras 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>

Parabéns! Você integrou com sucesso o TablerForNet ao seu projeto Blazor. Com essas etapas concluídas, você está no caminho certo para aproveitar todo o potencial dessa estrutura poderosa. Abrace os recursos aprimorados e crie aplicativos web excepcionais. Se você encontrar algum desafio, lembre-se de que cada obstáculo é uma oportunidade de crescimento. Boa programação!