Corvus+ Blazor(7)-Layout

現行網站多數都會有一個「外框」，通常這個框會包含Logo、menu、聯絡資訊等，供這個網站的頁面一起使用。若是將這些框分別放入每個頁面中，一但這個「外框」需要修改的時候，需要同時修改所有頁面，會非常耗時且容易出錯。如果能夠有一個共用元件供每個頁面呼叫取用，將可以解決這個問題。解決這個問題的元件就是Layout，Layout可以單獨設計外框，並且使用@Body來替換內頁內容，達到共享Layout的效果。

MainLayout就是Blazor預設的外框配置。若是想要更改預設Layout，可以在App.razor中，將Found的DefaultLayout改為其他有繼承「LayoutComponentBase」的Layout元件。而NotFound則是更改LayoutView的Layout。

但我們這邊不用替換，直接修改MainLayout即可。這邊都是使用Bootstrap來做排版，程式碼我就不多解釋了，將MainLayout修改為以下：

@inherits LayoutComponentBase
<div class="page">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand text-dark" href="#">Corvus+</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link text-dark" href="/blog">blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" href="/category">category</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" href="https://corvus9312.github.io/" target="_blank">about</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <main role="main" class="container">
        <article id="content" class="col-lg-8 pt-3">
            @Body
        </article>
    </main>
</div>

而MainLayout.razor.css調整如下：

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}
nav {
    border-bottom: solid 1px #F2F2F2;
}

調整完畢執行後就能看到新的外框架構了，而@Body的部分同樣顯示原本的Index.razor的內容。外框設計完畢後就能夠進行內頁的開發，因不需重複貼上Layout的程式碼，也可以減少不少的調整時間。