TablerForNet: Tabler 기반 Blazor용 SEO 최적화 프레임워크

Blazor Server | VS 2022 | .NET 8 | TablerForNet 최근 업데이트 10/11/2024

TablerForNet으로 Blazor 개발을 향상시키세요. 이 최첨단 프레임워크는 반응형 디자인과 SEO 기능을 통합하여 개발자가 뛰어난 사용자 경험을 제공할 뿐만 아니라 강력한 검색 엔진 가시성을 달성하는 웹 응용 프로그램을 만들 수 있도록 합니다.

TablerForNet 설치 단계별 가이드

이 가이드는 새로운 Blazor Server .NET 7 프로젝트에 대한 설치를 보여줍니다. 다음 단계를 따르세요.

1단계: 'TablerForNet' NuGet 패키지를 설치합니다.
2단계: 필요한 '사용' 을 통합하고 Program.cs 파일에 TablerForNet 서비스를 등록합니다.
3단계: 필요한 '사용' 을 _imports.razor 파일에 통합합니다.
4단계: PageTitle 태그를 수정합니다.
5단계: _Host.cshtml 파일에 'tablerForNet' CSS 및 JS 파일을 추가합니다.
6단계: 부트스트랩 및 관련 자산을 제거합니다.
7단계: 그에 따라 NavMenu.razor를 업데이트합니다.
8단계: MainLayout.razor를 수정합니다.
9단계: 색인, 카운터 및 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단계: 페이지 제목 태그 충돌

TablerForNet의 PageTitle 태그와 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단계: 부트스트랩 삭제

CSS 디렉토리 내의 Bootstrap 폴더를 지웁니다. 또한 태블러 아이콘을 사용할 것이므로 '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 프로젝트에 성공적으로 통합했습니다. 이 단계를 완료하면 이 강력한 프레임워크의 잠재력을 최대한 활용할 수 있습니다. 향상된 기능을 활용하고 뛰어난 웹 애플리케이션을 만드세요. 어려움이 있다면, 모든 장애물은 성장을 위한 기회라는 것을 기억하세요. 즐거운 코딩 되세요!