feat: 使用Bootstrap重写前端页面 #2
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,9 +1,47 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
<main>
|
<div class="container">
|
||||||
@Body
|
<div class="row" style="height: 80px">
|
||||||
</main>
|
<div class="px-2 col-8">
|
||||||
|
<a href="/" class="p-2">
|
||||||
|
<h4>Ricardo's Blog</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
@code {
|
<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
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Foonter/>
|
||||||
|
</div>
|
||||||
|
|
|
@ -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="/" class="p-2">
|
||||||
<a href="https://rrricardo.top" class="p-2">
|
<h4>Ricardo's Index</h4>
|
||||||
<h4>Ricardo's Index</h4>
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<h5>E-mail</h5>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<article class="row px-4">
|
<div class="col-4 d-flex justify-content-around align-items-center">
|
||||||
<div class="py-2">
|
<a href="mailto://shicangjuner@outlook.com" class="p-2" target="_blank">
|
||||||
@Body
|
<h5>E-mail</h5>
|
||||||
</div>
|
</a>
|
||||||
</article>
|
|
||||||
|
|
||||||
<div class="row align-items-end text-center">
|
|
||||||
<div class="row">
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
|
||||||
@code {
|
<main class="row px-4 center">
|
||||||
|
<div class="py-2">
|
||||||
|
@Body
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
}
|
<Foonter/>
|
||||||
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
3
YaeBlog/Pages/BlogIndex.razor
Normal file
3
YaeBlog/Pages/BlogIndex.razor
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
@page "/blog"
|
||||||
|
|
||||||
|
|
0
YaeBlog/Pages/BlogIndex.razor.css
Normal file
0
YaeBlog/Pages/BlogIndex.razor.css
Normal 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">
|
||||||
如果您真的很闲,也可以四处搜寻一下,也许存在着一些不为人知的彩蛋。
|
如果您真的很闲,也可以四处搜寻一下,也许存在着一些不为人知的彩蛋。
|
||||||
|
|
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,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;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user