fix: 主页

This commit is contained in:
jackfiled 2024-07-27 17:59:34 +08:00
parent ca4f6449d3
commit 70e4c81d66
6 changed files with 82 additions and 46 deletions

View File

@ -1,6 +1,8 @@
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services @using YaeBlog.Core.Services
@inject EssayContentService EssayContentInstance @inject EssayContentService EssayContentInstance
@inject BlogOptions Options
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -38,5 +40,21 @@
</a> </a>
</div> </div>
</div> </div>
<div class="row px-1 py-2">
<div class="row justify-content-start fs-5">
<div class="col-auto">
广而告之
</div>
</div>
<div class="row py-2">
<div class="col-auto">
<p style="text-indent: 2em">
@(Options.Announcement)
</p>
</div>
</div>
</div>
</div> </div>

View File

@ -3,40 +3,54 @@
@attribute [StreamRendering] @attribute [StreamRendering]
<main class="container"> <main class="container">
<div class="row" style="height: 80px"> <div class="row d-none d-xl-flex" style="height: 80px">
<div class="px-2 col-8"> <div class="px-2 col-9">
<a href="/blog/" class="p-2"> <a href="/blog/" class="p-2">
<h4>Ricardo's Blog</h4> <h4>Ricardo's Blog</h4>
</a> </a>
</div> </div>
<div class="col-4 d-flex justify-content-around align-items-center"> <div class="col-3 d-flex justify-content-around align-items-center">
<a href="/blog/" class="p-2"> <a href="/blog/" class="p-2">
<div class="d-inline-flex" style="text-align: center">
<Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
<h5>首页</h5> <h5>首页</h5>
</div>
</a> </a>
<a href="/blog/archives/" class="p-2"> <a href="/blog/archives/" class="p-2">
<div class="d-inline-flex">
<Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="IconSize.x5"/>
<h5>归档</h5> <h5>归档</h5>
</div>
</a> </a>
<a href="/blog/tags/" class="p-2"> <a href="/blog/tags/" class="p-2">
<div class="d-inline-flex">
<Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
<h5>标签</h5> <h5>标签</h5>
</div>
</a> </a>
<a href="/blog/about/" class="p-2"> <a href="/blog/about/" class="p-2">
<div class="d-inline-flex">
<Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
<h5>关于</h5> <h5>关于</h5>
</a>
</div> </div>
</div>
<div class="row d-xl-none">
<div class="px-2 col-12">
<a href="/blog/" class="p-2">
<h4>Ricardo's Blog</h4>
</a>
</div>
<div class="px-2 col-12 justify-content-end d-flex">
<a href="/blog/" class="p-2">
<h5>首页</h5>
</a>
<a href="/blog/archives/" class="p-2">
<h5>归档</h5>
</a>
<a href="/blog/tags/" class="p-2">
<h5>标签</h5>
</a>
<a href="/blog/about/" class="p-2">
<h5>关于</h5>
</a> </a>
</div> </div>
</div> </div>

View File

@ -5,6 +5,10 @@
@inject EssayContentService EssayContentInstance @inject EssayContentService EssayContentInstance
@inject NavigationManager NavigationInstance @inject NavigationManager NavigationInstance
<PageTitle>
Ricardo's Blog
</PageTitle>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-9"> <div class="col-sm-12 col-md-9">

View File

@ -1,12 +1,16 @@
@page "/" @page "/"
<PageTitle>
Ricardo's Index
</PageTitle>
<div class="container"> <div class="container">
<div class="row py-4"> <div class="row py-4">
<div class="col-4"> <div class="col-lg-4 col-12 p-5 p-lg-0">
<Image Src="images/avatar.png" Alt="Ricardo's Avatar"/> <Image Src="images/avatar.png" Alt="Ricardo's Avatar"/>
</div> </div>
<div class="col-8"> <div class="col-lg-8 col-12">
<div class="container px-3"> <div class="container px-3">
<div class="row"> <div class="row">
<h4 class="fw-bold">初冬的朝阳 (Ricardo Ren)</h4> <h4 class="fw-bold">初冬的朝阳 (Ricardo Ren)</h4>
@ -27,6 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row" style="padding-top: 80px"> <div class="row" style="padding-top: 80px">
<p class="fs-5">恕我不能亲自为您沏茶(?),还是非常欢迎您能够来到我的主页。</p> <p class="fs-5">恕我不能亲自为您沏茶(?),还是非常欢迎您能够来到我的主页。</p>
@ -45,8 +50,6 @@
如果您真的很闲,也可以四处搜寻一下,也许存在着一些不为人知的彩蛋。 如果您真的很闲,也可以四处搜寻一下,也许存在着一些不为人知的彩蛋。
</p> </p>
</div> </div>
</div>
</div> </div>
@code { @code {

View File

@ -8,6 +8,11 @@ body main {
overflow-x: visible; overflow-x: visible;
} }
body p {
margin: 0;
margin-block: 0;
}
@font-face { @font-face {
font-family: "Font Awesome 6 Free"; font-family: "Font Awesome 6 Free";
font-style: normal; font-style: normal;

View File

@ -1,8 +0,0 @@
import * as fluentUI
from '/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js';
fluentUI.typeRampBaseFontSize.withDefault("16px");
fluentUI.typeRampBaseLineHeight.withDefault("16px");