add: 文章页面
This commit is contained in:
parent
66ecaa4c90
commit
83a9a06fec
|
@ -29,6 +29,11 @@ public class BlogOptions
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public required string BannerImage { get; set; }
|
public required string BannerImage { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 文章页面的背景图片
|
||||||
|
/// </summary>
|
||||||
|
public required string EssayImage { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 博客底部是否显示ICP备案信息
|
/// 博客底部是否显示ICP备案信息
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
|
57
YaeBlog.Theme.FluentUI/Pages/Essay.razor
Normal file
57
YaeBlog.Theme.FluentUI/Pages/Essay.razor
Normal 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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
20
YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
Normal file
20
YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
Normal 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;
|
||||||
|
}
|
|
@ -29,7 +29,7 @@
|
||||||
{
|
{
|
||||||
<FluentCard Style="margin: 2rem 0 2rem 0">
|
<FluentCard Style="margin: 2rem 0 2rem 0">
|
||||||
<div>
|
<div>
|
||||||
<a href="essays/@(essay.Key)">
|
<a href="essays/@(essay.Key)" target="_blank">
|
||||||
<FluentLabel Typo="@Typography.H4">
|
<FluentLabel Typo="@Typography.H4">
|
||||||
@essay.Value.Title
|
@essay.Value.Title
|
||||||
</FluentLabel>
|
</FluentLabel>
|
||||||
|
|
|
@ -6,6 +6,11 @@ html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar {
|
*::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user