TablerForNet: Ett SEO-optimerat ramverk för Blazor baserat på Tabler

Förbättra din Blazor-utveckling med TablerForNet. Detta toppmoderna ramverk integrerar responsiv design med SEO-funktioner, vilket gör det möjligt för utvecklare att skapa webbapplikationer som inte bara levererar enastående användarupplevelser utan också uppnår stark sökmotorsynlighet.

Steg-för-steg-guide för installation av TablerForNet

Guiden visar installationen på ett nytt Blazor Server .NET 7-projekt. Vänligen följ följande steg:

• Steg 1: Installera NuGet-paketet "TablerForNet".
• Steg 2: Införliva nödvändiga "användningar" och registrera TablerForNet-tjänsten i filen Program.cs.
• Steg 3: Integrera nödvändiga "användningar" i filen _imports.razor.
• Steg 4: Ändra PageTitle-taggen.
• Steg 5: Lägg till "tablerForNet" CSS- och JS-filer till _Host.cshtml-filen.
• Steg 6: Ta bort Bootstrap och relaterade tillgångar.
• Steg 7: Uppdatera NavMenu.razor i enlighet med detta.
• Steg 8: Förfina MainLayout.razor.
• Steg 9: Justera index-, räknar- och hämtningsdatasidor.

Steg 1: NuGet paketinstallation

Fortsätt enligt riktlinjerna på nuget.org.

Steg 2: Registrera TablerForNet-tjänst

using TablerForNet;
 builder.Services.AddTablerForNet();

Steg 3: Införliva "användningar"

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

Steg 4: Konflikt för sidtiteltagg

Det finns en namngivningskollision mellan PageTitle-taggen i TablerForNet och Microsofts PageTitle-tagg. Det rekommenderas att antingen eliminera den tidigare eller uttryckligen byta namn på den till "TablerForNet.Components.PageTitle". Säkerställ ändringar i följande filer:

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

Steg 5: Integrera CSS och JS

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

Steg 6: Radera Bootstrap

Radera Bootstrap-mappen i CSS-katalogen. Ta dessutom bort mappen "open-iconic" eftersom du kommer att använda tabler-ikonerna. Eliminera den associerade länken i _Host.cshtml-filen enligt nedan:

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

Steg 7: NavMenu-översyn

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

Steg 8: Finjustering av MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Steg 9: Justera andra sidor

Som observerats nedan har en "div" -tagg lagts till på indexsidan. Det rekommenderas att replikera detta på alla andra sidor.

@page "/"

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

	Welcome to your new app.

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

Grattis! Du har framgångsrikt integrerat TablerForNet i ditt Blazor-projekt. När dessa steg är slutförda är du på god väg att utnyttja den fulla potentialen i detta kraftfulla ramverk. Omfamna de förbättrade funktionerna och skapa enastående webbapplikationer. Om du stöter på några utmaningar, kom ihåg att varje hinder är en möjlighet till tillväxt. Glad kodning!