add: 标签页面
This commit is contained in:
parent
28537f0e7a
commit
e033aac662
|
@ -1,6 +1,6 @@
|
|||
namespace YaeBlog.Core.Models;
|
||||
|
||||
public class BlogEssay
|
||||
public class BlogEssay : IComparable<BlogEssay>
|
||||
{
|
||||
public required string Title { get; init; }
|
||||
|
||||
|
@ -32,6 +32,16 @@ public class BlogEssay
|
|||
return essay;
|
||||
}
|
||||
|
||||
public int CompareTo(BlogEssay? other)
|
||||
{
|
||||
if (other is null)
|
||||
{
|
||||
return 1;
|
||||
}
|
||||
|
||||
return PublishTime.CompareTo(other.PublishTime);
|
||||
}
|
||||
|
||||
public override string ToString()
|
||||
{
|
||||
return $"{Title}-{PublishTime}";
|
||||
|
|
|
@ -34,6 +34,11 @@ public class EssayContentService
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
foreach (KeyValuePair<string,List<BlogEssay>> pair in _tags)
|
||||
{
|
||||
pair.Value.Sort();
|
||||
}
|
||||
}
|
||||
|
||||
public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.archive-background {
|
||||
position: relative;
|
||||
height: 80%;
|
||||
height: 60%;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
92
YaeBlog.Theme.FluentUI/Pages/Tags.razor
Normal file
92
YaeBlog.Theme.FluentUI/Pages/Tags.razor
Normal file
|
@ -0,0 +1,92 @@
|
|||
@page "/tags"
|
||||
@using YaeBlog.Core.Models
|
||||
@using YaeBlog.Core.Services
|
||||
|
||||
@inject BlogOptions BlogOptionsInstance
|
||||
@inject EssayContentService EssayContentInstance
|
||||
|
||||
<div style="height: 100%">
|
||||
<div class="tag-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
||||
<div class="tag-title">
|
||||
<FluentStack Orientation="@Orientation.Vertical"
|
||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
||||
<FluentLabel Typo="@Typography.H1" Color="@Color.Fill">
|
||||
@(TagName ?? "标 签")
|
||||
</FluentLabel>
|
||||
</FluentStack>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 2rem"></div>
|
||||
|
||||
<div style="margin: 0 8% 0 8%">
|
||||
<FluentCard>
|
||||
<div style="margin: 0 8%">
|
||||
@if (TagName is null)
|
||||
{
|
||||
<FluentStack Orientation="@Orientation.Horizontal"
|
||||
Wrap="true" Style="margin: 2rem 0">
|
||||
@foreach (KeyValuePair<string, int> pair in EssayContentInstance.Tags)
|
||||
{
|
||||
<div class="tag-item">
|
||||
<a href="/tags?TagName=@(pair.Key)">
|
||||
<span style="font-size: @(14 + pair.Value)px; color: @(RandomColor())">
|
||||
@pair.Key
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</FluentStack>
|
||||
}
|
||||
else
|
||||
{
|
||||
<FluentLabel Typo="@Typography.H2" Style="margin: 3rem 0 2rem 0; color: #404853">
|
||||
共计@(EssayContentInstance.GetTag(TagName).Count())篇文章
|
||||
</FluentLabel>
|
||||
|
||||
@foreach (BlogEssay essay in EssayContentInstance.GetTag(TagName))
|
||||
{
|
||||
<div style="margin: 0 4% 0 4%">
|
||||
<div class="tag-essay-item">
|
||||
<a href="/essays/@(essay.FileName)" target="_blank">
|
||||
<FluentStack Orientation="@Orientation.Horizontal">
|
||||
<FluentLabel Typo="@Typography.H5" Style="width: 120px">
|
||||
@(essay.PublishTime.ToString("yyyy-MM-dd"))
|
||||
</FluentLabel>
|
||||
|
||||
<FluentLabel Typo="@Typography.H5">
|
||||
@(essay.Title)
|
||||
</FluentLabel>
|
||||
</FluentStack>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</FluentCard>
|
||||
</div>
|
||||
|
||||
<BlogFooter/>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[SupplyParameterFromQuery]
|
||||
private string? TagName { get; set; }
|
||||
|
||||
private static string[] s_colors =
|
||||
[
|
||||
"#337ab7",
|
||||
"#bbe",
|
||||
"#4e87c2",
|
||||
"#a0aee3",
|
||||
"#6994cd",
|
||||
"#85a1d8"
|
||||
];
|
||||
|
||||
private static string RandomColor()
|
||||
{
|
||||
return Random.Shared.GetItems(s_colors, 1)[0];
|
||||
}
|
||||
|
||||
}
|
27
YaeBlog.Theme.FluentUI/Pages/Tags.razor.css
Normal file
27
YaeBlog.Theme.FluentUI/Pages/Tags.razor.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
.tag-background {
|
||||
position: relative;
|
||||
height: 60%;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
top: 43%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
margin: 0.25rem auto;
|
||||
}
|
||||
|
||||
.tag-essay-item {
|
||||
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tag-essay-item:hover {
|
||||
background-color: rgba(169, 169, 169, 0.22);
|
||||
}
|
Loading…
Reference in New Issue
Block a user