feat: 使用Bootstrap重写前端页面 (#2)
All checks were successful
Build blog docker image / Build-Blog-Image (push) Successful in 1m15s
All checks were successful
Build blog docker image / Build-Blog-Image (push) Successful in 1m15s
Reviewed-on: #2
This commit is contained in:
parent
cfcd920e73
commit
ca4f6449d3
|
|
@ -1,7 +1,6 @@
|
||||||
using Microsoft.AspNetCore.Builder;
|
using Microsoft.AspNetCore.Builder;
|
||||||
using Microsoft.Extensions.DependencyInjection;
|
using Microsoft.Extensions.DependencyInjection;
|
||||||
using Microsoft.Extensions.Options;
|
using Microsoft.Extensions.Options;
|
||||||
using Microsoft.FluentUI.AspNetCore.Components;
|
|
||||||
using YaeBlog.Core.Models;
|
using YaeBlog.Core.Models;
|
||||||
using YaeBlog.Core.Processors;
|
using YaeBlog.Core.Processors;
|
||||||
using YaeBlog.Core.Services;
|
using YaeBlog.Core.Services;
|
||||||
|
|
@ -15,7 +14,6 @@ public static class WebApplicationBuilderExtensions
|
||||||
builder.Services.Configure<BlogOptions>(builder.Configuration.GetSection(BlogOptions.OptionName));
|
builder.Services.Configure<BlogOptions>(builder.Configuration.GetSection(BlogOptions.OptionName));
|
||||||
|
|
||||||
builder.Services.AddHttpClient();
|
builder.Services.AddHttpClient();
|
||||||
builder.Services.AddFluentUIComponents();
|
|
||||||
|
|
||||||
builder.Services.AddMarkdig();
|
builder.Services.AddMarkdig();
|
||||||
builder.Services.AddYamlParser();
|
builder.Services.AddYamlParser();
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,7 @@ public class EssayContentService
|
||||||
|
|
||||||
public bool TryAdd(string key, BlogEssay essay) => _essays.TryAdd(key, essay);
|
public bool TryAdd(string key, BlogEssay essay) => _essays.TryAdd(key, essay);
|
||||||
|
|
||||||
public IEnumerable<KeyValuePair<string, BlogEssay>> Essays => _essays;
|
public IDictionary<string, BlogEssay> Essays => _essays;
|
||||||
|
|
||||||
public int Count => _essays.Count;
|
|
||||||
|
|
||||||
public void RefreshTags()
|
public void RefreshTags()
|
||||||
{
|
{
|
||||||
|
|
@ -42,6 +40,7 @@ public class EssayContentService
|
||||||
}
|
}
|
||||||
|
|
||||||
public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
|
public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
|
||||||
|
orderby item.Value.Count descending
|
||||||
select KeyValuePair.Create(item.Key, item.Value.Count);
|
select KeyValuePair.Create(item.Key, item.Value.Count);
|
||||||
|
|
||||||
public int TagCount => _tags.Count;
|
public int TagCount => _tags.Count;
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,6 @@
|
||||||
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.6" />
|
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.6" />
|
||||||
<PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
|
<PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
|
||||||
<PackageReference Include="YamlDotNet" Version="13.7.1" />
|
<PackageReference Include="YamlDotNet" Version="13.7.1" />
|
||||||
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.8.0" />
|
|
||||||
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.8.0" />
|
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
|
|
||||||
<div style="width: 100%">
|
|
||||||
<FluentCard>
|
|
||||||
<div class="announcement-title">
|
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.Note())" />
|
|
||||||
<FluentLabel Typo="@Typography.H5" Style="margin-left: 0.5rem">
|
|
||||||
公告
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height: 1rem"></div>
|
|
||||||
|
|
||||||
<FluentLabel>
|
|
||||||
@(BlogOptionsInstance.Announcement)
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<div style="height: 0.5rem"></div>
|
|
||||||
</FluentCard>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@code {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.announcement-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
@ -7,21 +7,18 @@
|
||||||
<base href="/"/>
|
<base href="/"/>
|
||||||
<link rel="stylesheet" href="YaeBlog.styles.css"/>
|
<link rel="stylesheet" href="YaeBlog.styles.css"/>
|
||||||
<link rel="icon" href="images/favicon.ico"/>
|
<link rel="icon" href="images/favicon.ico"/>
|
||||||
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet"/>
|
<link rel="stylesheet" href="bootstrap.min.css"/>
|
||||||
<link href="globals.css" rel="stylesheet"/>
|
<link rel="stylesheet" href="bootstrap-icons.min.css"/>
|
||||||
|
<link rel="stylesheet" href="_content/Blazor.Bootstrap/blazor.bootstrap.css"/>
|
||||||
|
<link rel="stylesheet" href="globals.css"/>
|
||||||
<HeadOutlet/>
|
<HeadOutlet/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<Routes/>
|
<Routes/>
|
||||||
|
|
||||||
<FluentDesignTheme StorageName="theme" Mode="@DesignThemeModes.System"/>
|
|
||||||
<loading-theme storage-name="theme"></loading-theme>
|
|
||||||
|
|
||||||
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
|
|
||||||
<script src="_framework/blazor.web.js"></script>
|
<script src="_framework/blazor.web.js"></script>
|
||||||
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
|
<script src="bootstrap.bundle.min.js"></script>
|
||||||
<script src="themes.js" type="module"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
@using YaeBlog.Core.Services
|
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
@inject EssayContentService EssayContentInstance
|
|
||||||
|
|
||||||
<div style="margin: 2rem 0; width: 100%">
|
|
||||||
<FluentCard>
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical"
|
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<div class="about-avatar">
|
|
||||||
<img src="@(BlogOptionsInstance.About.AvatarImage)" alt="author-avatar"
|
|
||||||
class="about-avatar-img">
|
|
||||||
</div>
|
|
||||||
<FluentLabel Typo="@Typography.H3">
|
|
||||||
@(BlogOptionsInstance.Author)
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<div style="height: 0.5rem"></div>
|
|
||||||
|
|
||||||
<FluentStack Orientation="@Orientation.Horizontal"
|
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center"
|
|
||||||
HorizontalGap="20">
|
|
||||||
<a href="/blog/archives">
|
|
||||||
<div>
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
文章
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
@(EssayContentInstance.Count)
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/tags">
|
|
||||||
<div>
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
标签
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
@(EssayContentInstance.TagCount)
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentCard>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@code {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
.about-avatar {
|
|
||||||
position: relative;
|
|
||||||
width: 6rem;
|
|
||||||
height: 6rem;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-avatar-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: transparent;
|
|
||||||
object-fit: cover;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
|
|
||||||
0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-avatar-img:hover {
|
|
||||||
animation: rotate-animation 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-animation {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
|
|
||||||
<div class="footer-content">
|
|
||||||
<div>
|
|
||||||
<a href="https://learn.microsoft.com/zh-cn/aspnet/core/blazor/" target="_blank" rel="nofollow noopener">
|
|
||||||
<span> Blazor </span>
|
|
||||||
</a>
|
|
||||||
<i class="love-tag"></i>
|
|
||||||
<span> YaeBlog </span>
|
|
||||||
<i class="love-tag"></i>
|
|
||||||
<span>FluentUI</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="padding-top: 0.3rem">
|
|
||||||
<span>
|
|
||||||
©@(BlogOptionsInstance.StartYear) - @(DateTime.Now.Year) By @(BlogOptionsInstance.Author)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@if (!string.IsNullOrEmpty(BlogOptionsInstance.RegisterInformation))
|
|
||||||
{
|
|
||||||
<div style="padding-top: 0.3rem">
|
|
||||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
|
|
||||||
<span>@(BlogOptionsInstance.RegisterInformation)</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@code {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
.footer-content {
|
|
||||||
padding: 2rem 0 1rem 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.love-tag {
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: "Font Awesome 6 Free", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.love-tag::before {
|
|
||||||
content: "\f004";
|
|
||||||
}
|
|
||||||
42
YaeBlog/Components/BlogInformationCard.razor
Normal file
42
YaeBlog/Components/BlogInformationCard.razor
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
@using YaeBlog.Core.Services
|
||||||
|
|
||||||
|
@inject EssayContentService EssayContentInstance
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-auto p-4">
|
||||||
|
<Image Src="images/avatar.png" Alt="Ricardo's avatar"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row justify-content-center p-3">
|
||||||
|
<div class="col-auto fs-4">
|
||||||
|
“奇奇怪怪东西的聚合地”
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row justify-content-between px-2 py-1 fs-5">
|
||||||
|
<div class="col-auto">
|
||||||
|
文章
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto">
|
||||||
|
<a href="/blog/archives">
|
||||||
|
@(EssayContentInstance.Essays.Count)
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row justify-content-between px-2 py-1 fs-5">
|
||||||
|
<div class="col-auto">
|
||||||
|
标签
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto">
|
||||||
|
<a href="/blog/tags">
|
||||||
|
@(EssayContentInstance.TagCount)
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
39
YaeBlog/Components/EssayCard.razor
Normal file
39
YaeBlog/Components/EssayCard.razor
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
@using YaeBlog.Core.Models
|
||||||
|
|
||||||
|
<div class="container p-3">
|
||||||
|
<div class="row fs-2 fw-bold py-2 essay-title">
|
||||||
|
<a href="/blog/essays/@(Essay.FileName)" target="_blank">@(Essay.Title)</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row p-2 justify-content-start">
|
||||||
|
<div class="col-auto fw-light">
|
||||||
|
@(Essay.PublishTime.ToString("yyyy-MM-dd"))
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@foreach (string key in Essay.Tags)
|
||||||
|
{
|
||||||
|
<div class="col-auto">
|
||||||
|
<a href="/blog/tags/?tagName=@key">
|
||||||
|
# @key
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row p-2">
|
||||||
|
<div class="col">
|
||||||
|
@(Essay.Description)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col border-bottom">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[Parameter]
|
||||||
|
public required BlogEssay Essay { get; set; }
|
||||||
|
}
|
||||||
3
YaeBlog/Components/EssayCard.razor.css
Normal file
3
YaeBlog/Components/EssayCard.razor.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.essay-title a {
|
||||||
|
color: var(--bs-body-color);
|
||||||
|
}
|
||||||
14
YaeBlog/Components/Foonter.razor
Normal file
14
YaeBlog/Components/Foonter.razor
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<div class="row align-items-end text-center">
|
||||||
|
<div class="row">
|
||||||
|
<p class="fs-6">
|
||||||
|
2021 - @(DateTimeOffset.Now.Year) © <a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>，
|
||||||
|
由 <a href="https://dotnet.microsoft.com/zh-cn/" target="_blank">.NET @(Environment.Version)</a> 驱动。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<p class="fs-6">
|
||||||
|
<a href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2022004429号-1</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
0
YaeBlog/Components/Foonter.razor.css
Normal file
0
YaeBlog/Components/Foonter.razor.css
Normal file
|
|
@ -1,36 +0,0 @@
|
||||||
<FluentGridItem md="3" sm="6" xs="12">
|
|
||||||
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<div style="margin: 10px 20px; width: 75%; height: 90%">
|
|
||||||
<a href="@Address" target="_blank">
|
|
||||||
<FluentCard Width="100%" Height="100%">
|
|
||||||
<FluentStack Orientation="@Orientation.Horizontal">
|
|
||||||
<div style="width: 25%; margin: 5px 0">
|
|
||||||
<img src="@ImageAddress" alt="@Name" width="100%"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical">
|
|
||||||
<FluentLabel Typo="@Typography.H3">
|
|
||||||
@Name
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
|
||||||
@Description
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentCard>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentGridItem>
|
|
||||||
|
|
||||||
|
|
||||||
@code {
|
|
||||||
[Parameter] public string Name { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
[Parameter] public string Description { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
[Parameter] public string ImageAddress { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
[Parameter] public string Address { get; set; } = string.Empty;
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +1,49 @@
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
@attribute [StreamRendering]
|
||||||
|
|
||||||
<FluentLayout>
|
<main class="container">
|
||||||
<FluentHeader>
|
<div class="row" style="height: 80px">
|
||||||
<FluentStack Orientation="@Orientation.Horizontal">
|
<div class="px-2 col-8">
|
||||||
<div style="width: 50px"></div>
|
<a href="/blog/" class="p-2">
|
||||||
|
<h4>Ricardo's Blog</h4>
|
||||||
<a href="/blog">
|
|
||||||
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
|
|
||||||
@BlogOptionsInstance.Author
|
|
||||||
</FluentLabel>
|
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FluentSpacer/>
|
<div class="col-4 d-flex justify-content-around align-items-center">
|
||||||
|
<a href="/blog/" class="p-2">
|
||||||
<a href="/blog" style="margin: auto 0 auto 0">
|
<div class="d-inline-flex" style="text-align: center">
|
||||||
<div class="quick-link">
|
<Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.Home())" Color="@Color.Fill"/>
|
<h5>首页</h5>
|
||||||
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
|
|
||||||
Style="margin-left: 0.2rem">
|
|
||||||
首页
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/blog/archives" style="margin: auto 0 auto 0">
|
<a href="/blog/archives/" class="p-2">
|
||||||
<div class="quick-link">
|
<div class="d-inline-flex">
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.Archive())" Color="@Color.Fill"/>
|
<Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="IconSize.x5"/>
|
||||||
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
|
<h5>归档</h5>
|
||||||
Style="margin-left: 0.2rem">
|
|
||||||
归档
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/blog/tags" style="margin: auto 0 auto 0">
|
<a href="/blog/tags/" class="p-2">
|
||||||
<div class="quick-link">
|
<div class="d-inline-flex">
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.Tag())" Color="@Color.Fill"/>
|
<Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
|
||||||
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
|
<h5>标签</h5>
|
||||||
Style="margin-left: 0.2rem">
|
|
||||||
标签
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/blog/about" style="margin: auto 0 auto 0">
|
<a href="/blog/about/" class="p-2">
|
||||||
<div class="quick-link">
|
<div class="d-inline-flex">
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.PersonInfo())" Color="@Color.Fill"/>
|
<Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
|
||||||
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
|
<h5>关于</h5>
|
||||||
Style="margin-left: 0.2rem">
|
|
||||||
关于
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="/blog/links" style="margin: auto 0 auto 0">
|
<div class="row px-4 py-2">
|
||||||
<div class="quick-link">
|
@Body
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.LinkMultiple())" Color="@Color.Fill"/>
|
</div>
|
||||||
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
|
|
||||||
Style="margin-left: 0.2rem">
|
|
||||||
友链
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="width: 20px"></div>
|
<Foonter/>
|
||||||
</FluentStack>
|
</main>
|
||||||
</FluentHeader>
|
|
||||||
<FluentBodyContent Style="height: 100%">
|
|
||||||
<main style="height: 100%">
|
|
||||||
@Body
|
|
||||||
</main>
|
|
||||||
</FluentBodyContent>
|
|
||||||
</FluentLayout>
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.quick-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +1,25 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
<div class="row" style="height: 80px">
|
||||||
|
<div class="px-2 col-8">
|
||||||
|
<a href="/" class="p-2">
|
||||||
|
<h4>Ricardo's Index</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FluentLayout Style="min-height: 100vh">
|
<div class="col-4 d-flex justify-content-around align-items-center">
|
||||||
<FluentHeader Height="60">
|
<a href="mailto://shicangjuner@outlook.com" class="p-2" target="_blank">
|
||||||
<a href="/">
|
<h5>E-mail</h5>
|
||||||
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
|
</a>
|
||||||
Ricardo's Index
|
</div>
|
||||||
</FluentLabel>
|
</div>
|
||||||
</a>
|
|
||||||
</FluentHeader>
|
|
||||||
|
|
||||||
<FluentBodyContent>
|
<div class="row px-4 center">
|
||||||
<main style="height: 100%">
|
<div class="py-2">
|
||||||
@Body
|
@Body
|
||||||
</main>
|
</div>
|
||||||
</FluentBodyContent>
|
</div>
|
||||||
</FluentLayout>
|
|
||||||
|
<Foonter/>
|
||||||
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.center {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 48em;
|
||||||
|
min-height: calc(100vh - 80px);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
@ -1,40 +1,87 @@
|
||||||
@page "/blog/about"
|
@page "/blog/about"
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
<PageTitle>
|
<div class="col">
|
||||||
关于 - @(BlogOptionsInstance.Author)
|
<h1>关于</h1>
|
||||||
</PageTitle>
|
|
||||||
|
|
||||||
<div style="height: 100%">
|
|
||||||
<div class="about-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
|
||||||
<div class="about-content">
|
|
||||||
<FluentCard>
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical"
|
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<div class="about-avatar">
|
|
||||||
<img src="@(BlogOptionsInstance.About.AvatarImage)" alt="author-avatar"
|
|
||||||
class="about-avatar-img">
|
|
||||||
</div>
|
|
||||||
<FluentLabel Typo="@Typography.H2">
|
|
||||||
@(BlogOptionsInstance.Author)
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
|
||||||
@(BlogOptionsInstance.About.Introduction)
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentStack>
|
|
||||||
|
|
||||||
<div style="height: 2rem"></div>
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
|
||||||
@(BlogOptionsInstance.About.Description)
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentCard>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BlogFooter/>
|
<div class="row">
|
||||||
|
<div class="col fst-italic py-4">
|
||||||
|
把字刻在石头上！
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row p-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h3>关于我</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
计算机科学与技术在读大学生，明光村幼儿园附属大学所属。正处于读书和失业的叠加态。
|
||||||
|
一般在互联网上使用<span class="fst-italic">初冬的朝阳</span>或者<span class="fst-italic">jackfiled</span>的名字活动。
|
||||||
|
<span class="text-decoration-line-through">都是ICP备案过的人了，网名似乎没有太大的用处（</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
主要是一个C#程序员，目前也在尝试写一点Rust。总体上对于编程语言的态度是“<span>大家都是我的翅膀.jpg</span>”。
|
||||||
|
前后端分离的项目本当上手。
|
||||||
|
常常因为现实的压力而写一些C/C++。
|
||||||
|
对于Java和Go的评价很低。
|
||||||
|
日常使用ArchLinux。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
100%社恐。日常生活是宅在电脑前面自言自语。兴趣活动是读书和看番。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
常常被人批评没有梦想，这里就随便瞎编一下。
|
||||||
|
成为嵌入式工程师，修好桌面上的<a href="https://www.bilibili.com/video/BV1VA411p7MD">HoloCubic</a>。
|
||||||
|
完成第一个不是课程设计的个人开源项目。
|
||||||
|
遇到能够搭伙过日子的人也算是一大梦想，虽然社恐人根本不知道从何开始的说，
|
||||||
|
<span class="text-decoration-line-through">什么时候天上才能掉美少女？</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
公开的联系渠道是<a href="mailto:shicangjuner@outlook.com">电子邮件</a>。
|
||||||
|
也可以试试在各大平台搜索上面提到的名字。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row p-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h3>关于本站</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
本站肇始于2021年下半年，在开始的两年中个人网站和博客是分别的两个网站，个人网站是裸HTML写的，博客是用
|
||||||
|
<a href="https://hexo.io">Hexo</a>渲染的。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row py-2">
|
||||||
|
<div class="col">
|
||||||
|
2024年，我们决定使用.NET技术完全重构两个网站，合二为一。虽然目前这个版本还是一个半成品，但是我们一定会努力的~（确信。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
.about-background {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-content {
|
|
||||||
top: 33%;
|
|
||||||
position: absolute;
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-avatar {
|
|
||||||
position: relative;
|
|
||||||
width: 10rem;
|
|
||||||
height: 10rem;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-avatar-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: transparent;
|
|
||||||
object-fit: cover;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
|
|
||||||
0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-avatar-img:hover {
|
|
||||||
animation: rotate-animation 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-animation {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -2,64 +2,59 @@
|
||||||
@using YaeBlog.Core.Models
|
@using YaeBlog.Core.Models
|
||||||
@using YaeBlog.Core.Services
|
@using YaeBlog.Core.Services
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
@inject EssayContentService EssayContentInstance
|
@inject EssayContentService EssayContentInstance
|
||||||
|
|
||||||
<PageTitle>
|
<div class="container">
|
||||||
存档
|
<div class="row">
|
||||||
</PageTitle>
|
<div class="col">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h1>归档</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="height: 100%">
|
<div class="row">
|
||||||
<div class="archive-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
<div class="col fst-italic py-4">
|
||||||
<div class="archive-title">
|
时光图书馆，黑历史集散地。
|
||||||
<FluentStack Orientation="@Orientation.Vertical"
|
</div>
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
</div>
|
||||||
<FluentLabel Typo="@Typography.H1" Color="@Color.Fill">
|
</div>
|
||||||
存 档
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentStack>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height: 2rem"></div>
|
@foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
|
||||||
|
{
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h3>@(group.Key.Year)</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="margin: 0 8% 0 8%">
|
<div class="container px-3 py-2">
|
||||||
<FluentCard>
|
@foreach (KeyValuePair<string, BlogEssay> essay in group)
|
||||||
<div style="margin: 0 8% 0 8%">
|
|
||||||
<FluentLabel Typo="@Typography.H2" Style="margin: 3rem 0 2rem 0; color: #404853">
|
|
||||||
共计@(EssayContentInstance.Count)篇文章
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
@foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
|
|
||||||
{
|
|
||||||
<FluentLabel Typo="@Typography.H3" Style="color: #718096; margin: 2rem 0 1rem 0">
|
|
||||||
@(group.Key.ToString("yyyy年"))
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<div style="margin: 0 4% 0 4%">
|
|
||||||
@foreach (KeyValuePair<string, BlogEssay> pair in group)
|
|
||||||
{
|
{
|
||||||
<div class="archive-item">
|
<div class="row py-1">
|
||||||
<a href="/blog/essays/@(pair.Key)" target="_blank">
|
<div class="col-auto">
|
||||||
<FluentStack Orientation="@Orientation.Horizontal">
|
@(essay.Value.PublishTime.ToString("MM-dd"))
|
||||||
<FluentLabel Typo="@Typography.H5" Style="width: 80px">
|
</div>
|
||||||
@(pair.Value.PublishTime.ToString("MM-dd"))
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.H5">
|
<div class="col-auto">
|
||||||
@(pair.Value.Title)
|
<a href="/blog/@(essay.Key)">
|
||||||
</FluentLabel>
|
@(essay.Value.Title)
|
||||||
</FluentStack>
|
</a>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FluentCard>
|
</div>
|
||||||
</div>
|
}
|
||||||
|
|
||||||
<BlogFooter/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
@ -67,12 +62,11 @@
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
IEnumerable<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> essays =
|
base.OnInitialized();
|
||||||
from essay in EssayContentInstance.Essays
|
|
||||||
orderby essay.Value.PublishTime descending
|
|
||||||
group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1);
|
|
||||||
|
|
||||||
_essays.AddRange(essays);
|
_essays.AddRange(from essay in EssayContentInstance.Essays
|
||||||
|
orderby essay.Value.PublishTime descending
|
||||||
|
group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
.archive-background {
|
|
||||||
position: relative;
|
|
||||||
height: 60%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-title {
|
|
||||||
top: 43%;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-item {
|
|
||||||
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
||||||
margin: 0.5rem 0 0.5rem 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-item:hover {
|
|
||||||
background-color: rgba(169, 169, 169, 0.22);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -2,178 +2,111 @@
|
||||||
@using YaeBlog.Core.Models
|
@using YaeBlog.Core.Models
|
||||||
@using YaeBlog.Core.Services
|
@using YaeBlog.Core.Services
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
@inject EssayContentService EssayContentInstance
|
@inject EssayContentService EssayContentInstance
|
||||||
@inject NavigationManager NavigationManagerInstance
|
@inject NavigationManager NavigationInstance
|
||||||
|
|
||||||
<PageTitle>
|
<div class="container">
|
||||||
@(BlogOptionsInstance.Author)'s Blog
|
<div class="row">
|
||||||
</PageTitle>
|
<div class="col-sm-12 col-md-9">
|
||||||
|
@foreach (KeyValuePair<string, BlogEssay> pair in _essays)
|
||||||
|
{
|
||||||
|
<EssayCard Essay="@(pair.Value)"/>
|
||||||
|
}
|
||||||
|
|
||||||
<div style="height: 100%">
|
<div class="row align-items-center justify-content-center p-3">
|
||||||
<div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
|
@if (_page == 1)
|
||||||
<div class="blog-title">
|
{
|
||||||
<FluentLabel Typo="@Typography.H1" Style="color: white">
|
<div class="col-auto fw-light">上一页</div>
|
||||||
@(BlogOptionsInstance.Author)'s Blog
|
}
|
||||||
</FluentLabel>
|
else
|
||||||
</div>
|
{
|
||||||
|
<div class="col-auto">
|
||||||
<div class="scroll-down">
|
<a href="/blog/?page=@(_page - 1)">上一页</a>
|
||||||
<i class="scroll-down-tag"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height: 2rem" id="blog-content"></div>
|
|
||||||
|
|
||||||
<div style="margin: 0 8% 0 8%">
|
|
||||||
<FluentGrid>
|
|
||||||
<FluentGridItem xs="12" sm="12" md="9" lg="9">
|
|
||||||
<div>
|
|
||||||
@foreach (KeyValuePair<string, BlogEssay> essay in _essays)
|
|
||||||
{
|
|
||||||
<FluentCard Style="margin: 2rem 0 2rem 0">
|
|
||||||
<div>
|
|
||||||
<a href="/blog/essays/@(essay.Key)" target="_blank">
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
@(essay.Value.Title)
|
|
||||||
</FluentLabel>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div style="margin: 0.5rem 0 0.5rem 0">
|
|
||||||
<a href="/blog/essays/@(essay.Key)" target="_blank" style="color: #718096;">
|
|
||||||
<div class="essay-description">
|
|
||||||
@(essay.Value.Description)
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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="/blog/?page=@(Page - 1)#blog-content" class="pagination-item">
|
|
||||||
<i class="chevron-left"></i>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
|
|
||||||
@if (Page == 1)
|
|
||||||
{
|
|
||||||
<a href="/blog/?page=1#blog-content" class="pagination-item">
|
|
||||||
<span>1</span>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/?page=2#blog-content" class="pagination-item">
|
|
||||||
<span>2</span>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/?page=3#blog-content" class="pagination-item">
|
|
||||||
<span>3</span>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
else if (Page == _pageCount)
|
|
||||||
{
|
|
||||||
<a href="/blog/?page=@(_pageCount - 2)#blog-content" class="pagination-item">
|
|
||||||
<span>@(_pageCount - 2)</span>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/?page=@(_pageCount - 1)#blog-content" class="pagination-item">
|
|
||||||
<span>@(_pageCount - 1)</span>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/?page=@(_pageCount)#blog-content" class="pagination-item">
|
|
||||||
<span>@(_pageCount)</span>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<a href="/blog/?page=@(Page - 1)#blog-content" class="pagination-item">
|
|
||||||
<span>@(Page - 1)</span>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/?page=@(Page)#blog-content" class="pagination-item">
|
|
||||||
<span>@(Page)</span>
|
|
||||||
</a>
|
|
||||||
<a href="/blog/?page=@(Page + 1)#blog-content" class="pagination-item">
|
|
||||||
<span>@(Page + 1)</span>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
|
|
||||||
@if (Page != _pageCount)
|
|
||||||
{
|
|
||||||
<a href="/blog/?page=@(Page + 1)#blog-content" class="pagination-item">
|
|
||||||
<i class="chevron-right"></i>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
</FluentStack>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
</FluentGridItem>
|
|
||||||
<FluentGridItem xs="12" sm="12" md="3" lg="3">
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical">
|
|
||||||
<AuthorInformation/>
|
|
||||||
|
|
||||||
<Announcement/>
|
@if (_page == 1)
|
||||||
</FluentStack>
|
{
|
||||||
</FluentGridItem>
|
<div class="col-auto">
|
||||||
</FluentGrid>
|
1
|
||||||
|
</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">
|
||||||
|
@(_pageCount)
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="col-auto">
|
||||||
|
<a href="/blog/?page=@(_page - 1)">@(_page - 1)</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
@(_page)
|
||||||
|
</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>
|
||||||
|
|
||||||
<BlogFooter/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
||||||
[SupplyParameterFromQuery] private int? Page { get; set; }
|
[SupplyParameterFromQuery] private int? Page { get; set; }
|
||||||
|
|
||||||
private readonly List<KeyValuePair<string, BlogEssay>> _essays = [];
|
private readonly List<KeyValuePair<string, BlogEssay>> _essays = [];
|
||||||
private int _pageCount;
|
private const int EssaysPerPage = 8;
|
||||||
|
private int _pageCount = 1;
|
||||||
|
private int _page = 1;
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
Page ??= 1;
|
_page = Page ?? 1;
|
||||||
|
_pageCount = EssayContentInstance.Essays.Count / EssaysPerPage + 1;
|
||||||
|
|
||||||
IEnumerable<KeyValuePair<string, BlogEssay>[]> chunks =
|
if (EssaysPerPage * _page > EssayContentInstance.Essays.Count + EssaysPerPage)
|
||||||
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)
|
NavigationInstance.NavigateTo("/NotFount");
|
||||||
{
|
return;
|
||||||
flag = true;
|
|
||||||
_essays.AddRange(chunk);
|
|
||||||
}
|
|
||||||
|
|
||||||
count += 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_pageCount = count - 1;
|
_essays.AddRange(EssayContentInstance.Essays
|
||||||
|
.OrderByDescending(p => p.Value.PublishTime)
|
||||||
if (flag is false)
|
.Skip((_page - 1) * EssaysPerPage)
|
||||||
{
|
.Take(EssaysPerPage));
|
||||||
NavigationManagerInstance.NavigateTo("/NotFount");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,7 @@
|
||||||
.banner {
|
.essay-title a {
|
||||||
position: relative;
|
color: var(--bs-body-color);
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-title {
|
.read-more a {
|
||||||
color: white;
|
color: var(--bs-body-color);
|
||||||
text-align: center;
|
|
||||||
top: 43%;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-down {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-down-tag {
|
|
||||||
font-family: "Font Awesome 6 Free", sans-serif;
|
|
||||||
font-size: 36px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 900;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
animation: scroll-down-animation 1.5s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-down-tag::before {
|
|
||||||
content: "\f107";
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scroll-down-animation {
|
|
||||||
0% {
|
|
||||||
top: 0;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
top: -20px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
top: 0;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.essay-description {
|
|
||||||
width: 100%;
|
|
||||||
line-height: 1.4rem;
|
|
||||||
word-break: break-word;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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,83 +0,0 @@
|
||||||
@page "/blog/essays/{Filename}"
|
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
@using YaeBlog.Core.Services
|
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
@inject EssayContentService EssayContent
|
|
||||||
@inject NavigationManager NavigationInstance
|
|
||||||
|
|
||||||
<PageTitle>
|
|
||||||
@(_essay!.Title)
|
|
||||||
</PageTitle>
|
|
||||||
|
|
||||||
<div style="height: 100%">
|
|
||||||
<div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
|
||||||
<div class="essay-title">
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical"
|
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<FluentLabel Typo="@Typography.H1" Style="color: white">
|
|
||||||
@(_essay!.Title)
|
|
||||||
</FluentLabel>
|
|
||||||
<div class="essay-subtitle">
|
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.Calendar())"
|
|
||||||
Color="@Color.Fill"/>
|
|
||||||
<FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
|
|
||||||
@(_essay!.PublishTime.ToString("yyyy年MM月dd日"))
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
<div class="essay-subtitle">
|
|
||||||
<FluentIcon Value="@(new Icons.Regular.Size16.DataBarVerticalAscending())"
|
|
||||||
Color="@Color.Fill"/>
|
|
||||||
<FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
|
|
||||||
@(_essay!.WordCount)字
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
</FluentStack>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height: 2rem"></div>
|
|
||||||
|
|
||||||
<div style="margin: 0 8% 0 8%">
|
|
||||||
<FluentGrid>
|
|
||||||
<FluentGridItem xs="12" sm="12" md="8" lg="8">
|
|
||||||
<FluentCard Style="margin: 2rem 0">
|
|
||||||
<div class="essay-content">
|
|
||||||
@((MarkupString)_essay!.HtmlContent)
|
|
||||||
</div>
|
|
||||||
</FluentCard>
|
|
||||||
</FluentGridItem>
|
|
||||||
|
|
||||||
<FluentGridItem xs="12" sm="12" md="4" lg="4">
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical">
|
|
||||||
<AuthorInformation/>
|
|
||||||
|
|
||||||
<Announcement/>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentGridItem>
|
|
||||||
</FluentGrid>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BlogFooter/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@code {
|
|
||||||
[Parameter] public string? Filename { get; set; }
|
|
||||||
|
|
||||||
private BlogEssay? _essay;
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
|
||||||
{
|
|
||||||
if (string.IsNullOrEmpty(Filename))
|
|
||||||
{
|
|
||||||
NavigationInstance.NavigateTo("NotFound");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!EssayContent.TryGet(Filename, out _essay))
|
|
||||||
{
|
|
||||||
NavigationInstance.NavigateTo("NotFound");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
.essay-background {
|
|
||||||
position: relative;
|
|
||||||
height: 80%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.essay-title {
|
|
||||||
color: white;
|
|
||||||
top: 43%;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.essay-content {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.essay-subtitle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
61
YaeBlog/Pages/Essays.razor
Normal file
61
YaeBlog/Pages/Essays.razor
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
@page "/blog/essays/{BlogKey}"
|
||||||
|
@using YaeBlog.Core.Models
|
||||||
|
@using YaeBlog.Core.Services
|
||||||
|
|
||||||
|
@inject NavigationManager NavigationInstance
|
||||||
|
@inject EssayContentService EssayContentInstance
|
||||||
|
|
||||||
|
<PageTitle>
|
||||||
|
@(_essay!.Title)
|
||||||
|
</PageTitle>
|
||||||
|
|
||||||
|
<div class="container py-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto">
|
||||||
|
<h1>@(_essay!.Title)</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row p-4">
|
||||||
|
<div class="col-auto fw-light">
|
||||||
|
@(_essay!.PublishTime.ToString("yyyy-MM-dd"))
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@foreach (string tag in _essay!.Tags)
|
||||||
|
{
|
||||||
|
<div class="col-auto">
|
||||||
|
<a href="/tags/?tagName=@(tag)"># @(tag)</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-md-12">
|
||||||
|
@((MarkupString)_essay!.HtmlContent)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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
0
YaeBlog/Pages/Essays.razor.css
Normal file
|
|
@ -1,89 +1,53 @@
|
||||||
@page "/"
|
@page "/"
|
||||||
|
|
||||||
<PageTitle>
|
<div class="container">
|
||||||
初冬的朝阳个人主页
|
<div class="row py-4">
|
||||||
</PageTitle>
|
<div class="col-4">
|
||||||
|
<Image Src="images/avatar.png" Alt="Ricardo's Avatar"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical" Width="100%" Style="min-height: 100%">
|
<div class="col-8">
|
||||||
<div style="width: 100%; height: auto">
|
<div class="container px-3">
|
||||||
<FluentGrid>
|
<div class="row">
|
||||||
<FluentGridItem md="3" xs="12">
|
<h4 class="fw-bold">初冬的朝阳 (Ricardo Ren)</h4>
|
||||||
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
|
</div>
|
||||||
<img src="images/avatar.png" alt="Ricardo's Avatar" class="avatar-image"/>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentGridItem>
|
|
||||||
|
|
||||||
<FluentGridItem md="9" xs="12">
|
<div class="row">
|
||||||
<FluentStack Orientation="@Orientation.Vertical" Style="padding: 25px" VerticalGap="20">
|
<p class="fs-5">a.k.a jackfiled</p>
|
||||||
<FluentLabel Typo="@Typography.H3" Weight="@FontWeight.Bold">
|
</div>
|
||||||
初冬的朝阳 (Ricardo Ren)
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
<div class="row">
|
||||||
a.k.a jackfiled
|
<p class="fs-5 fst-italic">世界很大，时间很长。</p>
|
||||||
</FluentLabel>
|
</div>
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body" Style="font-style: italic">
|
<div class="row">
|
||||||
世界很大，时间很长。
|
<p class="fs-5">
|
||||||
</FluentLabel>
|
平平无奇的计算机科学与技术学徒，连微小的贡献都没做。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
<div class="row" style="padding-top: 80px">
|
||||||
一个平平无奇的CS学生。
|
<p class="fs-5">恕我不能亲自为您沏茶（？），还是非常欢迎您能够来到我的主页。</p>
|
||||||
</FluentLabel>
|
</div>
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
<div class="row">
|
||||||
还太菜了，连微小的贡献都没做。
|
<p class="fs-5">
|
||||||
</FluentLabel>
|
如果您想四处看看，了解一下屏幕对面的人，可以在我的 <a href="/blog/">博客</a> 看看。
|
||||||
|
如果您对于明光村幼儿园某附属技校的计算机教学感兴趣，您可以移步到
|
||||||
|
<a href="https://jackfiled.github.io/wiki/">我的学习笔记</a>，
|
||||||
|
<span class="fs-5 text-decoration-line-through">虽然这笔记我自己也木有看过。</span>
|
||||||
|
如果您想批判一下我的代码，在 <a href="https://github.com/jackfiled" target="_blank">Github</a> 和
|
||||||
|
<a href="https://git.rrricardo.top/jackfiled/" target="_blank">Gitea</a> 都可以找到。
|
||||||
|
</p>
|
||||||
|
<p class="fs-5">
|
||||||
|
如果您真的很闲，也可以四处搜寻一下，也许存在着一些不为人知的彩蛋。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="height: 20px"></div>
|
|
||||||
|
|
||||||
<FluentStack Orientation="@Orientation.Horizontal" HorizontalGap="20">
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
|
||||||
<a href="https://github.com/jackfiled">Github</a>
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
|
||||||
<a href="https://git.rrricardo.top/jackfiled">Gitea</a>
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body">
|
|
||||||
<a href="mailto://shicangjuner@outlook.com">E-Mail</a>
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentGridItem>
|
|
||||||
</FluentGrid>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<FluentDivider Style="width: 90%" Orientation="@Orientation.Horizontal" Role="@DividerRole.Separator"/>
|
|
||||||
</FluentStack>
|
|
||||||
|
|
||||||
<div style="width: 100%; height: auto">
|
|
||||||
<FluentGrid Justify="@JustifyContent.Center">
|
|
||||||
<WebsiteCard Name="部落格" Address="/blog/" ImageAddress="/images/blog-icon.png"
|
|
||||||
Description="奇奇怪怪东西的聚集地"/>
|
|
||||||
<WebsiteCard Name="笔记本" Address="https://jackfiled.github.io/wiki/" ImageAddress="/images/wiki-icon.png"
|
|
||||||
Description="技校学习笔记"/>
|
|
||||||
</FluentGrid>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div style="flex: 1"></div>
|
|
||||||
|
|
||||||
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical" HorizontalAlignment="@HorizontalAlignment.Center"
|
|
||||||
Style="padding: 20px">
|
|
||||||
<FluentLabel>
|
|
||||||
2021 - @(DateTimeOffset.Now.Year) By <a href="https://rrricardo.top">Ricardo Ren</a>
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel>
|
|
||||||
<a href="https://beian.miit.gov.cn">蜀ICP备2022004429号-1</a>
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentStack>
|
|
||||||
</FluentStack>
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
.index-container {
|
|
||||||
background-color: #f0f2f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-image {
|
|
||||||
margin: 25px;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-width: 300px;
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-zone {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
@page "/blog/links"
|
|
||||||
@using YaeBlog.Core.Models
|
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
|
|
||||||
<PageTitle>
|
|
||||||
友链
|
|
||||||
</PageTitle>
|
|
||||||
|
|
||||||
<div style="height: 100%">
|
|
||||||
<div class="link-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
|
||||||
<div class="link-content">
|
|
||||||
<FluentStack Orientation="@Orientation.Vertical"
|
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
|
||||||
<FluentLabel Typo="@Typography.H2" Style="color: white">
|
|
||||||
友 情 链 接
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<div style="height: 5rem"></div>
|
|
||||||
|
|
||||||
<FluentCard Style="padding: 3rem;">
|
|
||||||
<FluentGrid>
|
|
||||||
@foreach (FriendLink link in BlogOptionsInstance.Links)
|
|
||||||
{
|
|
||||||
<FluentGridItem xs="12" sm="6" md="4" lg="3">
|
|
||||||
<a href="@(link.Link)" target="_blank">
|
|
||||||
<div class="link-item">
|
|
||||||
<div class="link-item-image">
|
|
||||||
<img src="@(link.AvatarImage)" alt="@(link.Name)">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin: 0.5rem">
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
@(link.Name)
|
|
||||||
</FluentLabel>
|
|
||||||
|
|
||||||
<FluentLabel Typo="@Typography.Body" Style="color: #718096">
|
|
||||||
@(link.Description)
|
|
||||||
</FluentLabel>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</FluentGridItem>
|
|
||||||
}
|
|
||||||
</FluentGrid>
|
|
||||||
</FluentCard>
|
|
||||||
</FluentStack>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BlogFooter/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@code {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
.link-background {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-content {
|
|
||||||
top: 23%;
|
|
||||||
position: absolute;
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-item {
|
|
||||||
display: flex;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-item:hover {
|
|
||||||
background-color: rgba(172, 172, 172, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-item-image {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-item-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,15 +1,7 @@
|
||||||
@page "/NotFound"
|
@page "/NotFound"
|
||||||
|
|
||||||
<div style="height: 100%">
|
<div class="container">
|
||||||
<div style="height: 2rem"></div>
|
<h3>NotFound!</h3>
|
||||||
|
|
||||||
<div style="margin: 0 8%">
|
|
||||||
<FluentCard>
|
|
||||||
<FluentLabel Typo="@Typography.H4">
|
|
||||||
前面的区域，以后再来探索吧，，
|
|
||||||
</FluentLabel>
|
|
||||||
</FluentCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
|
||||||
0
YaeBlog/Pages/NotFound.razor.css
Normal file
0
YaeBlog/Pages/NotFound.razor.css
Normal file
|
|
@ -1,96 +1,67 @@
|
||||||
@page "/blog/tags"
|
@page "/blog/tags/"
|
||||||
@using YaeBlog.Core.Models
|
@using YaeBlog.Core.Models
|
||||||
@using YaeBlog.Core.Services
|
@using YaeBlog.Core.Services
|
||||||
|
|
||||||
@inject BlogOptions BlogOptionsInstance
|
|
||||||
@inject EssayContentService EssayContentInstance
|
@inject EssayContentService EssayContentInstance
|
||||||
|
|
||||||
<PageTitle>
|
<div class="container">
|
||||||
标签
|
<div class="row">
|
||||||
</PageTitle>
|
<div class="col">
|
||||||
|
@if (TagName is null)
|
||||||
<div style="height: 100%">
|
{
|
||||||
<div class="tag-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
|
<h1>标签</h1>
|
||||||
<div class="tag-title">
|
}
|
||||||
<FluentStack Orientation="@Orientation.Vertical"
|
else
|
||||||
HorizontalAlignment="@HorizontalAlignment.Center">
|
{
|
||||||
<FluentLabel Typo="@Typography.H1" Color="@Color.Fill">
|
<h2>@(TagName)</h2>
|
||||||
@(TagName ?? "标 签")
|
}
|
||||||
</FluentLabel>
|
|
||||||
</FluentStack>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height: 2rem"></div>
|
<div class="row">
|
||||||
|
<div class="col fst-italic py-4">
|
||||||
<div style="margin: 0 8% 0 8%">
|
在野外游荡的指针，走向未知的方向。
|
||||||
<FluentCard>
|
</div>
|
||||||
<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="/blog/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="/blog/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>
|
</div>
|
||||||
|
|
||||||
<BlogFooter/>
|
@if (TagName is null)
|
||||||
|
{
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
@foreach (KeyValuePair<string, int> pair in EssayContentInstance.Tags)
|
||||||
|
{
|
||||||
|
<li class="p-2">
|
||||||
|
<a href="/blog/tags/?tagName=@(pair.Key)">
|
||||||
|
<div class="container fs-5">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto">
|
||||||
|
# @(pair.Key)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto tag-count">
|
||||||
|
@(pair.Value)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="container">
|
||||||
|
@foreach (BlogEssay essay in EssayContentInstance.GetTag(TagName).OrderByDescending(e => e.PublishTime))
|
||||||
|
{
|
||||||
|
<EssayCard Essay="@essay"/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
[SupplyParameterFromQuery]
|
[SupplyParameterFromQuery] public string? TagName { get; set; }
|
||||||
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];
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,6 @@
|
||||||
.tag-background {
|
.tag-count {
|
||||||
position: relative;
|
background: var(--bs-secondary-bg);
|
||||||
height: 60%;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
padding: 0 6px;
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
|
||||||
builder.Services.AddRazorComponents()
|
builder.Services.AddRazorComponents()
|
||||||
.AddInteractiveServerComponents();
|
.AddInteractiveServerComponents();
|
||||||
builder.Services.AddControllers();
|
builder.Services.AddControllers();
|
||||||
|
builder.Services.AddBlazorBootstrap();
|
||||||
builder.AddYaeBlog();
|
builder.AddYaeBlog();
|
||||||
|
|
||||||
WebApplication application = builder.Build();
|
WebApplication application = builder.Build();
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,10 @@
|
||||||
<ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" />
|
<ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<PackageReference Include="Blazor.Bootstrap" Version="3.0.0-preview.2" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
<PropertyGroup>
|
<PropertyGroup>
|
||||||
<TargetFramework>net8.0</TargetFramework>
|
<TargetFramework>net8.0</TargetFramework>
|
||||||
<Nullable>enable</Nullable>
|
<Nullable>enable</Nullable>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,6 @@
|
||||||
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||||
@using Microsoft.JSInterop
|
@using Microsoft.JSInterop
|
||||||
@using Microsoft.FluentUI.AspNetCore.Components
|
@using BlazorBootstrap
|
||||||
@using YaeBlog
|
@using YaeBlog
|
||||||
@using YaeBlog.Components
|
@using YaeBlog.Components
|
||||||
|
|
|
||||||
5
YaeBlog/wwwroot/bootstrap-icons.min.css
vendored
Normal file
5
YaeBlog/wwwroot/bootstrap-icons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
YaeBlog/wwwroot/bootstrap.bundle.min.js
vendored
Normal file
7
YaeBlog/wwwroot/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
YaeBlog/wwwroot/bootstrap.min.css
vendored
Normal file
6
YaeBlog/wwwroot/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
YaeBlog/wwwroot/fonts/bootstrap-icons.woff
Normal file
BIN
YaeBlog/wwwroot/fonts/bootstrap-icons.woff
Normal file
Binary file not shown.
BIN
YaeBlog/wwwroot/fonts/bootstrap-icons.woff2
(Stored with Git LFS)
Normal file
BIN
YaeBlog/wwwroot/fonts/bootstrap-icons.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -2,31 +2,10 @@ body a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
body main {
|
||||||
height: 100%;
|
flex: 1;
|
||||||
}
|
min-height: 100vh;
|
||||||
|
overflow-x: visible;
|
||||||
p {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #80c8f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-track {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: #80c8f8 transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user