TablerForNet Blazor 설치 가이드 및 관리자 템플릿
Blazor Server에 TablerForNet을 통합하는 단계별 가이드입니다. Bootstrap을 Tabler 기반의 최신 반응형 관리자 UI 프레임워크로 대체하세요.
TablerForNet으로 Blazor 개발을 향상하세요. 반응형 디자인과 SEO 기능을 결합해 뛰어난 사용자 경험과 검색 엔진 노출을 동시에 제공합니다.
TablerForNet은 인기 Tabler 관리자 템플릿을 기반으로 300개 이상의 UI 컴포넌트를 Blazor에 제공합니다. 여기에 적절한 SEO 메타데이터 및 문화 인식 라우팅, 검색 엔진 최적화된 실무용 애플리케이션을 구축할 수 있습니다.
Blazor가 처음이라면, 다음 가이드부터 시작하세요. Blazor란 무엇인가 가이드 프레임워크 기본 개념을 이해할 수 있습니다.
목차
TablerForNet 설치 단계별 가이드
신규 Blazor Server .NET 7 프로젝트에 설치하는 방법을 안내합니다. 아래 절차를 따라주세요.
- 1단계: 'TablerForNet' NuGet 패키지 설치
- 2단계: Program.cs에 필요한 'using' 추가 및 TablerForNet 서비스 등록
- 3단계: _imports.razor 파일에 필요한 'using' 추가
- 4단계: PageTitle 태그 수정
- 5단계: _Host.cshtml에 'tablerForNet' CSS 및 JS 파일 추가
- 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' 추가
@using TablerForNet;
@using TablerForNet.Components
@using GhostlyInc.Components.Icons
@using TablerForNet.Flags4단계: PageTitle 태그 충돌 문제
TablerForNet의 PageTitle 태그가 Microsoft의 PageTitle 태그와 이름이 충돌합니다. TablerForNet 태그를 제거하거나 '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 폴더 내 Bootstrap 폴더를 삭제하세요. Tabler 아이콘 사용을 위해 '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" />
</MenuItemIcon>
</NavbarMenuItem>
<NavbarMenuItem Href="@($"/counter")" Text="Counter">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
</MenuItemIcon>
</NavbarMenuItem>
<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
<MenuItemIcon>
<Icon class="icon" IconType="@TablerIcons.Database" />
</MenuItemIcon>
</NavbarMenuItem>8단계: MainLayout 세부 조정
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<div class="container-fluid mt-2">
@Body
<br />
</div>
</div>9단계: 기타 페이지 조정
아래와 같이 index 페이지에 '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 프로젝트에 성공적으로 통합했습니다. 이 단계를 완료하면 강력한 프레임워크의 모든 기능을 활용할 준비가 된 것입니다. 향상된 기능으로 뛰어난 웹 애플리케이션을 만드세요. 어려움이 있더라도 성장의 기회로 삼으시길 바랍니다. 즐거운 코딩 되세요!