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

84 lines
2.7 KiB
Plaintext

@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");
}
}
}