ASP.NET Core Blazor 系列 - 028 內建 Razor 元件 (5)

前言

今天來到內建元件的第五篇，介紹 FocusOnNavigate、HeadContent、HeadOutlet、PageTitle 這四個元件

這個元件其實看名稱就可以理解用途，當瀏覽的時候 Focus ，也就是它可以幫助我們設定使用者瀏覽到該頁面時候自動 Focus 某個元素，用起來像這樣

1
<FocusOnNavigate RouteData="@routeData" Selector="h1" />

這是要製作無障礙網頁時確保瀏覽順序的常見策略之一

元件標籤協助程式，用途是呈現 <head> 的內容用

在 WebAssembly 專案中，HeadOutlet 元件會被新增到 RootComponents 內

在 Server 專案則是在 Pages/_Layout.cshtml

頁面標題，用這個一個元件指定頁面標題

1
<PageTitle>儀錶板</PageTitle>

指定 <head> 區域內容，最終會和 PageTitle 一併提供內容給 HeadOutlet

1
2
3
<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

HeadOutlet、HeadContent 和 HeadContent 可以用來做預渲染，這個功能主要是優化 SEO 用的，因為 SPA 的網站對於搜尋引擎的爬蟲來說幾乎是空白的，使用 Prerender 可以改善 SEO

詳細的作法可以參照微軟文件

明日介紹最後的四個元件NavMenu、NavLink、MainLayout 和 LayoutView