add: 存档页面
This commit is contained in:
parent
e6f5f5a051
commit
4a97483b09
74
YaeBlog.Theme.FluentUI/Pages/Archives.razor
Normal file
74
YaeBlog.Theme.FluentUI/Pages/Archives.razor
Normal 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
24
YaeBlog.Theme.FluentUI/Pages/Archives.razor.css
Normal file
24
YaeBlog.Theme.FluentUI/Pages/Archives.razor.css
Normal 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);
|
||||||
|
}
|
||||||
|
|
|
@ -49,6 +49,8 @@
|
||||||
</FluentGridItem>
|
</FluentGridItem>
|
||||||
</FluentGrid>
|
</FluentGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<BlogFooter/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user