feat: 美化文章界面 #3

Merged
jackfiled merged 8 commits from feat-markdown into master 2024-07-29 22:32:27 +08:00
5 changed files with 110 additions and 76 deletions
Showing only changes of commit eef0943900 - Show all commits

View File

@ -10,10 +10,8 @@ public class BlogOptions
public required string Root { get; set; }
/// <summary>
/// 博客作者
/// 博客正文的广而告之
/// </summary>
public required string Author { get; set; }
public required string Announcement { get; set; }
/// <summary>
@ -22,21 +20,7 @@ public class BlogOptions
public required int StartYear { get; set; }
/// <summary>
/// 博客起始页面的背景图片
/// 博客的友链
/// </summary>
public required string BannerImage { get; set; }
/// <summary>
/// 文章页面的背景图片
/// </summary>
public required string EssayImage { get; set; }
/// <summary>
/// 博客底部是否显示ICP备案信息
/// </summary>
public string? RegisterInformation { get; set; }
public required AboutInfo About { get; set; }
public required List<FriendLink> Links { get; set; }
}

View File

@ -6,7 +6,7 @@
<div class="col">
<div class="row p-1">
<div class="col">
文章作者:<a href="https://rrricardo.top" target="_blank">@(Options.Author)</a>
文章作者:<a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>
</div>
</div>

View File

@ -1,4 +1,7 @@
@page "/blog/about"
@using YaeBlog.Core.Models
@inject BlogOptions Options
<PageTitle>
关于
@ -12,12 +15,13 @@
</div>
<div class="row">
<div class="col fst-italic py-4">
把字刻在石头上!
<div class="col fst-italic py-2">
把字刻在石头上!(・’ω’・)
</div>
</div>
<div class="row p-2">
<div class="col">
<div class="row">
<div class="col">
<h3>关于我</h3>
@ -65,8 +69,10 @@
</div>
</div>
</div>
</div>
<div class="row p-2">
<div class="col">
<div class="row">
<div class="col">
<h3>关于本站</h3>
@ -88,6 +94,52 @@
</div>
</div>
<div class="row p-2">
<div class="col">
<div class="row">
<div class="col">
<h3>友链</h3>
</div>
</div>
<div class="row py-2">
<div class="col fst-italic">
欢迎所有人联系我添加友链!(´。✪ω✪。`)
</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>
@code {
}

View File

@ -0,0 +1,8 @@
.link-item {
padding: 1rem;
border-radius: 4px;
}
.link-item:hover {
background-color: var(--bs-secondary-bg);
}

View File

@ -8,18 +8,8 @@
"AllowedHosts": "*",
"Blog": {
"Root": "source",
"Author": "Ricardo Ren",
"Announcement": "博客锐意装修中,敬请期待!测试阶段如有问题还请海涵。",
"StartYear": 2021,
"ProjectName": "Blog",
"BannerImage": "images/banner.png",
"EssayImage": "images/banner.png",
"RegisterInformation": "蜀ICP备2022004429号-1",
"About": {
"Introduction": "A CS Student",
"Description": "还太菜了,没有做出太多的贡献。",
"AvatarImage": "images/avatar.png"
},
"Links": [
{
"Name": "Ichirinko",