add: 标签页面
This commit is contained in:
parent
28537f0e7a
commit
e033aac662
|
@ -1,6 +1,6 @@
|
||||||
namespace YaeBlog.Core.Models;
|
namespace YaeBlog.Core.Models;
|
||||||
|
|
||||||
public class BlogEssay
|
public class BlogEssay : IComparable<BlogEssay>
|
||||||
{
|
{
|
||||||
public required string Title { get; init; }
|
public required string Title { get; init; }
|
||||||
|
|
||||||
|
@ -32,6 +32,16 @@ public class BlogEssay
|
||||||
return essay;
|
return essay;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public int CompareTo(BlogEssay? other)
|
||||||
|
{
|
||||||
|
if (other is null)
|
||||||
|
{
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return PublishTime.CompareTo(other.PublishTime);
|
||||||
|
}
|
||||||
|
|
||||||
public override string ToString()
|
public override string ToString()
|
||||||
{
|
{
|
||||||
return $"{Title}-{PublishTime}";
|
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
|
public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.archive-background {
|
.archive-background {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 80%;
|
height: 60%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
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