add: 博客主页文章部分
This commit is contained in:
parent
6bbfd83ef3
commit
800f439564
|
|
@ -1,5 +1,6 @@
|
||||||
using Microsoft.AspNetCore.Builder;
|
using Microsoft.AspNetCore.Builder;
|
||||||
using Microsoft.Extensions.DependencyInjection;
|
using Microsoft.Extensions.DependencyInjection;
|
||||||
|
using Microsoft.FluentUI.AspNetCore.Components;
|
||||||
using YaeBlog.Core.Builder;
|
using YaeBlog.Core.Builder;
|
||||||
using YaeBlog.Core.Extensions;
|
using YaeBlog.Core.Extensions;
|
||||||
|
|
||||||
|
|
@ -15,6 +16,7 @@ public static class BlogApplicationBuilderExtensions
|
||||||
private static void ConfigureWebApplicationBuilder(WebApplicationBuilder builder)
|
private static void ConfigureWebApplicationBuilder(WebApplicationBuilder builder)
|
||||||
{
|
{
|
||||||
builder.Services.AddRazorComponents();
|
builder.Services.AddRazorComponents();
|
||||||
|
builder.Services.AddFluentUIComponents();
|
||||||
}
|
}
|
||||||
|
|
||||||
private static void ConfigureWebApplication(WebApplication application)
|
private static void ConfigureWebApplication(WebApplication application)
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
@page "/"
|
@page "/"
|
||||||
@using YaeBlog.Core.Models
|
@using YaeBlog.Core.Models
|
||||||
|
@using YaeBlog.Core.Services
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
@inject BlogOptions BlogOptionsInstance
|
||||||
|
@inject EssayContentService EssayContentInstance
|
||||||
|
@inject NavigationManager NavigationManagerInstance
|
||||||
|
|
||||||
<div style="height: 100%">
|
<div style="height: 100%">
|
||||||
<div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
|
<div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
|
||||||
|
|
@ -16,65 +19,105 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height: 2rem"></div>
|
<div style="height: 2rem" id="blog-content"></div>
|
||||||
|
|
||||||
<div style="margin: 0 15% 0 15%">
|
<div style="margin: 0 8% 0 8%">
|
||||||
<FluentCard>
|
<FluentGrid>
|
||||||
<div>
|
<FluentGridItem xs="12" sm="12" md="8" lg="8">
|
||||||
asdfasdfsadf
|
<div>
|
||||||
</div>
|
@foreach (KeyValuePair<string, BlogEssay> essay in _essays)
|
||||||
<div>
|
{
|
||||||
asdfasdfsadf
|
<FluentCard Style="margin: 2rem 0 2rem 0">
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<a href="essays/@(essay.Key)">
|
||||||
asdfasdfsadf
|
<FluentLabel Typo="@Typography.H4">
|
||||||
</div>
|
@essay.Value.Title
|
||||||
<div>
|
</FluentLabel>
|
||||||
asdfasdfsadf
|
</a>
|
||||||
</div>
|
|
||||||
<div>
|
<FluentStack VerticalAlignment="@VerticalAlignment.Center"
|
||||||
asdfasdfsadf
|
Style="margin: 1rem 0 1rem 0"
|
||||||
</div>
|
HorizontalGap="4">
|
||||||
<div>
|
<FluentIcon Value="@(new Icons.Regular.Size16.Calendar())"/>
|
||||||
asdfasdfsadf
|
<span style="margin: auto 0 auto 0">
|
||||||
</div>
|
@(essay.Value.PublishTime.ToString("yyyy-MM-dd HH:mm:ss"))
|
||||||
<div>
|
</span>
|
||||||
asdfasdfsadf
|
@if (essay.Value.Tags.Count != 0)
|
||||||
</div>
|
{
|
||||||
<div>
|
<FluentIcon Value="@(new Icons.Regular.Size16.TagMultiple())"/>
|
||||||
asdfasdfsadf
|
@foreach (string tag in essay.Value.Tags)
|
||||||
</div>
|
{
|
||||||
<div>
|
<span style="margin: auto 0 auto 0">
|
||||||
asdfasdfsadf
|
@tag
|
||||||
</div>
|
</span>
|
||||||
<div>
|
}
|
||||||
asdfasdfsadf
|
}
|
||||||
</div>
|
</FluentStack>
|
||||||
<div>
|
</div>
|
||||||
asdfasdfsadf
|
</FluentCard>
|
||||||
</div>
|
}
|
||||||
<div>
|
|
||||||
asdfasdfsadf
|
<div class="pagination">
|
||||||
</div>
|
<FluentStack HorizontalAlignment="@HorizontalAlignment.Center"
|
||||||
<div>
|
HorizontalGap="20">
|
||||||
asdfasdfsadf
|
@if (Page != 1)
|
||||||
</div>
|
{
|
||||||
<div>
|
<a href="/?page=@(Page - 1)#blog-content" class="pagination-item">
|
||||||
asdfasdfsadf
|
<i class="chevron-left"></i>
|
||||||
</div>
|
</a>
|
||||||
<div>
|
}
|
||||||
asdfasdfsadf
|
|
||||||
</div>
|
@if (Page == 1)
|
||||||
<div>
|
{
|
||||||
asdfasdfsadf
|
<a href="/?page=1#blog-content" class="pagination-item">
|
||||||
</div>
|
<span>1</span>
|
||||||
<div>
|
</a>
|
||||||
asdfasdfsadf
|
<a href="/?page=2#blog-content" class="pagination-item">
|
||||||
</div>
|
<span>2</span>
|
||||||
<div>
|
</a>
|
||||||
asdfasdfsadf
|
<a href="/?page=3#blog-content" class="pagination-item">
|
||||||
</div>
|
<span>3</span>
|
||||||
</FluentCard>
|
</a>
|
||||||
|
}
|
||||||
|
else if (Page == _pageCount)
|
||||||
|
{
|
||||||
|
<a href="/?page=@(_pageCount - 2)#blog-content" class="pagination-item">
|
||||||
|
<span>@(_pageCount - 2)</span>
|
||||||
|
</a>
|
||||||
|
<a href="/?page=@(_pageCount - 1)#blog-content" class="pagination-item">
|
||||||
|
<span>@(_pageCount - 1)</span>
|
||||||
|
</a>
|
||||||
|
<a href="/?page=@(_pageCount)#blog-content" class="pagination-item">
|
||||||
|
<span>@(_pageCount)</span>
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<a href="/?page=@(Page - 1)#blog-content" class="pagination-item">
|
||||||
|
<span>@(Page - 1)</span>
|
||||||
|
</a>
|
||||||
|
<a href="/?page=@(Page)#blog-content" class="pagination-item">
|
||||||
|
<span>@(Page)</span>
|
||||||
|
</a>
|
||||||
|
<a href="/?page=@(Page + 1)#blog-content" class="pagination-item">
|
||||||
|
<span>@(Page + 1)</span>
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Page != _pageCount)
|
||||||
|
{
|
||||||
|
<a href="/?page=@(Page + 1)#blog-content" class="pagination-item">
|
||||||
|
<i class="chevron-right"></i>
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
</FluentStack>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FluentGridItem>
|
||||||
|
<FluentGridItem xs="12" sm="12" md="4" lg="4">
|
||||||
|
|
||||||
|
</FluentGridItem>
|
||||||
|
</FluentGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BlogFooter/>
|
<BlogFooter/>
|
||||||
|
|
@ -82,5 +125,39 @@
|
||||||
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
[SupplyParameterFromQuery] private int? Page { get; set; }
|
||||||
|
|
||||||
|
private readonly List<KeyValuePair<string, BlogEssay>> _essays = [];
|
||||||
|
private int _pageCount;
|
||||||
|
|
||||||
|
protected override void OnInitialized()
|
||||||
|
{
|
||||||
|
Page ??= 1;
|
||||||
|
|
||||||
|
IEnumerable<KeyValuePair<string, BlogEssay>[]> chunks =
|
||||||
|
EssayContentInstance.Essays
|
||||||
|
.OrderByDescending(pair => pair.Value.PublishTime)
|
||||||
|
.Chunk(10);
|
||||||
|
|
||||||
|
var count = 1;
|
||||||
|
var flag = false;
|
||||||
|
foreach (KeyValuePair<string, BlogEssay>[] chunk in chunks)
|
||||||
|
{
|
||||||
|
if (Page == count)
|
||||||
|
{
|
||||||
|
flag = true;
|
||||||
|
_essays.AddRange(chunk);
|
||||||
|
}
|
||||||
|
|
||||||
|
count += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
_pageCount = count - 1;
|
||||||
|
|
||||||
|
if (flag is false)
|
||||||
|
{
|
||||||
|
NavigationManagerInstance.NavigateTo("NotFount");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -54,3 +54,37 @@
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.essay-description {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-item {
|
||||||
|
margin: auto 0 auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-left {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "Font Awesome 6 Free", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-left::before {
|
||||||
|
content: "\f053";
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-right {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "Font Awesome 6 Free", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-right::before {
|
||||||
|
content: "\f054";
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
|
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
|
||||||
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.3.1" />
|
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.3.1" />
|
||||||
|
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.3.1" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user