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

add: 翻页功能

Browse Source
This commit is contained in:
jackfiled 2024-07-21 16:15:52 +08:00
parent 15469ebc8f
commit 75a1e9c81e
13 changed files with 218 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,9 +14,7 @@ public class EssayContentService
public bool TryAdd(string key, BlogEssay essay) => _essays.TryAdd(key, essay);
public IEnumerable<KeyValuePair<string, BlogEssay>> Essays => _essays;
public int Count => _essays.Count;
public IDictionary<string, BlogEssay> Essays => _essays;
public void RefreshTags()
{

4
YaeBlog/Components/BlogInformationCard.razor Normal file
View File

@ -0,0 +1,4 @@
<div>
<h3>“奇奇怪怪东西的聚合地”</h3>
</div>

0
YaeBlog/Components/BlogInformationCard.razor.css Normal file
View File

20
YaeBlog/Layout/BlogLayout.razor
View File

@ -1,9 +1,11 @@
@inherits LayoutComponentBase
<div class="container">
@attribute [StreamRendering]
<main class="container">
<div class="row" style="height: 80px">
<div class="px-2 col-8">
<a href="/" class="p-2">
<a href="/blog/" class="p-2">
<h4>Ricardo's Blog</h4>
</a>
</div>
@ -11,37 +13,37 @@
<div class="col-4 d-flex justify-content-around align-items-center">
<a href="/blog/" class="p-2" target="_blank">
<div class="d-inline-flex" style="text-align: center">
<Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
<Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
<h5>首页</h5>
</div>
</a>
<a href="/blog/archives/" class="p-2" target="_blank">
<div class="d-inline-flex">
<Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2" Size="IconSize.x5"/>
<Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="IconSize.x5"/>
<h5>归档</h5>
</div>
</a>
<a href="/blog/tags/" class="p-2" target="_blank">
<div class="d-inline-flex">
<Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
<Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
<h5>标签</h5>
</div>
</a>
<a href="/blog/about/" class="p-2" target="_blank">
<div class="d-inline-flex">
<Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
<Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
<h5>关于</h5>
</div>
</a>
</div>
</div>
<main class="row px-4 py-2">
<div class="row px-4 py-2">
@Body
</main>
</div>
<Foonter/>
</div>
</main>

8
YaeBlog/Layout/MainLayout.razor
View File

@ -1,6 +1,6 @@
@inherits LayoutComponentBase
<div class="container">
<main class="container">
<div class="row" style="height: 80px">
<div class="px-2 col-8">
<a href="/" class="p-2">
@ -15,11 +15,11 @@
</div>
</div>
<main class="row px-4 center">
<div class="row px-4 center">
<div class="py-2">
@Body
</div>
</main>
</div>
<Foonter/>
</div>
</main>

1
YaeBlog/Layout/MainLayout.razor.css
View File

@ -1,6 +1,7 @@
.center {
margin: 0 auto;
max-width: 48em;
min-height: calc(100vh - 80px);
position: relative;
display: flex;
flex-direction: column;

141
YaeBlog/Pages/BlogIndex.razor
View File

@ -1,3 +1,144 @@
@page "/blog"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@inject EssayContentService EssayContentInstance
@inject NavigationManager NavigationInstance
@inject ILogger<BlogIndex> Logger
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
@foreach (KeyValuePair<string, BlogEssay> pair in _essays)
{
<div class="container p-3">
<div class="row fs-2 fw-bold py-2 essay-title">
<a href="/blog/essays/@(pair.Key)">@(pair.Value.Title)</a>
</div>
<div class="row p-2 justify-content-start">
<div class="col-auto fw-light">
@(pair.Value.PublishTime.ToString("yyyy-MM-dd"))
</div>
@foreach (string key in pair.Value.Tags)
{
<div class="col-auto">
<a href="/blog/tags?tagName=@key">
# @key
</a>
</div>
}
</div>
<div class="row p-2">
<div class="col">
@(pair.Value.Description)
</div>
</div>
<div class="row">
<div class="col border-bottom">
</div>
</div>
</div>
}
<div class="row align-items-center justify-content-center p-3">
@if (_page == 1)
{
<div class="col-auto fw-light">上一页</div>
}
else
{
<div class="col-auto">
<a href="/blog/?page=@(_page - 1)">上一页</a>
</div>
}
@if (_page == 1)
{
<div class="col-auto">
<a href="/blog/?page=1">1</a>
</div>
<div class="col-auto">
<a href="/blog/?page=2">2</a>
</div>
<div class="col-auto">
<a href="/blog/?page=3">3</a>
</div>
}
else if (_page == _pageCount)
{
<div class="col-auto">
<a href="/blog/?page=@(_pageCount - 2)">@(_pageCount - 2)</a>
</div>
<div class="col-auto">
<a href="/blog/?page=@(_pageCount - 1)">@(_pageCount - 1)</a>
</div>
<div class="col-auto">
<a href="/blog/?page=@(_pageCount)">@(_pageCount)</a>
</div>
}
else
{
<div class="col-auto">
<a href="/blog/?page=@(_page - 1)">@(_page - 1)</a>
</div>
<div class="col-auto">
<a href="/blog/?page=@(_page)">@(_page)</a>
</div>
<div class="col-auto">
<a href="/blog/?page=@(_page + 1)">@(_page + 1)</a>
</div>
}
@if (_page == _pageCount)
{
<div class="col-auto fw-light">
下一页
</div>
}
else
{
<div class="col-auto">
<a href="/blog/?page=@(_page + 1)">下一页</a>
</div>
}
</div>
</div>
<div class="col-sm-12 col-md-3">
<BlogInformationCard/>
</div>
</div>
</div>
@code {
[SupplyParameterFromQuery] private int? Page { get; set; }
private readonly List<KeyValuePair<string, BlogEssay>> _essays = [];
private const int EssaysPerPage = 8;
private int _pageCount = 1;
private int _page = 1;
protected override void OnInitialized()
{
_page = Page ?? 1;
_pageCount = EssayContentInstance.Essays.Count / EssaysPerPage + 1;
if (EssaysPerPage * _page > EssayContentInstance.Essays.Count + EssaysPerPage)
{
NavigationInstance.NavigateTo("/NotFount");
return;
}
_essays.AddRange(EssayContentInstance.Essays
.OrderByDescending(p => p.Value.PublishTime)
.Skip((_page - 1) * EssaysPerPage)
.Take(EssaysPerPage));
}
}

7
YaeBlog/Pages/BlogIndex.razor.css
View File

@ -0,0 +1,7 @@
.essay-title a {
color: var(--bs-body-color);
}
.read-more a {
color: var(--bs-body-color);
}

34
YaeBlog/Pages/Essays.razor Normal file
View File

@ -0,0 +1,34 @@
@page "/blog/essays/{BlogKey}"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@inject NavigationManager NavigationInstance
@inject EssayContentService EssayContentInstance
<div class="container">
</div>
@code {
[Parameter]
public string? BlogKey { get; set; }
private BlogEssay? _essay;
protected override void OnInitialized()
{
base.OnInitialized();
if (string.IsNullOrWhiteSpace(BlogKey))
{
NavigationInstance.NavigateTo("/NotFound");
return;
}
if (!EssayContentInstance.TryGet(BlogKey, out _essay))
{
NavigationInstance.NavigateTo("/NotFound");
}
}
}

0
YaeBlog/Pages/Essays.razor.css Normal file
View File

9
YaeBlog/Pages/NotFound.razor Normal file
View File

@ -0,0 +1,9 @@
@page "/NotFound"
<div class="container">
<h3>NotFound!</h3>
</div>
@code {
}

0
YaeBlog/Pages/NotFound.razor.css Normal file
View File

6
YaeBlog/wwwroot/globals.css
View File

@ -2,6 +2,12 @@ body a {
text-decoration: none;
}
body main {
flex: 1;
min-height: 100vh;
overflow-x: visible;
}
@font-face {
font-family: "Font Awesome 6 Free";
font-style: normal;