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

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

@ -1,7 +1,81 @@
@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 {

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

@ -1,3 +1,54 @@
.test {
color: purple;
.banner {
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>
<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>
</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 {
text-decoration: none;
}
html, body {
height: 100%;
}