使用版面配置建置可重複使用的 Blazor 元件
- 7 分鐘
Blazor 包含版面配置，可讓您輕鬆地撰寫通用使用者介面 (UI) 元素的程式碼，這些元素會出現在您的應用程式中的許多頁面上。
假設您負責建置披薩外送公司的網站，而且您已將大部分主頁面的內容建立為一組 Blazor 元件。 您想要確保這些頁面具有相同的品牌、瀏覽功能表和頁尾區段。 不過，您不需要將該程式碼複製並貼到多個檔案中。
在這裡，您會了解如何使用 Blazor 中的版面配置元件，在多個頁面上轉譯通用 HTML。
Note
本單元中的程式碼區塊是說明範例。 您會在下一個單元中撰寫自己的程式碼。
什麼是 Blazor 版面配置？
在大部分網站中，UI 元素的排列方式會跨多個頁面共用。 例如，頁面頂端可能有品牌橫幅、左側有主要網站導覽連結，底部則有法律免責聲明。 在一個頁面中撰寫這些通用 UI 元素的程式碼之後，複製並貼到所有其他頁面的程式碼中會很繁瑣。 更糟的是，如果稍後有所變更，例如要連結至新的網站主要區段，或品牌重新命名，您必須在所有個別元件中重複進行相同的變更。 改用版面配置元件可簡化及重複使用通用 UI 元素。
Blazor 中的版面配置元件是與參考它的所有元件共用其轉譯標記的元件。 您可以在版面配置上放置通用 UI 元素，例如導覽功能表、品牌和頁尾。 然後從多個其他元件參考該版面配置。 轉譯頁面時，不重複元素 (例如所要求披薩的詳細資料) 則來自參考元件。 但是，常見的元素來自版面配置。 您只需要在版面配置中撰寫一次通用 UI 元素的程式碼。 然後，如果您需要重塑網站或其他變更，您只需要更正版面配置。 變更會自動套用至所有參考元件。
撰寫 Blazor 版面配置的程式碼
Blazor 版面配置是特定類型的元件，因此撰寫 Blazor 版面配置與撰寫其他用於在應用程式中轉譯 UI 的元件類似。 例如，您會以相同的方式使用 @code 區塊和許多指示詞。 版面配置的定義檔案具有 .razor 副檔名。 該檔案通常會儲存在應用程式內的 Shared 資料夾中，但您可以選擇將該檔案儲存在可供使用它的元件存取的任何位置。
Blazor 版面配置元件有兩個獨特需求：
- 您必須繼承
LayoutComponentBase類別。 - 您必須在參考元件內容正在轉譯的位置包含
@Body指示詞。
@inherits LayoutComponentBase
<header>
<h1>Blazing Pizza</h1>
</header>
<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>
@Body
<footer>
@new MarkdownString(TrademarkMessage)
</footer>
@code {
public string TrademarkMessage { get; set; } = "All content is © Blazing Pizzas 2021";
}
Note
版面配置元件不包含 @page 指示詞，因為它們不會直接處理要求，而且不應該為其建立路由。 相反地，參考元件會使用 @page 指示詞。
如果您從 Blazor 專案範本建立 Blazor 應用程式，則應用程式的預設版面配置是 Shared/MainLayout.razor 元件。
在 Blazor 元件中使用版面配置
若要使用來自其他元件的版面配置，請以要套用的版面配置名稱新增 @layout 指示詞。 元件的 HTML 會在 @Body 指示詞的位置轉譯。
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
下圖說明如何結合元件和版面配置來轉譯最終 HTML：
如果您想要將範本套用至資料夾中的所有 Blazor 元件，您可以使用 _Imports.razor 檔案做為捷徑。 當 Blazor 編譯器找到此檔案時，它會自動將其指示詞包含在資料夾中的所有元件中。 這項技術讓您不必將 @layout 指示詞新增至每個元件，並套用至與 _Imports.razor 檔案及其所有子資料夾位於相同資料夾中的元件。
Important
請勿將 @layout 指令新增至專案根資料夾中的 _Imports.razor 檔案，因為這樣會導致版面配置的無限迴圈。
如果您想要將預設版面配置套用至 Web 應用程式所有資料夾中的每個元件，您可以在 App.razor 元件中執行，按照您在單元 2 中學到的方法設定 Router 元件。 在 <RouteView> 標籤中，使用 DefaultLayout 屬性。
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>
在自己的 @layout 指示詞或 _Imports.razor 檔案中指定版面配置的元件會覆寫此預設版面配置設定。