add: 文章页面

This commit is contained in:
jackfiled 2024-01-23 17:55:34 +08:00
parent 66ecaa4c90
commit 83a9a06fec
5 changed files with 88 additions and 1 deletions

View File

@ -29,6 +29,11 @@ public class BlogOptions
/// </summary>
public required string BannerImage { get; set; }
/// <summary>
/// 文章页面的背景图片
/// </summary>
public required string EssayImage { get; set; }
/// <summary>
/// 博客底部是否显示ICP备案信息
/// </summary>

View File

@ -0,0 +1,57 @@
@page "/essays/{Filename}"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@inject BlogOptions BlogOptionsInstance
@inject EssayContentService EssayContent
@inject NavigationManager NavigationInstance
<div style="height: 100%">
<div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
<div class="essay-title">
<FluentLabel Typo="@Typography.H1" Style="color: white">
@(_essay!.Title)
</FluentLabel>
</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>
<div class="essay-content">
@((MarkupString)_essay!.HtmlContent)
</div>
</FluentCard>
</FluentGridItem>
<FluentGridItem xs="12" sm="12" md="4" lg="4">
</FluentGridItem>
</FluentGrid>
</div>
</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");
}
}
}

View File

@ -0,0 +1,20 @@
.essay-background {
position: relative;
height: 80%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
}
.essay-title {
color: white;
text-align: center;
top: 43%;
position: absolute;
width: 100%;
}
.essay-content {
font-size: 1rem;
line-height: 1.6;
}

View File

@ -29,7 +29,7 @@
{
<FluentCard Style="margin: 2rem 0 2rem 0">
<div>
<a href="essays/@(essay.Key)">
<a href="essays/@(essay.Key)" target="_blank">
<FluentLabel Typo="@Typography.H4">
@essay.Value.Title
</FluentLabel>

View File

@ -6,6 +6,11 @@ html, body {
height: 100%;
}
p {
font-size: 1rem;
line-height: 1.6;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;