add: 关于页面

This commit is contained in:
jackfiled 2024-01-27 14:08:25 +08:00
parent e033aac662
commit b07bc95a16
5 changed files with 100 additions and 0 deletions

View File

@ -0,0 +1,10 @@
namespace YaeBlog.Core.Models;
public class AboutInfo
{
public required string Introduction { get; set; }
public required string Description { get; set; }
public required string AvatarImage { get; set; }
}

View File

@ -38,4 +38,6 @@ public class BlogOptions
/// 博客底部是否显示ICP备案信息 /// 博客底部是否显示ICP备案信息
/// </summary> /// </summary>
public string? RegisterInformation { get; set; } public string? RegisterInformation { get; set; }
public required AboutInfo About { get; set; }
} }

View File

@ -11,6 +11,7 @@
<link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/> <link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /> <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/> <link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
<link href="favicon.ico" rel="icon"/>
<HeadOutlet/> <HeadOutlet/>
</head> </head>

View File

@ -0,0 +1,42 @@
@page "/about"
@using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance
<PageTitle>
关于 - @(BlogOptionsInstance.Author)
</PageTitle>
<div style="height: 100%">
<div class="about-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
<div class="about-content">
<FluentCard>
<FluentStack Orientation="@Orientation.Vertical"
HorizontalAlignment="@HorizontalAlignment.Center">
<div class="about-avatar">
<img src="@(BlogOptionsInstance.About.AvatarImage)" alt="author-avatar"
class="about-avatar-img">
</div>
<FluentLabel Typo="@Typography.H2">
@(BlogOptionsInstance.Author)
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
@(BlogOptionsInstance.About.Introduction)
</FluentLabel>
</FluentStack>
<div style="height: 2rem"></div>
<FluentLabel Typo="@Typography.Body">
@(BlogOptionsInstance.About.Description)
</FluentLabel>
</FluentCard>
</div>
</div>
<BlogFooter/>
</div>
@code {
}

View File

@ -0,0 +1,45 @@
.about-background {
position: relative;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
}
.about-content {
top: 33%;
position: absolute;
width: 80%;
margin: 0 10%;
}
.about-avatar {
position: relative;
width: 10rem;
height: 10rem;
z-index: 3;
}
.about-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: transparent;
object-fit: cover;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.about-avatar-img:hover {
animation: rotate-animation 1s ease-in-out;
}
@keyframes rotate-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}