今天要來介紹元件的版面配置，透過版面配置元件來設置元件的版型，例如版型中的排版只有頁首(公司的名稱、LOGO 等等訊息)、頁尾(關於我們、聯絡我們等等訊息)、跟中間兩欄(一欄導覽列、一欄內容)，或者其他常見的版型都可以透過此方法，來使真正差異部分(通常是內容)以外的地方能夠重複利用。

建立一個版面配置元件最重要的地方，就是當有元件需要使用版面配置元件時，其內容應該顯示在什麼位置，而在 Blazor WebAssembly 中只需要繼承 LayoutComponentBase 並藉由其 Body 屬性即可，這個屬性用於取得在版面配置內被渲染的內容，也就是使用這個版面配置元件的元件。

簡單說要建立版面配置元件只需要：

1
2
3
4
5
@* CustomLayout.razor *@
@inherits LayoutComponentBase

<p>CustomLayout</p>
@Body

這樣就完成了，是不是很簡單呀？而如果要使用版面配置元件，只需要透過 @layout 指示詞來指定版型配置元件，就能將內容渲染在 @Body 位置上。

1
@layout CustomLayout

使用版型配置元件也是可以巢狀疊加使用的：

1
2
3
4
5
6
7
@* CustomLayout2 *@
@inherits LayoutComponentBase
@layout CustomLayout

<p>CustomLayout2</p>

@Body

使用 CustomLayout2 作為版型配置時，就將元件放置到 CustomLayout2 的 Body 裡面，然後再放置到 CustomLayout 的 Body 裡面，就是這麼簡單！

除了在元件上使用 @layout 來指定版型配置，也別忘了在介紹路由時有提到，使用路由元件時也能夠設置預設的版面配置元件。

但如果你接手前人的專案，發現元件本身與路由元件都沒有設置版型配置，而畫面卻渲染出版型配置，別忘了一開始提到的 _imports.razor 檔案，在該元件的目錄下的 _imports.razor 檔案裡面有沒有使用 @layout 來指定版面配置元件。

這邊提一下 _imports.razor，其實我們可以在每一個資料夾中增加此檔案，除了根目錄下的 _imports.razor 代表全域外， _imports.razor 只作用於該資料夾的 razor 檔案，所以我們一個專案是可以有多個 _imports.razor 檔案的，也就是每一個功能資料夾下，都有一份屬於該功能範圍的共用內容檔案，並不用全部都放到全域裡。

而上面說只找該元件目錄下的 _imports.razor 即可是因為，如果在全域中使用 @layout 指示詞，則會發生版型配置元件使用了自己的版型配置，產生循環參考這個錯誤，所以在使用 _imports.razor 來宣告該功能的所有畫面的版面配置時，也需要避免使用了自家的版面配置。

以上就是版型配置元件的介紹，對於版型配置來說，主要成分都是 HTML 與 CSS，所以如果想知道更多，建議去找別人的版型文章閱讀，而我今天的範例程式碼 - Day19，是依照一開始的介紹文刻了一個對應的版型，也可以去看看。

這邊再提一點，雖然現在還無法使用，但我看 PR 上討論還滿熱烈的，搞不好以後會有獨立的 CSS 區塊如：

1
2
3
4
5
@css {
  body {
    // ...
  }
}

甚至是抽離出來當成 xxx.razor.css 檔案，讓 css 的管理更加容易，大家一起拭目以待吧！

感謝大家的閱讀，我們明天見。

參考資料
ASP.NET Core Blazor 版面配置
CSS Isolation in Blazor Components #10170