add: FluentUI主题及其主题框架
This commit is contained in:
parent
586ac256b1
commit
25be0d2302
23
YaeBlog.Theme.FluentUI/App.razor
Normal file
23
YaeBlog.Theme.FluentUI/App.razor
Normal 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
26
YaeBlog.Theme.FluentUI/BlogApplicationBuilderExtensions.cs
Normal 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
54
YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
Normal 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
8
YaeBlog.Theme.FluentUI/Pages/Home.razor
Normal 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
3
YaeBlog.Theme.FluentUI/Pages/Home.razor.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.test {
|
||||||
|
color: purple;
|
||||||
|
}
|
5
YaeBlog.Theme.FluentUI/Routes.razor
Normal file
5
YaeBlog.Theme.FluentUI/Routes.razor
Normal 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
3
YaeBlog.Theme.FluentUI/wwwroot/globals.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
body a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user