TablerForNet: SEO-оптимизированный фреймворк для Blazor на основе Tabler

Улучшите разработку Blazor с помощью TablerForNet. Этот современный фреймворк объединяет адаптивный дизайн с возможностями SEO, позволяя разработчикам создавать веб-приложения, которые не только обеспечивают выдающийся пользовательский опыт, но и обеспечивают высокую видимость в поисковых системах.

Пошаговое руководство по установке TablerForNet

Руководство демонстрирует установку на новом проекте Blazor Server .NET 7. Пожалуйста, выполните следующие действия:

• Шаг 1: Установите пакет NuGet 'TablerForNet'.
• Шаг 2: Включите необходимые «использования» и зарегистрируйте службу TablerForNet в файле Program.cs.
• Шаг 3: Интегрируйте необходимые «usings» в файл _imports.razor.
• Шаг 4. Измените тег PageTitle.
• Шаг 5. Добавьте файлы CSS и JS 'tablerForNet' в файл _Host.cshtml.
• Шаг 6. Удалите Bootstrap и связанные с ним ресурсы.
• Шаг 7: Обновите NavMenu.razor соответствующим образом.
• Шаг 8: Уточните MainLayout.razor.
• Шаг 9: Отрегулируйте страницы Index, Counter и FetchData.

Шаг 1. Установка пакета NuGet

Действуйте в соответствии с рекомендациями на nuget.org.

Шаг 2. Регистрация службы TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Шаг 3. Добавьте «использование»

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

Шаг 4: Конфликт тегов PageTitle

Существует коллизия имен между тегом PageTitle TablerForNet и тегом Microsoft PageTitle. Рекомендуется либо удалить первое, либо явно переименовать его в «TablerForNet.Components.PageTitle». Обеспечьте внесение изменений в следующие файлы:

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

Шаг 5. Интеграция CSS и JS

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

Шаг 6. Удаление начальной загрузки

Удалите папку Bootstrap в каталоге CSS. Кроме того, удалите папку «open-iconic», так как вы будете использовать значки таблера. Удалите связанную ссылку в файле _Host.cshtml, как показано ниже:

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

Шаг 7: Капитальный ремонт 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;
	}
}

Шаг 8: Тонкая настройка основного макета

@inherits LayoutComponentBase

<NavMenu />

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

Шаг 9: Скорректируйте другие страницы

Как показано ниже, на страницу индекса был добавлен тег div. Рекомендуется повторить это на всех других страницах.

@page "/"

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

	Welcome to your new app.

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

Поздравляем! Вы успешно интегрировали TablerForNet в свой проект Blazor. Выполнив эти шаги, вы уже на пути к полному использованию потенциала этой мощной платформы. Используйте расширенные возможности и создавайте выдающиеся веб-приложения. Если вы столкнетесь с какими-либо проблемами, помните, что каждое препятствие - это возможность для роста. Счастливого кодирования!