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

feat: 添加个人主页实现 #1

Merged
jackfiled merged 3 commits from feat-index into master 2024-07-02 09:17:24 +08:00
Conversation 0 Commits 3 Files Changed 24 +67 -14
6 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4c939ae353 - Show all commits

6
YaeBlog/Components/App.razor
View File

@ -1,5 +1,4 @@
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
@ -8,7 +7,7 @@
<base href="/"/>
<link rel="stylesheet" href="YaeBlog.styles.css"/>
<link rel="icon" href="images/favicon.ico"/>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet"/>
<link href="globals.css" rel="stylesheet"/>
<HeadOutlet/>
</head>
@ -22,6 +21,7 @@
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
<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>
<script src="themes.js" type="module"></script>
</body>
</html>

36
YaeBlog/Components/WebsiteCard.razor Normal file
View File

@ -0,0 +1,36 @@
<FluentGridItem md="3" sm="6" xs="12">
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<div style="margin: 10px 20px; width: 75%; height: 90%">
<a href="@Address" target="_blank">
<FluentCard Width="100%" Height="100%">
<FluentStack Orientation="@Orientation.Horizontal">
<div style="width: 25%; margin: 5px 0">
<img src="@ImageAddress" alt="@Name" width="100%"/>
</div>
<FluentStack Orientation="@Orientation.Vertical">
<FluentLabel Typo="@Typography.H3">
@Name
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
@Description
</FluentLabel>
</FluentStack>
</FluentStack>
</FluentCard>
</a>
</div>
</FluentStack>
</FluentGridItem>
@code {
[Parameter] public string Name { get; set; } = string.Empty;
[Parameter] public string Description { get; set; } = string.Empty;
[Parameter] public string ImageAddress { get; set; } = string.Empty;
[Parameter] public string Address { get; set; } = string.Empty;
}

0
YaeBlog/Components/WebsiteCard.razor.css Normal file
View File

7
YaeBlog/Layout/MainLayout.razor
View File

@ -1,7 +1,8 @@
@inherits LayoutComponentBase
<FluentLayout Style="min-height: 100vh">
<FluentHeader>
<FluentHeader Height="60">
<a href="/">
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
Ricardo's Index
@ -15,7 +16,3 @@
</main>
</FluentBodyContent>
</FluentLayout>
@code {
}

24
YaeBlog/Pages/Index.razor
View File

@ -5,7 +5,7 @@
</PageTitle>
<FluentStack Orientation="@Orientation.Vertical" Width="100%" Style="background-color: #f0f2f5; height: 100%">
<div style="width: 100%; height: 100%">
<div style="width: 100%; height: auto">
<FluentGrid>
<FluentGridItem md="3" xs="12">
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
@ -48,20 +48,32 @@
</FluentStack>
</FluentStack>
</FluentGridItem>
<FluentGridItem md="4" xs="12">
</FluentGridItem>
</FluentGrid>
</div>
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<FluentDivider Style="width: 90%" Orientation="@Orientation.Horizontal" Role="@DividerRole.Separator"/>
</FluentStack>
<div style="width: 100%; height: auto">
<FluentGrid Justify="@JustifyContent.Center">
<WebsiteCard Name="部落格" Address="/blog/" ImageAddress="/images/blog-icon.png"
Description="奇奇怪怪东西的聚集地"/>
<WebsiteCard Name="笔记本" Address="https://jackfiled.github.io/wiki/" ImageAddress="/images/wiki-icon.png"
Description="技校学习笔记"/>
<WebsiteCard Name="给提啊" Address="https://git.rrricardo.top" ImageAddress="/images/git-icon.png"
Description="宅男自用99成新"/>
</FluentGrid>
</div>
<div style="flex: 1"></div>
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<FluentStack Orientation="@Orientation.Vertical" HorizontalAlignment="@HorizontalAlignment.Center"
Style="padding: 20px">
<FluentLabel>
2021 - 2023 By <a href="https://rrricardo.top">Ricardo Ren</a>
2021 - @(DateTimeOffset.Now.Year) By <a href="https://rrricardo.top">Ricardo Ren</a>
</FluentLabel>
<FluentLabel>

8
YaeBlog/wwwroot/themes.js Normal file
View File

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