本篇文章同步發表於 個人部落格 Jim's Blog
今天來到內建元件的第五篇，介紹 FocusOnNavigate、HeadContent、HeadOutlet、PageTitle 這四個元件
這個元件其實看名稱就可以理解用途，當瀏覽的時候 Focus ，也就是它可以幫助我們設定使用者瀏覽到該頁面時候自動 Focus 某個元素，用起來像這樣
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
這是要製作無障礙網頁時確保瀏覽順序的常見策略之一
元件標籤協助程式，用途是呈現 <head> 的內容用
在 WebAssembly 專案中，HeadOutlet 元件會被新增到 RootComponents 內
在 Server 專案則是在 Pages/_Layout.cshtml
頁面標題，用這個一個元件指定頁面標題
<PageTitle>儀錶板</PageTitle>
指定 <head> 區域內容，最終會和 PageTitle 一併提供內容給 HeadOutlet
<HeadContent>
<meta name="description" content="@description">
</HeadContent>
HeadOutlet、HeadContent 和 HeadContent 可以用來做預渲染，這個功能主要是優化 SEO 用的，因為 SPA 的網站對於搜尋引擎的爬蟲來說幾乎是空白的，使用 Prerender 可以改善 SEO
詳細的作法可以參照微軟文件
明日介紹最後的四個元件NavMenu、NavLink、MainLayout 和 LayoutView
iThome鐵人賽
看影片追技術