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

add: 博客主页

Browse Source
This commit is contained in:
jackfiled 2024-01-21 19:57:14 +08:00
parent b16ae3209a
commit 50306e2943
7 changed files with 168 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
YaeBlog.Core/Models/BlogOptions.cs
View File

@ -6,5 +6,9 @@ public class BlogOptions
public required string Root { get; set; } public required string Root { get; set; }
public required string Author { get; set; }
public required string ProjectName { get; set; } public required string ProjectName { get; set; }
public required string BannerImage { get; set; }
} }

31
YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
View File

@ -1,44 +1,47 @@
@using YaeBlog.Core.Models
@inherits LayoutComponentBase @inherits LayoutComponentBase
@inject BlogOptions BlogOptionsInstance
<FluentLayout> <FluentLayout>
<FluentHeader> <FluentHeader>
<FluentStack Orientation="@Orientation.Horizontal"> <FluentStack Orientation="@Orientation.Horizontal">
<div style="width: 50px"></div> <div style="width: 50px"></div>
<a href="/"> <a href="/">
<FluentLabel Typo="@Typography.H4"> <FluentLabel Typo="@Typography.H3">
Ricardo Ren @BlogOptionsInstance.Author
</FluentLabel> </FluentLabel>
</a> </a>
<FluentSpacer/> <FluentSpacer/>
<a href="/"> <a href="/" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.Body"> <FluentLabel Typo="@Typography.H5">
首页 首页
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/archives"> <a href="/archives" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.Body"> <FluentLabel Typo="@Typography.H5">
归档 归档
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/tags"> <a href="/tags" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.Body"> <FluentLabel Typo="@Typography.H5">
标签 标签
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/about"> <a href="/about" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.Body"> <FluentLabel Typo="@Typography.H5">
关于 关于
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/links"> <a href="/links" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.Body"> <FluentLabel Typo="@Typography.H5">
友链 友链
</FluentLabel> </FluentLabel>
</a> </a>
@ -46,8 +49,8 @@
<div style="width: 50px"></div> <div style="width: 50px"></div>
</FluentStack> </FluentStack>
</FluentHeader> </FluentHeader>
<FluentBodyContent> <FluentBodyContent Style="height: 100%">
<main> <main style="height: 100%">
@Body @Body
</main> </main>
</FluentBodyContent> </FluentBodyContent>

78
YaeBlog.Theme.FluentUI/Pages/Home.razor
View File

@ -1,7 +1,81 @@
@page "/" @page "/"
<h3>Home</h3> @using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance
<div style="height: 100%">
<div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
<div class="blog-title">
<FluentLabel Typo="@Typography.H1" Style="color: white">
@(BlogOptionsInstance.Author)'s Blog
</FluentLabel>
</div>
<div class="scroll-down">
<i class="scroll-down-tag"></i>
</div>
</div>
<div style="margin: 0 15% 0 15%">
<FluentCard>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
<div>
asdfasdfsadf
</div>
</FluentCard>
</div>
</div>
<p class="test">Color Text</p>
@code { @code {

55
YaeBlog.Theme.FluentUI/Pages/Home.razor.css
View File

@ -1,3 +1,54 @@
.test { .banner {
color: purple; position: relative;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.blog-title {
color: white;
text-align: center;
top: 43%;
position: absolute;
width: 100%;
}
.scroll-down {
position: absolute;
bottom: 0;
width: 100%;
}
.scroll-down-tag::before {
content: "V";
}
.scroll-down-tag {
font-family: "Font Awesome 6 Free", sans-serif;
font-size: 36px;
color: white;
text-align: center;
position: relative;
display: inline-block;
width: 100%;
animation: scroll-down-animation 1.5s infinite;
}
@keyframes scroll-down-animation {
0% {
top: 0;
opacity: 0.4;
}
50% {
top: -20px;
opacity: 1;
}
100% {
top: 0;
opacity: 0.4;
}
} }

5
YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj
View File

@ -13,6 +13,11 @@
<ItemGroup> <ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" /> <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.3.1" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" />
</ItemGroup> </ItemGroup>
</Project> </Project>

10
YaeBlog.Theme.FluentUI/_Imports.razor
View File

@ -1 +1,9 @@
@using Microsoft.AspNetCore.Components.Web @using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Microsoft.FluentUI.AspNetCore.Components

4
YaeBlog.Theme.FluentUI/wwwroot/globals.css
View File

@ -1,3 +1,7 @@
body a { body a {
text-decoration: none; text-decoration: none;
} }
html, body {
height: 100%;
}