fitability™️ – 친근한 피트니스 활동 추적 앱
fitability
It's all open-sourced under the MIT license.
저장소
- fitability-docs: Documents
- fitability-app: Applications
- fitability-power: Power Apps app
학점
- Icons made by Freepik from www.flaticon.com
GH 페이지의 Blazor WASM Custom 404 페이지
You can download the sample application on this GitHub repository.
적합성 / fitability.github.io
fitability™️ – 친근한 피트니스 활동 추적 앱
™️ is an app that runs on your preferred platform – web, desktop or mobile – which traces your fitness activities, and shares them with your friends or on social media.
Blazor WASM – 기본 404 페이지
Blazor WASM 앱 프로젝트를 만든 직후의 기본 404 페이지는 다음과 같습니다.
App.razor가 그렇게 정의하기 때문이다.@* BlazorApp1.App.razor *@
<Router AppAssembly="@typeof(App).Assembly">
...
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
@* ⬇️⬇️⬇️ This is the content ⬇️⬇️⬇️*@
<p role="alert">Sorry, there's nothing at this address.</p>
@* ⬆️⬆️⬆️ This is the content ⬆️⬆️⬆️*@
</LayoutView>
</NotFound>
</Router>
따라서 404 페이지를 사용자 정의하는 데 필요한 것은 이 부분뿐입니다.
Blazor WASM – 커스텀 404 페이지
이 게시물에 사용된 샘플 앱은 맞춤형 404 페이지를 사용합니다. 사용자 정의 404 페이지의 경우
NotFound.razor라는 웹 구성 요소를 만듭니다.@* Fitability.Home.Components.NotFound.razor *@
<div class="row">
<div class="col-6">
<img src="images/banner-3840x1920.png" class="img-fluid" alt="banner" />
</div>
<div class="col-6 d-flex align-items-center">
<div class="row">
<div class="col-12">
<h1 class="text-center">Not Found!</h1>
<p class="text-center fs-2">Your requested page doesn't exist.</p>
<p class="text-center fs-3"><a href="/" class="btn btn-primary btn-lg">Home</a></p>
</div>
</div>
</div>
</div>
그런 다음
LayoutView의 App.razor 구성 요소 내에서 가져옵니다.@* Fitability.Home.App.razor *@
<Router AppAssembly="@typeof(App).Assembly">
...
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
@* ⬇️⬇️⬇️ Add the NotFound component here ⬇️⬇️⬇️*@
<NotFound />
@* ⬆️⬆️⬆️ Add the NotFound component here ⬆️⬆️⬆️*@
</LayoutView>
</NotFound>
</Router>
로컬 컴퓨터에서 Blazor WASM 앱을 실행하면 사용자 지정 404 페이지가 표시됩니다.
GitHub 페이지 – 기본 404 페이지
그러나 Blazor WASM 앱을 GitHub 페이지에 배포하고 존재하지 않는 URL을 방문하십시오. 그러면 GitHub의 기본 404 페이지가 표시됩니다.
누군가가 존재하지 않는 페이지를 방문하면 GitHub가 기본 404 페이지를 표시하기 때문입니다. 이것을 바꾸자.
GitHub 페이지 – 사용자 정의 404 페이지
404.html 파일은 GitHub 페이지에서 사용자 정의 404 페이지를 사용하기 위해 물리적으로 존재해야 합니다. 일반적으로 이 목적을 위해 하드 코딩404.html을 준비할 수 있습니다. 그러나 우리는 Blazor WASM의 라우팅 파이프라인을 사용하고 있습니다.index.html 파일을 404.html에 복사합니다. 둘 다 근본적으로 서로 같은 파일입니다. 404.razor 페이지를 만들고 NotFound 구성 요소를 가져옵니다. 이 404.razor 페이지의 라우팅 경로는 /404.html 여야 합니다.@* Fitability.Home.Pages.404.razor *@
@page "/404.html"
<NotFound />
Blazor WASM 앱을 GitHub 페이지에 다시 배포하고 존재하지 않는 URL을 방문하십시오. 그러면 맞춤 404 페이지를 볼 수 있습니다.
GitHub Pages가 물리적
404.html 파일을 찾기 때문입니다. 이 파일은 Blazor WASM 라우팅 파이프라인에서 실행됩니다. 따라서 404 페이지에 비즈니스 로직을 작성할 수 있습니다.지금까지 Blazor WASM에서 실행되는 GitHub Pages 앱의 사용자 지정 404 페이지를 처리하는 방법을 살펴보았습니다.
블레이저에 대해 더 알고 싶으세요?
더 많은 Blazor 자료를 보려면 해당 사이트를 방문하는 것이 좋습니다.
Reference
이 문제에 관하여(GH 페이지의 Blazor WASM Custom 404 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dotnet/blazor-wasm-custom-404-page-on-gh-pages-1o99텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
