add: 存档页面

This commit is contained in:
jackfiled 2024-01-25 23:05:44 +08:00
parent e6f5f5a051
commit 4a97483b09
3 changed files with 100 additions and 0 deletions

View File

@ -0,0 +1,74 @@
@page "/archives"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@inject BlogOptions BlogOptionsInstance
@inject EssayContentService EssayContentInstance
<div style="height: 100%">
<div class="archive-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
<div class="archive-title">
<FluentStack Orientation="@Orientation.Vertical"
HorizontalAlignment="@HorizontalAlignment.Center">
<FluentLabel Typo="@Typography.H1" Color="@Color.Fill">
存 档
</FluentLabel>
</FluentStack>
</div>
</div>
<div style="height: 2rem"></div>
<div style="margin: 0 8% 0 8%">
<FluentCard>
<div style="margin: 0 8% 0 8%">
<FluentLabel Typo="@Typography.H2" Style="margin: 3rem 0 2rem 0; color: #404853">
共计@(EssayContentInstance.Count)篇文章
</FluentLabel>
@foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
{
<FluentLabel Typo="@Typography.H3" Style="color: #718096; margin: 2rem 0 1rem 0">
@(group.Key.ToString("yyyy年"))
</FluentLabel>
<div style="margin: 0 4% 0 4%">
@foreach (KeyValuePair<string, BlogEssay> pair in group)
{
<div class="archive-item">
<a href="/essays/@(pair.Key)" target="_blank">
<FluentStack Orientation="@Orientation.Horizontal">
<FluentLabel Typo="@Typography.H5" Style="width: 80px">
@(pair.Value.PublishTime.ToString("MM-dd"))
</FluentLabel>
<FluentLabel Typo="@Typography.H5">
@(pair.Value.Title)
</FluentLabel>
</FluentStack>
</a>
</div>
}
</div>
}
</div>
</FluentCard>
</div>
<BlogFooter/>
</div>
@code {
private readonly List<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> _essays = [];
protected override void OnInitialized()
{
IEnumerable<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> essays =
from essay in EssayContentInstance.Essays
orderby essay.Value.PublishTime descending
group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1);
_essays.AddRange(essays);
}
}

View File

@ -0,0 +1,24 @@
.archive-background {
position: relative;
height: 80%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
}
.archive-title {
top: 43%;
position: absolute;
width: 100%;
}
.archive-item {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
margin: 0.5rem 0 0.5rem 0;
border-radius: 4px;
}
.archive-item:hover {
background-color: rgba(169, 169, 169, 0.22);
}

View File

@ -49,6 +49,8 @@
</FluentGridItem> </FluentGridItem>
</FluentGrid> </FluentGrid>
</div> </div>
<BlogFooter/>
</div> </div>
@code { @code {