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-01-23 12:27:25 +08:00
parent 6bbfd83ef3
commit 800f439564
4 changed files with 172 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
YaeBlog.Theme.FluentUI/BlogApplicationBuilderExtensions.cs
View File

@ -1,5 +1,6 @@
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.FluentUI.AspNetCore.Components;
using YaeBlog.Core.Builder;
using YaeBlog.Core.Extensions;
@ -15,6 +16,7 @@ public static class BlogApplicationBuilderExtensions
private static void ConfigureWebApplicationBuilder(WebApplicationBuilder builder)
{
builder.Services.AddRazorComponents();
builder.Services.AddFluentUIComponents();
}
private static void ConfigureWebApplication(WebApplication application)

193
YaeBlog.Theme.FluentUI/Pages/Home.razor
View File

@ -1,7 +1,10 @@
@page "/"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@inject BlogOptions BlogOptionsInstance
@inject EssayContentService EssayContentInstance
@inject NavigationManager NavigationManagerInstance
<div style="height: 100%">
<div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
@ -16,65 +19,105 @@
</div>
</div>
<div style="height: 2rem"></div>
<div style="height: 2rem" id="blog-content"></div>
<div style="margin: 0 15% 0 15%">
<FluentCard>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
</FluentCard>
<div style="margin: 0 8% 0 8%">
<FluentGrid>
<FluentGridItem xs="12" sm="12" md="8" lg="8">
<div>
@foreach (KeyValuePair<string, BlogEssay> essay in _essays)
{
<FluentCard Style="margin: 2rem 0 2rem 0">
<div>
<a href="essays/@(essay.Key)">
<FluentLabel Typo="@Typography.H4">
@essay.Value.Title
</FluentLabel>
</a>
<FluentStack VerticalAlignment="@VerticalAlignment.Center"
Style="margin: 1rem 0 1rem 0"
HorizontalGap="4">
<FluentIcon Value="@(new Icons.Regular.Size16.Calendar())"/>
<span style="margin: auto 0 auto 0">
@(essay.Value.PublishTime.ToString("yyyy-MM-dd HH:mm:ss"))
</span>
@if (essay.Value.Tags.Count != 0)
{
<FluentIcon Value="@(new Icons.Regular.Size16.TagMultiple())"/>
@foreach (string tag in essay.Value.Tags)
{
<span style="margin: auto 0 auto 0">
@tag
</span>
}
}
</FluentStack>
</div>
</FluentCard>
}
<div class="pagination">
<FluentStack HorizontalAlignment="@HorizontalAlignment.Center"
HorizontalGap="20">
@if (Page != 1)
{
<a href="/?page=@(Page - 1)#blog-content" class="pagination-item">
<i class="chevron-left"></i>
</a>
}
@if (Page == 1)
{
<a href="/?page=1#blog-content" class="pagination-item">
<span>1</span>
</a>
<a href="/?page=2#blog-content" class="pagination-item">
<span>2</span>
</a>
<a href="/?page=3#blog-content" class="pagination-item">
<span>3</span>
</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>
<BlogFooter/>
@ -82,5 +125,39 @@
@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");
}
}
}

34
YaeBlog.Theme.FluentUI/Pages/Home.razor.css
View File

@ -54,3 +54,37 @@
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";
}

1
YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj
View File

@ -14,6 +14,7 @@
<ItemGroup>
<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.Icons" Version="4.3.1" />
</ItemGroup>
<ItemGroup>