feat: 使用Bootstrap重写前端页面 #2

Merged
jackfiled merged 6 commits from feat-bootstrap into master 2024-07-22 16:59:43 +08:00
11 changed files with 82 additions and 72 deletions
Showing only changes of commit 15469ebc8f - Show all commits

View 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>

View File

View File

@ -1,9 +1,47 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<main> <div class="container">
<div class="row" style="height: 80px">
<div class="px-2 col-8">
<a href="/" class="p-2">
<h4>Ricardo's Blog</h4>
</a>
</div>
<div class="col-4 d-flex justify-content-around align-items-center">
<a href="/blog/" class="p-2" target="_blank">
<div class="d-inline-flex" style="text-align: center">
<Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
<h5>首页</h5>
</div>
</a>
<a href="/blog/archives/" class="p-2" target="_blank">
<div class="d-inline-flex">
<Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2" Size="IconSize.x5"/>
<h5>归档</h5>
</div>
</a>
<a href="/blog/tags/" class="p-2" target="_blank">
<div class="d-inline-flex">
<Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
<h5>标签</h5>
</div>
</a>
<a href="/blog/about/" class="p-2" target="_blank">
<div class="d-inline-flex">
<Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
<h5>关于</h5>
</div>
</a>
</div>
</div>
<main class="row px-4 py-2">
@Body @Body
</main> </main>
@code { <Foonter/>
</div>
}

View File

@ -1,45 +1,25 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<main class="center"> <div class="container">
<div class="container" style="height: 100%">
<div class="row" style="height: 80px"> <div class="row" style="height: 80px">
<div class="px-2 col-8"> <div class="px-2 col-8">
<a href="https://rrricardo.top" class="p-2"> <a href="/" class="p-2">
<h4>Ricardo's Index</h4> <h4>Ricardo's Index</h4>
</a> </a>
</div> </div>
<div class="col-4 d-flex justify-content-around align-items-center"> <div class="col-4 d-flex justify-content-around align-items-center">
<a href="https://github.com/jackfiled" class="p-2" target="_blank">
<h5>Github</h5>
</a>
<a href="mailto://shicangjuner@outlook.com" class="p-2" target="_blank"> <a href="mailto://shicangjuner@outlook.com" class="p-2" target="_blank">
<h5>E-mail</h5> <h5>E-mail</h5>
</a> </a>
</div> </div>
</div> </div>
<article class="row px-4"> <main class="row px-4 center">
<div class="py-2"> <div class="py-2">
@Body @Body
</div> </div>
</article> </main>
<div class="row align-items-end text-center"> <Foonter/>
<div class="row"> </div>
<p class="fs-6"> 2021 - 2024 By <a href="https://rrricardo.top" target="_blank">Ricardo Ren</a></p>
</div>
<div class="row">
<p class="fs-6">
<a href="https://beian.miit.gov.cn">蜀ICP备2022004429号-1</a>
</p>
</div>
</div>
</div>
</main>
@code {
}

View File

@ -1,6 +1,5 @@
.center { .center {
margin: 0 auto; margin: 0 auto;
min-height: 100vh;
max-width: 48em; max-width: 48em;
position: relative; position: relative;
display: flex; display: flex;

View File

@ -0,0 +1,3 @@
@page "/blog"

View File

View File

@ -34,12 +34,12 @@
<div class="row"> <div class="row">
<p class="fs-5"> <p class="fs-5">
如果您想四处看看,了解一下屏幕对面的人,可以在我的 <a href="https://rrricardo.top/blog/">博客</a> 看看。 如果您想四处看看,了解一下屏幕对面的人,可以在我的 <a href="/blog/">博客</a> 看看。
如果您对于明光村幼儿园某附属技校的计算机教学感兴趣,您可以移步到 如果您对于明光村幼儿园某附属技校的计算机教学感兴趣,您可以移步到
<a href="https://jackfiled.github.io/wiki/">我的学习笔记</a> <a href="https://jackfiled.github.io/wiki/">我的学习笔记</a>
<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://github.com/jackfiled" target="_blank">Github</a> 和
<a href="https://git.rrricardo.top/jackfiled/" target="_blank">Gitea</a> 都可以看见 <a href="https://git.rrricardo.top/jackfiled/" target="_blank">Gitea</a> 都可以找到
</p> </p>
<p class="fs-5"> <p class="fs-5">
如果您真的很闲,也可以四处搜寻一下,也许存在着一些不为人知的彩蛋。 如果您真的很闲,也可以四处搜寻一下,也许存在着一些不为人知的彩蛋。

Binary file not shown.

BIN
YaeBlog/wwwroot/fonts/bootstrap-icons.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -2,33 +2,6 @@ body a {
text-decoration: none; text-decoration: none;
} }
html, body {
height: 100%;
}
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 {
font-family: "Font Awesome 6 Free"; font-family: "Font Awesome 6 Free";
font-style: normal; font-style: normal;