jackfiled/YaeBlog
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

add: 作者信息组件

Browse Source
This commit is contained in:
jackfiled
2024-01-31 21:36:00 +08:00
parent 4934369f3a
commit 81f8ae90fc
4 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
YaeBlog.Core/Services/EssayContentService.cs
View File

@@ -44,6 +44,8 @@ public class EssayContentService
public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
select KeyValuePair.Create(item.Key, item.Value.Count); select KeyValuePair.Create(item.Key, item.Value.Count);
public int TagCount => _tags.Count;
public IEnumerable<BlogEssay> GetTag(string tag) public IEnumerable<BlogEssay> GetTag(string tag)
{ {
if (_tags.TryGetValue(tag, out var list)) if (_tags.TryGetValue(tag, out var list))

53
YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor Normal file
View File

@@ -0,0 +1,53 @@
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@inject BlogOptions BlogOptionsInstance
@inject EssayContentService EssayContentInstance
<div style="margin: 2rem 0; width: 100%">
<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.H3">
@(BlogOptionsInstance.Author)
</FluentLabel>
<div style="height: 0.5rem"></div>
<FluentStack Orientation="@Orientation.Horizontal"
HorizontalAlignment="@HorizontalAlignment.Center"
HorizontalGap="20">
<a href="/archives">
<div>
<FluentLabel Typo="@Typography.H4">
文章
</FluentLabel>
<FluentLabel Typo="@Typography.H4">
@(EssayContentInstance.Count)
</FluentLabel>
</div>
</a>
<a href="/tags">
<div>
<FluentLabel Typo="@Typography.H4">
标签
</FluentLabel>
<FluentLabel Typo="@Typography.H4">
@(EssayContentInstance.TagCount)
</FluentLabel>
</div>
</a>
</FluentStack>
</FluentStack>
</FluentCard>
</div>
@code {
}

30
YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor.css Normal file
View File

@@ -0,0 +1,30 @@
.about-avatar {
position: relative;
width: 6rem;
height: 6rem;
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);
}
}

4
YaeBlog.Theme.FluentUI/Pages/Home.razor
View File

@@ -127,7 +127,11 @@
</div> </div>
</FluentGridItem> </FluentGridItem>
<FluentGridItem xs="12" sm="12" md="4" lg="4"> <FluentGridItem xs="12" sm="12" md="4" lg="4">
<FluentStack Orientation="@Orientation.Vertical">
<AuthorInformation/>
</FluentStack>
</FluentGridItem> </FluentGridItem>
</FluentGrid> </FluentGrid>
</div> </div>