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

refact: use tailwind css.

Browse Source
This commit is contained in:
jackfiled 2025-01-23 20:46:54 +08:00
parent 67c72284d5
commit cdbcb7a4cc
22 changed files with 417 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
YaeBlog/Commands/YaeBlogCommand.cs
View File

@ -70,7 +70,6 @@ public sealed class YaeBlogCommand
builder.Services.AddControllers(); builder.Services.AddControllers();
builder.AddYaeBlog(); builder.AddYaeBlog();
builder.AddWatcher(); builder.AddWatcher();
builder.AddTailwindWatcher();
WebApplication application = builder.Build(); WebApplication application = builder.Build();

9
YaeBlog/Components/Anchor.razor Normal file
View File

@ -0,0 +1,9 @@
<a href="@Address" class="text-blue-600" target="@(NewPage ? "_blank" : "_self")">@Text</a>
@code {
[Parameter] public string? Address { get; set; }
[Parameter] public string? Text { get; set; }
[Parameter] public bool NewPage { get; set; }
}

11
YaeBlog/Components/App.razor
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="zh">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
@ -13,13 +13,8 @@
</head> </head>
<body> <body>
<Routes/> <Routes/>
<script src="_framework/blazor.web.js"></script>
<script src="_framework/blazor.web.js"></script>
<script src="clipboard.min.js"></script>
<script>
const clipboard = new ClipboardJS('.btn');
</script>
</body> </body>
</html> </html>

50
YaeBlog/Components/BlogInformationCard.razor
View File

@ -4,54 +4,42 @@
@inject IEssayContentService Contents @inject IEssayContentService Contents
@inject BlogOptions Options @inject BlogOptions Options
<div class="container"> <div class="flex flex-col">
<div class="row justify-content-center"> <div class="p-10">
<div class="col-auto p-4"> <img src="images/avatar.png" alt="Ricardo's Avatar" class="h-auto max-w-full"/>
@* <Image Src="images/avatar.png" Alt="Ricardo's avatar"/> *@
</div>
</div> </div>
<div class="row justify-content-center p-3"> <div class="px-10 py-2 text-xl">
<div class="col-auto fs-4"> “奇奇怪怪东西的聚合地”
“奇奇怪怪东西的聚合地”
</div>
</div> </div>
<div class="row justify-content-between px-2 py-1 fs-5"> <div class="flex flex-row justify-between px-6 py-2 text-xl">
<div class="col-auto"> <div>
文章 文章
</div> </div>
<div class="col-auto"> <div>
<a href="/blog/archives"> @(Contents.Essays.Count)
@(Contents.Essays.Count)
</a>
</div> </div>
</div> </div>
<div class="row justify-content-between px-2 py-1 fs-5"> <div class="flex flex-row justify-between px-6 py-2 text-xl">
<div class="col-auto"> <div>
标签 标签
</div> </div>
<div class="col-auto"> <div>
<a href="/blog/tags"> @(Contents.Tags.Count)
@(Contents.Tags.Count)
</a>
</div> </div>
</div> </div>
<div class="row justify-content-start fs-5" style="padding-top: 2em"> <div class="text-xl px-2 py-2">
<div class="col-auto"> 广而告之
广而告之
</div>
</div> </div>
<div class="row"> <div class="px-6">
<div class="col"> <p class="text-lg">
<p style="text-indent: 2em"> @(Options.Announcement)
@(Options.Announcement) </p>
</p>
</div>
</div> </div>
</div> </div>

25
YaeBlog/Components/EssayCard.razor
View File

@ -1,19 +1,19 @@
@using System.Text.Encodings.Web @using System.Text.Encodings.Web
@using YaeBlog.Models @using YaeBlog.Models
<div class="container p-3"> <div class="flex flex-col p-3">
<div class="row fs-2 fw-bold py-2 essay-title"> <div class="text-3xl font-bold py-2">
<a href="/blog/essays/@(Essay.FileName)" target="_blank">@(Essay.Title)</a> <a href="/blog/essays/@(Essay.FileName)" target="_blank">@(Essay.Title)</a>
</div> </div>
<div class="row p-2 justify-content-start"> <div class="p-2 flex flex-row justify-content-start gap-2">
<div class="col-auto fw-light"> <div class="font-light">
@(Essay.PublishTime.ToString("yyyy-MM-dd")) @(Essay.PublishTime.ToString("yyyy-MM-dd"))
</div> </div>
@foreach (string key in Essay.Tags) @foreach (string key in Essay.Tags)
{ {
<div class="col-auto"> <div class="text-sky-600">
<a href="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(key))"> <a href="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(key))">
# @key # @key
</a> </a>
@ -21,20 +21,11 @@
} }
</div> </div>
<div class="row p-2"> <div class="p-2">
<div class="col"> @(Essay.Description)
@(Essay.Description)
</div>
</div>
<div class="row">
<div class="col border-bottom">
</div>
</div> </div>
</div> </div>
@code { @code {
[Parameter] [Parameter] public required BlogEssay Essay { get; set; }
public required BlogEssay Essay { get; set; }
} }

24
YaeBlog/Components/Foonter.razor
View File

@ -1,14 +1,22 @@
<div class="row align-items-end text-center"> <div class="flex flex-col text-center py-2">
<div class="row"> <div>
<p class="fs-6"> <p class="text-md">
2021 - @(DateTimeOffset.Now.Year) © <a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>， 2021 - @(DateTimeOffset.Now.Year) ©
由 <a href="https://dotnet.microsoft.com/zh-cn/" target="_blank">.NET @(Environment.Version)</a> 驱动。 <Anchor Address="https://rrricardot.top" Text="Ricardo Ren"/>
，由
<Anchor Address="https://dotnet.microsoft.com" Text="@DotnetVersion"/>
驱动。
</p> </p>
</div> </div>
<div class="row"> <div>
<p class="fs-6"> <p class="text-md">
<a href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2022004429号-1</a> <a href="https://beian.miit.gov.cn" target="_blank" class="text-black">蜀ICP备2022004429号-1</a>
</p> </p>
</div> </div>
</div> </div>
@code
{
private string DotnetVersion => $".NET {Environment.Version}";
}

38
YaeBlog/Components/LicenseDisclaimer.razor
View File

@ -1,30 +1,28 @@
@using YaeBlog.Models @using YaeBlog.Models
@inject BlogOptions Options @inject BlogOptions Options
<div class="row px-2 py-4 copyright border border-primary rounded-1 bg-primary-subtle"> <div class="px-4 py-8 border border-sky-700 rounded-md bg-sky-200">
<div class="col"> <div class="flex flex-col gap-3 text-md">
<div class="row p-1"> <div>
<div class="col"> 文章作者：<a href="https://rrricardo.top" target="_blank" class="text-blue-600">Ricardo Ren</a>
文章作者：<a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>
</div>
</div> </div>
<div class="row p-1"> <div>
<div class="col"> 文章地址：
文章地址： <a href="/blog/essays/@(EssayAddress)" target="_blank" class="text-blue-600">
<a href="/blog/essays/@(EssayAddress)" target="_blank"> @($"https://rrricardo.top/blog/essays/{EssayAddress}")
@($"https://rrricardo.top/blog/essays/{EssayAddress}") </a>
</a>
</div>
</div> </div>
<div class="row p-1"> <div>
<div class="col"> 版权声明：本博客所有文章除特别声明外，均采用
版权声明：本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="text-blue-600">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> CC BY-NC-SA 4.0
许可协议，转载请注明来自 </a>
<a href="https://rrricardo.top/blog/" target="_blank">Ricardo's Blog</a>。 许可协议，转载请注明来自
</div> <a href="https://rrricardo.top/blog/" target="_blank" class="text-blue-600">
Ricardo's Blog
</a>。
</div> </div>
</div> </div>
</div> </div>

22
YaeBlog/Components/PageAnchor.razor Normal file
View File

@ -0,0 +1,22 @@
@if (Selected)
{
<div class="border rounded-lg shadow-neutral-500 bg-sky-400 w-8 h-8 inline-block leading-8 text-center">
<span class="text-white">@(Text)</span>
</div>
}
else
{
<a href="@Address">
<div class="border rounded-lg shadow-neutral-500 w-8 h-8 inline-block leading-8 text-center">
<span>@(Text)</span>
</div>
</a>
}
@code {
[Parameter] public string? Address { get; set; }
[Parameter] public string? Text { get; set; }
[Parameter] public bool Selected { get; set; }
}

46
YaeBlog/Components/Pagination.razor Normal file
View File

@ -0,0 +1,46 @@
<div class="flex flex-row justify-center gap-3">
@if (Page != 1)
{
<PageAnchor Address="@GenerateAddress(Page - 1)" Text="<"/>
}
@if (Page == 1)
{
<PageAnchor Address="@GenerateAddress(1)" Text="1" Selected="@true"/>
<PageAnchor Address="@GenerateAddress(2)" Text="2"/>
<PageAnchor Address="@GenerateAddress(3)" Text="3"/>
}
else if (Page == PageCount)
{
<PageAnchor Address="@GenerateAddress(PageCount - 2)" Text="@($"{PageCount - 2}")"/>
<PageAnchor Address="@GenerateAddress(PageCount - 1)" Text="@($"{PageCount - 1}")"/>
<PageAnchor Address="@GenerateAddress(PageCount)" Text="@($"{PageCount}")" Selected="@true"/>
}
else
{
<PageAnchor Address="@GenerateAddress(Page + 1)" Text="@($"{Page - 1}")"/>
<PageAnchor Address="@GenerateAddress(Page)" Text="@($"{Page}")" Selected="@true"/>
<PageAnchor Address="@GenerateAddress(Page + 1)" Text="@($"{Page + 1}")"/>
}
@if (Page != PageCount)
{
<PageAnchor Address="@GenerateAddress(Page + 1)" Text=">"/>
}
</div>
@code {
[Parameter] public string? BaseUrl { get; set; }
[Parameter] public int PageCount { get; set; }
[Parameter] public int Page { get; set; }
private string GenerateAddress(int page) => $"{BaseUrl}?page={page}";
}

9
YaeBlog/Extensions/WebApplicationBuilderExtensions.cs
View File

@ -45,13 +45,4 @@ public static class WebApplicationBuilderExtensions
return builder; return builder;
} }
public static WebApplicationBuilder AddTailwindWatcher(this WebApplicationBuilder builder)
{
builder.Services.AddSingleton<ProcessInteropService>();
builder.Services.Configure<TailwindOptions>(builder.Configuration.GetSection(TailwindOptions.OptionName));
builder.Services.AddHostedService<TailwindRefreshService>();
return builder;
}
} }

28
YaeBlog/Layout/BlogLayout.razor
View File

@ -2,41 +2,41 @@
@attribute [StreamRendering] @attribute [StreamRendering]
<main class="container mx-auto"> <main class="container mx-auto flex flex-col min-h-screen">
<div class="grid grid-cols-3 mx-3"> <div class="grid grid-cols-3 mx-3">
<div class="md:col-span-2 col-span-3 my-6"> <div class="md:col-span-2 col-span-3 h-20 flex items-center">
<a href="/blog/"> <a href="/blog/">
<span class="text-blue-600 text-2xl">Ricardo's Blog</span> <span class="text-blue-600 text-2xl">Ricardo's Blog</span>
</a> </a>
</div> </div>
<div class="md:col-span-1 col-span-3 my-6"> <div class="md:col-span-1 col-span-3 h-20 flex items-center">
<div class="flex flex-row"> <div class="flex flex-row w-full px-2 gap-3 md:justify-center justify-end">
<div class="px-2 "> <div>
<a href="/blog/">
<span class="text-xl text-blue-600">首页</span>
</a>
</div>
<div class="px-2 ">
<a href="/blog/archives/"> <a href="/blog/archives/">
<span class="text-xl text-blue-600">归档</span> <span class="text-xl text-blue-600">归档</span>
</a> </a>
</div> </div>
<div class="px-2 "> <div>
<a href="/blog/tags/"> <a href="/blog/tags/">
<span class="text-xl text-blue-600">标签</span> <span class="text-xl text-blue-600">标签</span>
</a> </a>
</div> </div>
<div class="px-2 "> <div>
<a href="/blog/about/"> <a href="/about/" target="_blank">
<span class="text-xl text-blue-600">关于</span> <span class="text-xl text-blue-600">关于</span>
</a> </a>
</div> </div>
<div>
<a href="/friends/" target="_blank">
<span class="text-xl text-blue-600">友链</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="px-4 py-2"> <div class="px-4 py-2 flex-grow">
@Body @Body
</div> </div>

32
YaeBlog/Layout/MainLayout.razor
View File

@ -1,22 +1,34 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<main class="container mx-auto"> <main class="container mx-auto min-h-screen flex flex-col">
<div class="flex flex-row h-20"> <div class="grid grid-cols-4">
<div class="px-2 basis-3/4"> <div class="px-2 md:col-span-3 col-span-4 h-20 flex items-center">
<a href="/" class="text-2xl p-2"> <a href="/" class="text-2xl">
<h4 class="text-blue-600">Ricardo's Index</h4> <h4 class="text-blue-600">Ricardo's Index</h4>
</a> </a>
<h1></h1>
</div> </div>
<div class="basis-1/4"> <div class="md:col-span-1 col-span-4 h-20 flex items-center">
<a href="mailto://shicangjuner@outlook.com" class="p-2 text-xl" target="_blank"> <div class="flex flex-row w-full px-2 md:justify-center justify-end text-xl gap-3">
<h5 class="text-blue-600">E-mail</h5> <Anchor
</a> Address="/blog/"
Text="博客"
NewPage="@(true)"/>
<Anchor
Address="/about/"
Text="关于"
NewPage="@(true)"/>
<Anchor
Address="/friends"
Text="友链"
NewPage="@(true)"/>
</div>
</div> </div>
</div> </div>
<div class="px-4 mx-auto"> <div class="px-4 mx-auto flex-grow">
<div class="py-2"> <div class="py-2">
@Body @Body
</div> </div>

153
YaeBlog/Pages/About.razor
View File

@ -1,141 +1,74 @@
@page "/blog/about" @page "/about"
@using YaeBlog.Models
@inject BlogOptions Options
<PageTitle> <PageTitle>
关于 关于
</PageTitle> </PageTitle>
<div class="container"> <div class="flex flex-col">
<div class="row"> <div>
<div class="col"> <h1 class="text-4xl">关于</h1>
<h1>关于</h1>
</div>
</div> </div>
<div class="row"> <div class="py-4">
<div class="col fst-italic py-2"> <span class="italic">把字刻在石头上！(･’ω’･)</span>
把字刻在石头上！(･’ω’･)
</div>
</div> </div>
<div class="row p-2"> <div class="flex flex-col p-2">
<div class="col"> <div class="flex flex-col p-2">
<div class="row"> <div class="pb-2">
<div class="col"> <h3 class="text-2xl">关于我</h3>
<h3>关于我</h3>
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col"> 计算机科学与技术在读大学生，明光村幼儿园附属大学所属。正处于读书和失业的叠加态。
计算机科学与技术在读大学生，明光村幼儿园附属大学所属。正处于读书和失业的叠加态。 一般在互联网上使用<span class="italic">初冬的朝阳</span>或者<span class="italic">jackfiled</span>的名字活动。
一般在互联网上使用<span class="fst-italic">初冬的朝阳</span>或者<span class="fst-italic">jackfiled</span>的名字活动。 <span class="line-through">都是ICP备案过的人了，网名似乎没有太大的用处（</span>
<span class="text-decoration-line-through">都是ICP备案过的人了，网名似乎没有太大的用处（</span>
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col"> 主要是一个C#程序员，目前也在尝试写一点Rust。
主要是一个C#程序员，目前也在尝试写一点Rust。 总体上对于编程语言的态度是“<span>大家都是我的翅膀.jpg</span>”。
总体上对于编程语言的态度是“<span>大家都是我的翅膀.jpg</span>”。 前后端分离的项目本当上手。
前后端分离的项目本当上手。 常常因为现实的压力而写一些C/C++。
常常因为现实的压力而写一些C/C++。 <span class="line-through">对于Java和Go的评价很低。</span>
<span class="text-decoration-line-through">对于Java和Go的评价很低。</span> 日常使用ArchLinux。
日常使用ArchLinux。
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col"> 100%社恐。日常生活是宅在电脑前面自言自语。
100%社恐。日常生活是宅在电脑前面自言自语。兴趣活动是读书和看番。 兴趣活动是读书和看番，目前在玩原神和三角洲。
</div>
</div> </div>
<div class="row py-2"> <div class="py-4">
<div class="col"> 常常被人批评没有梦想，这里就随便瞎编一下。
常常被人批评没有梦想，这里就随便瞎编一下。 成为嵌入式工程师，修好桌面上的<a href="https://www.bilibili.com/video/BV1VA411p7MD">HoloCubic</a>。
成为嵌入式工程师，修好桌面上的<a href="https://www.bilibili.com/video/BV1VA411p7MD">HoloCubic</a>。 完成第一个不是课程设计的个人开源项目。
完成第一个不是课程设计的个人开源项目。 遇到能够搭伙过日子的人也算是一大梦想，虽然社恐人根本不知道从何开始的说，
遇到能够搭伙过日子的人也算是一大梦想，虽然社恐人根本不知道从何开始的说， <span class="line-through">什么时候天上才能掉美少女？</span>
<span class="text-decoration-line-through">什么时候天上才能掉美少女？</span>
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col"> 公开的联系渠道是<a href="mailto:shicangjuner@outlook.com">电子邮件</a>。
公开的联系渠道是<a href="mailto:shicangjuner@outlook.com">电子邮件</a>。 也可以试试在各大平台搜索上面提到的名字。
也可以试试在各大平台搜索上面提到的名字。
</div>
</div> </div>
</div> </div>
</div>
<div class="row p-2"> <div class="flex flex-col p-2">
<div class="col"> <div class="pb-2">
<div class="row"> <h3 class="text-2xl">关于本站</h3>
<div class="col">
<h3>关于本站</h3>
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col"> 本站肇始于2021年下半年，在开始的两年中个人网站和博客是分别的两个网站，个人网站是裸HTML写的，博客是用
本站肇始于2021年下半年，在开始的两年中个人网站和博客是分别的两个网站，个人网站是裸HTML写的，博客是用 <a href="https://hexo.io">Hexo</a>渲染的。
<a href="https://hexo.io">Hexo</a>渲染的。
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col"> 2024年，我们决定使用.NET技术完全重构两个网站，合二为一。虽然目前这个版本还是一个半成品，但是我们一定会努力的~（确信。
2024年，我们决定使用.NET技术完全重构两个网站，合二为一。虽然目前这个版本还是一个半成品，但是我们一定会努力的~（确信。
</div>
</div>
</div>
</div>
<div class="row p-2">
<div class="col">
<div class="row">
<div class="col">
<h3>友链</h3>
</div>
</div> </div>
<div class="row py-2"> <div class="py-2">
<div class="col fst-italic"> 2025年，我们将使用的样式库从Bootstrap迁移到Tailwind CSS，将现代的前端技术同Blazor结合起来。
欢迎所有人联系我添加友链！(´｡✪ω✪｡｀)
</div>
</div>
<div class="row py-2">
@foreach (FriendLink link in Options.Links)
{
<div class="col-sm-12 col-md-4 col-lg-3">
<a href="@(link.Link)" target="_blank" class="m-3">
<div class="row link-item">
<div class="col-4">
@* <Image Src="@(link.AvatarImage)" Alt="@(link.Name)" Style="border-radius: 50%"/> *@
</div>
<div class="col-8">
<div class="row">
<div class="col-auto fs-5">
@(link.Name)
</div>
</div>
<div class="row">
<div class="col-auto fst-italic">
@(link.Description)
</div>
</div>
</div>
</div>
</a>
</div>
}
</div> </div>
</div> </div>
</div> </div>

63
YaeBlog/Pages/Archives.razor
View File

@ -8,57 +8,46 @@
归档 归档
</PageTitle> </PageTitle>
<div class="container"> <div class="flex flex-col">
<div class="row"> <div>
<div class="col"> <h1 class="text-4xl">归档</h1>
<div class="container"> </div>
<div class="row">
<div class="col">
<h1>归档</h1>
</div>
</div>
<div class="row"> <div class="py-4">
<div class="col fst-italic py-4"> <span class="italic">
时光图书馆，黑历史集散地。(๑◔‿◔๑) 时光图书馆，黑历史集散地。(๑◔‿◔๑)
</div> </span>
</div>
</div>
</div>
</div> </div>
@foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays) @foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
{ {
<div class="row"> <div class="p-2">
<div class="col"> <div class="flex flex-col">
<div class="container"> <div>
<div class="row"> <h3 class="text-xl">@(group.Key.Year)</h3>
<div class="col"> </div>
<h3>@(group.Key.Year)</h3>
</div>
</div>
<div class="container px-3 py-2"> <div class="px-4 py-4 flex flex-col">
@foreach (KeyValuePair<string, BlogEssay> essay in group) @foreach ((String name, BlogEssay essay) in group)
{ {
<div class="row py-1"> <a target="_blank" href="@($"/blog/essays/{name}")">
<div class="col-auto"> <div class="flex flex-row p-2 mx-1 rounded-lg hover:bg-gray-300">
@(essay.Value.PublishTime.ToString("MM-dd")) <div class="w-20">
@(essay.PublishTime.ToString("MM月dd日"))
</div> </div>
<div class="col-auto"> <div>
<a href="/blog/essays/@(essay.Key)"> <span class="text-blue-600">
@(essay.Value.Title) @(essay.Title)
</a> </span>
</div> </div>
</div> </div>
} </a>
</div> }
</div> </div>
</div> </div>
</div> </div>
} }
</div> </div>
@code { @code {

71
YaeBlog/Pages/BlogIndex.razor
View File

@ -9,79 +9,18 @@
Ricardo's Blog Ricardo's Blog
</PageTitle> </PageTitle>
<div class="container"> <div>
<div class="row"> <div class="grid grid-cols-4">
<div class="col-sm-12 col-md-9"> <div class="col-span-4 md:col-span-3">
@foreach (KeyValuePair<string, BlogEssay> pair in _essays) @foreach (KeyValuePair<string, BlogEssay> pair in _essays)
{ {
<EssayCard Essay="@(pair.Value)"/> <EssayCard Essay="@(pair.Value)"/>
} }
<div class="row align-items-center justify-content-center p-3"> <Pagination BaseUrl="/blog/" Page="_page" PageCount="_pageCount"/>
@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">
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>
<div class="col-sm-12 col-md-3"> <div class="col-span-4 md:col-span-1">
<BlogInformationCard/> <BlogInformationCard/>
</div> </div>
</div> </div>

125
YaeBlog/Pages/Essays.razor
View File

@ -10,96 +10,83 @@
@(_essay!.Title) @(_essay!.Title)
</PageTitle> </PageTitle>
<div class="container py-4"> <div class="flex flex-col py-8">
<div class="row"> <div>
<h1 id="title" class="text-4xl">@(_essay!.Title)</h1>
<div class="col-auto"> <div class="col-auto">
<h1 id="title">@(_essay!.Title)</h1>
</div> </div>
</div> </div>
<div class="row px-4 py-1"> <div class="px-6 pt-4 pb-2">
<div class="col-auto fw-light"> <div class="flex flex-row gap-4">
@(_essay!.PublishTime.ToString("yyyy-MM-dd")) <div class="font-light">
</div> @(_essay!.PublishTime.ToString("yyyy-MM-dd"))
@foreach (string tag in _essay!.Tags)
{
<div class="col-auto">
<a href="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(tag))">
# @(tag)
</a>
</div> </div>
}
@foreach (string tag in _essay!.Tags)
{
<div class="text-sky-500">
<a href="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(tag))">
# @(tag)
</a>
</div>
}
</div>
</div> </div>
<div class="row px-4 py-1"> <div class="px-6 pt-2 pb-4">
<div class="col-auto fw-light"> <div class="font-light">
总字数：@(_essay!.WordCount)字，预计阅读时间 @(_essay!.ReadTime)。 总字数：@(_essay!.WordCount)字，预计阅读时间 @(_essay!.ReadTime)。
</div> </div>
</div> </div>
<div class="row"> <div class="grid grid-cols-3">
<div class="col-lg-8 col-md-12"> <div class="col-span-3 md:col-span-2">
@((MarkupString)_essay!.HtmlContent) @((MarkupString)_essay!.HtmlContent)
<LicenseDisclaimer EssayAddress="@BlogKey"/> <LicenseDisclaimer EssayAddress="@BlogKey"/>
</div> </div>
<div class="col-lg-4 col-md-12"> <div class="col-span-3 md:col-span-1">
<div class="row sticky-lg-top justify-content-center"> <div class="flex flex-col sticky top-0 px-8">
<div class="col-auto"> <div>
<div class="row"> <h3 class="text-2xl">文章目录</h3>
<div class="col-auto"> </div>
<h3 style="margin-block-start: 1em; margin-block-end: 0.5em">
文章目录
</h3>
</div>
</div>
<div class="row" style="padding-left: 10px"> <div>
<div class="col-auto"> @foreach (BlogHeadline level2 in _headline!.Children)
@foreach (BlogHeadline level2 in _headline!.Children)
{
<div class="row py-1">
<div class="col-auto">
<a href="@(GenerateSelectorUrl(level2.SelectorId))">@(level2.Title)</a>
</div>
</div>
@foreach (BlogHeadline level3 in level2.Children)
{
<div class="row py-1">
<div class="col-auto">
<a style="padding-left: 20px" href="@GenerateSelectorUrl(level3.SelectorId)">
@(level3.Title)
</a>
</div>
</div>
@foreach (BlogHeadline level4 in level3.Children)
{
<div class="row py-1">
<div class="col-auto">
<a style="padding-left: 40px" href="@(GenerateSelectorUrl(level4.SelectorId))">
@(level4.Title)
</a>
</div>
</div>
}
}
}
</div>
</div>
@if (_headline!.Children.Count == 0)
{ {
<div class="row"> <div class="py-2 pl-3">
<div class="col fst-italic"> <Anchor Address="@(GenerateSelectorUrl(level2.SelectorId))"
坏了(* Ŏ∀Ŏ)，没有在文章中识别到目录 Text="@(level2.Title)"/>
</div>
</div> </div>
@foreach (BlogHeadline level3 in level2.Children)
{
<div class="py-2 pl-6">
<Anchor Address="@(GenerateSelectorUrl(level3.SelectorId))"
Text="@(level3.Title)"/>
</div>
@foreach (BlogHeadline level4 in level3.Children)
{
<div class="py-2 pl-9">
<Anchor Address="@(GenerateSelectorUrl(level4.SelectorId))"
Text="@(level4.Title)"/>
</div>
}
}
} }
</div> </div>
@if (_headline!.Children.Count == 0)
{
<div class="row">
<div class="col fst-italic">
坏了(* Ŏ∀Ŏ)，没有在文章中识别到目录
</div>
</div>
}
</div> </div>
</div> </div>
</div> </div>

49
YaeBlog/Pages/Friends.razor Normal file
View File

@ -0,0 +1,49 @@
@page "/friends"
@using YaeBlog.Models
@inject BlogOptions Options
<PageTitle>
友链
</PageTitle>
<div class="flex flex-col">
<div>
<h1 class="text-4xl">
友链
</h1>
</div>
<div class="py-4">
欢迎所有人联系我添加友链！(´｡✪ω✪｡｀)
</div>
<div class="grid grid-cols-4 g-4 p-2">
@foreach (FriendLink link in Options.Links)
{
<div>
<a href="@(link.Link)" target="_blank" class="mx-5">
<div class="flex flex-row">
<div class="basis-1/3">
<img src="@(link.AvatarImage)" alt="@($"Avatar of {link.Name}")"
class="w-full h-auto rounded-full">
</div>
<div class="flex flex-col basis-2/3 px-2">
<div class="text-lg">
@(link.Name)
</div>
<div class="text-sm italic">
@(link.Description)
</div>
</div>
</div>
</a>
</div>
}
</div>
</div>
@code {
}

48
YaeBlog/Pages/Index.razor
View File

@ -4,28 +4,28 @@
Ricardo's Index Ricardo's Index
</PageTitle> </PageTitle>
<div class="container"> <div class="mx-20">
<div class="row py-4"> <div class="grid grid-cols-3 py-4">
<div class="col-lg-4 col-12 p-5 p-lg-0"> <div class="col-span-3 md:col-span-1 p-5 p-lg-0">
@* <Image Src="images/avatar.png" Alt="Ricardo's Avatar"/> *@ <img src="images/avatar.png" alt="Ricardo's Avatar" class="h-auto max-w-full">
</div> </div>
<div class="col-lg-8 col-12"> <div class="col-span-3 md:col-span-2">
<div class="container px-3"> <div class="flex flex-col px-3 gap-y-3">
<div class="row"> <div class="">
<h4 class="fw-bold">初冬的朝阳 (Ricardo Ren)</h4> <div class="text-3xl font-bold">初冬的朝阳 (Ricardo Ren)</div>
</div> </div>
<div class="row"> <div class="">
<p class="fs-5">a.k.a jackfiled</p> <p class="text-lg">a.k.a jackfiled</p>
</div> </div>
<div class="row"> <div class="">
<p class="fs-5 fst-italic">世界很大，时间很长。</p> <p class="text-lg italic">世界很大，时间很长。</p>
</div> </div>
<div class="row"> <div class="">
<p class="fs-5"> <p class="text-lg">
平平无奇的计算机科学与技术学徒，连微小的贡献都没做。 平平无奇的计算机科学与技术学徒，连微小的贡献都没做。
</p> </p>
</div> </div>
@ -33,20 +33,22 @@
</div> </div>
</div> </div>
<div class="row" style="padding-top: 80px"> <div class="py-5">
<p class="fs-5">恕我不能亲自为您沏茶（？），还是非常欢迎您能够来到我的主页。</p> <p class="text-lg">恕我不能亲自为您沏茶（？），还是非常欢迎您能够来到我的主页。</p>
</div> </div>
<div class="row"> <div>
<p class="fs-5"> <p class="text-lg py-1">
如果您想四处看看，了解一下屏幕对面的人，可以在我的 <a href="/blog/">博客</a> 看看。 如果您想四处看看，了解一下屏幕对面的人，可以在我的 <Anchor Address="/blog/" Text="博客"/> 看看。
如果您对于明光村幼儿园某附属技校的计算机教学感兴趣，您可以移步到 如果您对于明光村幼儿园某附属技校的计算机教学感兴趣，您可以移步到
<a href="https://jackfiled.github.io/wiki/">我的学习笔记</a>， <Anchor Address="https://jackfiled.github.io/wiki/" Text="我的学习笔记"/>，
<span class="fs-5 text-decoration-line-through">虽然这笔记我自己也木有看过。</span> <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> 都可以找到。 <Anchor Address="https://github.com/jackfiled/" Text="Github"/> 和
<Anchor Address="https://git.rrricardo.top/jackfiled/" Text="Gitea"/>
都可以找到。
</p> </p>
<p class="fs-5"> <p class="text-lg py-1">
如果您真的很闲，也可以四处搜寻一下，也许存在着一些不为人知的彩蛋。 如果您真的很闲，也可以四处搜寻一下，也许存在着一些不为人知的彩蛋。
</p> </p>
</div> </div>

4
YaeBlog/Pages/NotFound.razor
View File

@ -4,8 +4,8 @@
啊~ 页面走丢啦~ 啊~ 页面走丢啦~
</PageTitle> </PageTitle>
<div class="container"> <div>
<h3>NotFound!</h3> <h3 class="text-3xl">NotFound!</h3>
</div> </div>
@code { @code {

48
YaeBlog/Pages/Tags.razor
View File

@ -10,24 +10,22 @@
@(TagName ?? "标签") @(TagName ?? "标签")
</PageTitle> </PageTitle>
<div class="container"> <div class="flex flex-col">
<div class="row"> <div>
<div class="col"> @if (TagName is null)
@if (TagName is null) {
{ <h1 class="text-4xl">标签</h1>
<h1>标签</h1> }
} else
else {
{ <h2 class="text-2xl">@(TagName)</h2>
<h2>@(TagName)</h2> }
}
</div>
</div> </div>
<div class="row"> <div class="py-4">
<div class="col fst-italic py-4"> <span class="italic">
在野外游荡的指针，走向未知的方向。٩(๑˃̵ᴗ˂̵๑)۶ 在野外游荡的指针，走向未知的方向。٩(๑˃̵ᴗ˂̵๑)۶
</div> </span>
</div> </div>
@if (TagName is null) @if (TagName is null)
@ -38,19 +36,17 @@
Contents.Tags.OrderByDescending(pair => pair.Value.Count)) Contents.Tags.OrderByDescending(pair => pair.Value.Count))
{ {
<li class="p-2"> <li class="p-2">
<a href="/blog/tags/?tagName=@(pair.Key.UrlEncodedTagName)"> <div class="flex flex-row">
<div class="container fs-5"> <a href="/blog/tags/?tagName=@(pair.Key.UrlEncodedTagName)">
<div class="row"> <div class="text-blue-600 text-lg">
<div class="col-auto"> # @(pair.Key.TagName)
# @(pair.Key.TagName)
</div>
<div class="col-auto tag-count">
@(pair.Value.Count)
</div>
</div> </div>
</a>
<div class="mx-2 px-1 text-lg bg-gray-300 rounded-lg">
@(pair.Value.Count)
</div> </div>
</a> </div>
</li> </li>
} }
</ul> </ul>

13
YaeBlog/YaeBlog.csproj
View File

@ -17,11 +17,20 @@
<ImplicitUsings>enable</ImplicitUsings> <ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup> </PropertyGroup>
<Target Name="PnpmInstall"> <Target Name="EnsurePnpmInstalled" BeforeTargets="Build">
<Message Importance="low" Text="Ensure pnpm is installed..."/>
<Exec Command="pnpm --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode"/>
</Exec>
<Error Condition="$(ErrorCode) != 0" Text="Pnpm is not installed which is required for build."/>
<Message Importance="normal" Text="Installing pakages using pnpm..."/>
<Exec Command="pnpm install"/> <Exec Command="pnpm install"/>
</Target> </Target>
<Target Name="TailwindGenerate" DependsOnTargets="PnpmInstall" BeforeTargets="BeforeBuild"> <Target Name="TailwindGenerate" AfterTargets="EnsurePnpmInstalled">
<Message Importance="normal" Text="Generate css files using tailwind..."/>
<Exec Command="pnpm tailwind -i wwwroot/input.css -o wwwroot/output.css"/> <Exec Command="pnpm tailwind -i wwwroot/input.css -o wwwroot/output.css"/>
</Target> </Target>

7
YaeBlog/wwwroot/clipboard.min.js vendored
View File

File diff suppressed because one or more lines are too long