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

add: FluentUI主题及其主题框架

Browse Source
This commit is contained in:
jackfiled 2024-01-20 17:10:32 +08:00
parent 586ac256b1
commit 25be0d2302
7 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
YaeBlog.Theme.FluentUI/App.razor Normal file
View File

@ -0,0 +1,23 @@
@using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<base href="/"/>
<link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
<HeadOutlet/>
</head>
<body>
<Routes/>
<script src="_framework/blazor.web.js"></script>
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
</body>
</html>

26
YaeBlog.Theme.FluentUI/BlogApplicationBuilderExtensions.cs Normal file
View File

@ -0,0 +1,26 @@
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using YaeBlog.Core.Builder;
using YaeBlog.Core.Extensions;
namespace YaeBlog.Theme.FluentUI;
public static class BlogApplicationBuilderExtensions
{
public static void UseFluentTheme(this BlogApplicationBuilder builder)
{
builder.ConfigureWebApplication(ConfigureWebApplicationBuilder, ConfigureWebApplication);
}
private static void ConfigureWebApplicationBuilder(WebApplicationBuilder builder)
{
builder.Services.AddRazorComponents();
}
private static void ConfigureWebApplication(WebApplication application)
{
application.UseStaticFiles();
application.UseAntiforgery();
application.MapRazorComponents<App>();
}
}

54
YaeBlog.Theme.FluentUI/Layout/MainLayout.razor Normal file
View File

@ -0,0 +1,54 @@
@inherits LayoutComponentBase
<FluentLayout>
<FluentHeader>
<FluentStack Orientation="@Orientation.Horizontal">
<div style="width: 50px"></div>
<a href="/">
<FluentLabel Typo="@Typography.H4">
Ricardo Ren
</FluentLabel>
</a>
<FluentSpacer/>
<a href="/">
<FluentLabel Typo="@Typography.Body">
首页
</FluentLabel>
</a>
<a href="/archives">
<FluentLabel Typo="@Typography.Body">
归档
</FluentLabel>
</a>
<a href="/tags">
<FluentLabel Typo="@Typography.Body">
标签
</FluentLabel>
</a>
<a href="/about">
<FluentLabel Typo="@Typography.Body">
关于
</FluentLabel>
</a>
<a href="/links">
<FluentLabel Typo="@Typography.Body">
友链
</FluentLabel>
</a>
<div style="width: 50px"></div>
</FluentStack>
</FluentHeader>
<FluentBodyContent>
<main>
@Body
</main>
</FluentBodyContent>
</FluentLayout>

8
YaeBlog.Theme.FluentUI/Pages/Home.razor Normal file
View File

@ -0,0 +1,8 @@
@page "/"
<h3>Home</h3>
<p class="test">Color Text</p>
@code {
}

3
YaeBlog.Theme.FluentUI/Pages/Home.razor.css Normal file
View File

@ -0,0 +1,3 @@
.test {
color: purple;
}

5
YaeBlog.Theme.FluentUI/Routes.razor Normal file
View File

@ -0,0 +1,5 @@
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)"/>
</Found>
</Router>

3
YaeBlog.Theme.FluentUI/wwwroot/globals.css Normal file
View File

@ -0,0 +1,3 @@
body a {
text-decoration: none;
}