YaeBlog/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor

@using YaeBlog.Core.Models
@inherits LayoutComponentBase

@inject BlogOptions BlogOptionsInstance

<FluentLayout>
    <FluentHeader>
        <FluentStack Orientation="@Orientation.Horizontal">
            <div style="width: 50px"></div>

            <a href="./">
                <FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
                    @BlogOptionsInstance.Author
                </FluentLabel>
            </a>

            <FluentSpacer/>

            <a href="./" style="margin: auto 0 auto 0">
                <div class="quick-link">
                    <FluentIcon Value="@(new Icons.Regular.Size16.Home())" Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
                                 Style="margin-left: 0.2rem">
                        首页
                    </FluentLabel>
                </div>
            </a>

            <a href="archives" style="margin: auto 0 auto 0">
                <div class="quick-link">
                    <FluentIcon Value="@(new Icons.Regular.Size16.Archive())" Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
                                 Style="margin-left: 0.2rem">
                        归档
                    </FluentLabel>
                </div>
            </a>

            <a href="tags" style="margin: auto 0 auto 0">
                <div class="quick-link">
                    <FluentIcon Value="@(new Icons.Regular.Size16.Tag())" Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
                                 Style="margin-left: 0.2rem">
                        标签
                    </FluentLabel>
                </div>
            </a>

            <a href="about" style="margin: auto 0 auto 0">
                <div class="quick-link">
                    <FluentIcon Value="@(new Icons.Regular.Size16.PersonInfo())" Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
                                 Style="margin-left: 0.2rem">
                        关于
                    </FluentLabel>
                </div>
            </a>

            <a href="links" style="margin: auto 0 auto 0">
                <div class="quick-link">
                    <FluentIcon Value="@(new Icons.Regular.Size16.LinkMultiple())" Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
                                 Style="margin-left: 0.2rem">
                        友链
                    </FluentLabel>
                </div>
            </a>

            <div style="width: 20px"></div>
        </FluentStack>
    </FluentHeader>
    <FluentBodyContent Style="height: 100%">
        <main style="height: 100%">
            @Body
        </main>
    </FluentBodyContent>
</FluentLayout>