YaeBlog/YaeBlog.Theme.FluentUI/Pages/Essay.razor

@page "/essays/{Filename}"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services

@inject BlogOptions BlogOptionsInstance
@inject EssayContentService EssayContent
@inject NavigationManager NavigationInstance

<PageTitle>
    @(_essay!.Title)
</PageTitle>

<div style="height: 100%">
    <div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
        <div class="essay-title">
            <FluentStack Orientation="@Orientation.Vertical"
                         HorizontalAlignment="@HorizontalAlignment.Center">
                <FluentLabel Typo="@Typography.H1" Style="color: white">
                    @(_essay!.Title)
                </FluentLabel>
                <div class="essay-subtitle">
                    <FluentIcon Value="@(new Icons.Regular.Size16.Calendar())"
                                Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
                        @(_essay!.PublishTime.ToString("yyyy年MM月dd日"))
                    </FluentLabel>
                </div>
                <div class="essay-subtitle">
                    <FluentIcon Value="@(new Icons.Regular.Size16.DataBarVerticalAscending())"
                                Color="@Color.Fill"/>
                    <FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
                        @(_essay!.WordCount)字
                    </FluentLabel>
                </div>
            </FluentStack>
        </div>
    </div>

    <div style="height: 2rem"></div>

    <div style="margin: 0 8% 0 8%">
        <FluentGrid>
            <FluentGridItem xs="12" sm="12" md="8" lg="8">
                <FluentCard Style="margin: 2rem 0">
                    <div class="essay-content">
                        @((MarkupString)_essay!.HtmlContent)
                    </div>
                </FluentCard>
            </FluentGridItem>

            <FluentGridItem xs="12" sm="12" md="4" lg="4">
                <FluentStack Orientation="@Orientation.Vertical">
                    <AuthorInformation/>

                    <Announcement/>
                </FluentStack>
            </FluentGridItem>
        </FluentGrid>
    </div>

    <BlogFooter/>
</div>

@code {
    [Parameter] public string? Filename { get; set; }

    private BlogEssay? _essay;

    protected override void OnInitialized()
    {
        if (string.IsNullOrEmpty(Filename))
        {
            NavigationInstance.NavigateTo("NotFound");
            return;
        }

        if (!EssayContent.TryGet(Filename, out _essay))
        {
            NavigationInstance.NavigateTo("NotFound");
        }
    }

}