布局和页面

这篇笔记我们对Blazor中布局和页面组件相关的使用方式进行介绍。

Layout 布局组件

Blazor中，Layout是一种特殊的组件，它能够定义通用的UI框架结构。要创建一个Layout组件，我们需要继承LayoutComponentBase类。下面例子就是一个最简单的Layout组件。

Components/Layout/MyLayout.razor

@inherits LayoutComponentBase

<div>
    <span>首页</span>
    <span>软件</span>
    <span>游戏</span>
    <span>关于</span>
</div>
<div>@Body</div>

Components/Pages/Home.razor

@page "/"
@using Gacfox.DemoBlazorServer.Components.Layout
@layout MyLayout

<h1>Hello, world!</h1>

Layout组件中，我们使用@inherits指令继承了LayoutComponentBase，@Body是引用Layout框架的组件的占位符，它用于设置内容呈现的位置。对于需要引入Layout的组件，我们使用@layout指令引入即可。

除了使用@layout指令引用布局，我们也可以在路由系统的<RouteView>中指定默认布局，这样所有未单独指定布局的页面都会应用这个默认布局Layout组件。

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MyLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

页面组件

Blazor中，页面也是一个Blazor组件，只不过页面组件注册到了路由系统，浏览器中我们输入对应URL时，页面组件将作为对应路由的UI界面组件树起点被呈现。

@page "/"

<h1>Hello, world!</h1>

配置页面头信息

Blazor组件中我们可以配置标题等头信息，下面是一个例子。

@page "/"

<PageTitle>首页</PageTitle>
<h1>Hello, world!</h1>
<HeadContent>
    <meta name="description" content="首页" />
</HeadContent>

代码中，<PageTitle>指定了页面标题，<HeadContent>指定了页面<head>内部包裹的自定义内容。实际上，上面写法之所以能够生效，是因为在App.razor入口组件中我们使用了<HeadOutlet />。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="Gacfox.DemoBlazorServer.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

配置<HeadOutlet />后，我们就可以在子组件中额外配置页面标题和<head>内容等信息了。

作者：Gacfox