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

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

Browse Source 
Reviewed-on: #1
This commit is contained in:
jackfiled 2024-07-02 09:17:23 +08:00
parent 2efe2fd5cd
commit 0d8476a132
24 changed files with 269 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
YaeBlog/Components/App.razor
View File

@ -6,15 +6,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<base href="/"/>
<link rel="stylesheet" href="YaeBlog.styles.css"/>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<link rel="icon" href="images/favicon.ico"/>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet"/>
<link href="globals.css" rel="stylesheet"/>
<HeadOutlet/>
</head>
<body>
<Routes/>
<FluentDesignTheme StorageName="theme" Mode="@DesignThemeModes.System"/>
<loading-theme storage-name="theme"></loading-theme>
<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>

10
YaeBlog/Components/Routes.razor
View File

@ -1,6 +1,14 @@
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"/>
@if (routeData.Template is not null && routeData.Template.StartsWith("/blog"))
{
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.BlogLayout)"/>
}
else
{
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)"></RouteView>
}
<FocusOnNavigate RouteData="routeData" Selector="h1"/>
</Found>
</Router>

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

77
YaeBlog/Layout/BlogLayout.razor Normal file
View File

@ -0,0 +1,77 @@
@using YaeBlog.Core.Models
@inherits LayoutComponentBase
@inject BlogOptions BlogOptionsInstance
<FluentLayout>
<FluentHeader>
<FluentStack Orientation="@Orientation.Horizontal">
<div style="width: 50px"></div>
<a href="/blog">
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
@BlogOptionsInstance.Author
</FluentLabel>
</a>
<FluentSpacer/>
<a href="/blog" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Home())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
首页
</FluentLabel>
</div>
</a>
<a href="/blog/archives" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Archive())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
归档
</FluentLabel>
</div>
</a>
<a href="/blog/tags" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Tag())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
标签
</FluentLabel>
</div>
</a>
<a href="/blog/about" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.PersonInfo())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
关于
</FluentLabel>
</div>
</a>
<a href="/blog/links" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.LinkMultiple())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
友链
</FluentLabel>
</div>
</a>
<div style="width: 20px"></div>
</FluentStack>
</FluentHeader>
<FluentBodyContent Style="height: 100%">
<main style="height: 100%">
@Body
</main>
</FluentBodyContent>
</FluentLayout>

4
YaeBlog/Layout/BlogLayout.razor.css Normal file
View File

@ -0,0 +1,4 @@
.quick-link {
display: flex;
align-items: center;
}

77
YaeBlog/Layout/MainLayout.razor
View File

@ -1,75 +1,16 @@
@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.H3" Color="@Color.Lightweight">
@BlogOptionsInstance.Author
</FluentLabel>
</a>
<FluentSpacer/>
<a href="./" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Home())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
首页
</FluentLabel>
</div>
</a>
<a href="archives" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Archive())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
归档
</FluentLabel>
</div>
</a>
<a href="tags" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.Tag())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
标签
</FluentLabel>
</div>
</a>
<a href="about" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.PersonInfo())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
关于
</FluentLabel>
</div>
</a>
<a href="links" style="margin: auto 0 auto 0">
<div class="quick-link">
<FluentIcon Value="@(new Icons.Regular.Size16.LinkMultiple())" Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight"
Style="margin-left: 0.2rem">
友链
</FluentLabel>
</div>
</a>
<div style="width: 20px"></div>
</FluentStack>
<FluentLayout Style="min-height: 100vh">
<FluentHeader Height="60">
<a href="/">
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
Ricardo's Index
</FluentLabel>
</a>
</FluentHeader>
<FluentBodyContent Style="height: 100%">
<FluentBodyContent>
<main style="height: 100%">
@Body
</main>

4
YaeBlog/Layout/MainLayout.razor.css
View File

@ -1,4 +0,0 @@
.quick-link {
display: flex;
align-items: center;
}

2
YaeBlog/Pages/About.razor
View File

@ -1,4 +1,4 @@
@page "/about"
@page "/blog/about"
@using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance

4
YaeBlog/Pages/Archives.razor
View File

@ -1,4 +1,4 @@
@page "/archives"
@page "/blog/archives"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@ -40,7 +40,7 @@
@foreach (KeyValuePair<string, BlogEssay> pair in group)
{
<div class="archive-item">
<a href="essays/@(pair.Key)" target="_blank">
<a href="/blog/essays/@(pair.Key)" target="_blank">
<FluentStack Orientation="@Orientation.Horizontal">
<FluentLabel Typo="@Typography.H5" Style="width: 80px">
@(pair.Value.PublishTime.ToString("MM-dd"))

8
YaeBlog/Pages/Home.razor → YaeBlog/Pages/BlogIndex.razor
View File

@ -1,4 +1,4 @@
@page "/"
@page "/blog"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@ -33,14 +33,14 @@
{
<FluentCard Style="margin: 2rem 0 2rem 0">
<div>
<a href="essays/@(essay.Key)" target="_blank">
<a href="/blog/essays/@(essay.Key)" target="_blank">
<FluentLabel Typo="@Typography.H4">
@(essay.Value.Title)
</FluentLabel>
</a>
<div style="margin: 0.5rem 0 0.5rem 0">
<a href="essays/@(essay.Key)" target="_blank" style="color: #718096;">
<a href="/blog/essays/@(essay.Key)" target="_blank" style="color: #718096;">
<div class="essay-description">
@(essay.Value.Description)
</div>
@ -172,7 +172,7 @@
if (flag is false)
{
NavigationManagerInstance.NavigateTo("NotFount");
NavigationManagerInstance.NavigateTo("/NotFount");
}
}

0
YaeBlog/Pages/Home.razor.css → YaeBlog/Pages/BlogIndex.razor.css
View File

36
YaeBlog/Pages/Error.razor
View File

@ -1,36 +0,0 @@
@page "/Error"
@using System.Diagnostics
<PageTitle>Error</PageTitle>
<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>
@if (ShowRequestId)
{
<p>
<strong>Request ID:</strong> <code>@RequestId</code>
</p>
}
<h3>Development Mode</h3>
<p>
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
It can result in displaying sensitive information from exceptions to end users.
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
and restarting the app.
</p>
@code{
[CascadingParameter] private HttpContext? HttpContext { get; set; }
private string? RequestId { get; set; }
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
protected override void OnInitialized() =>
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
}

2
YaeBlog/Pages/Essay.razor
View File

@ -1,4 +1,4 @@
@page "/essays/{Filename}"
@page "/blog/essays/{Filename}"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services

90
YaeBlog/Pages/Index.razor Normal file
View File

@ -0,0 +1,90 @@
@page "/"
<PageTitle>
初冬的朝阳个人主页
</PageTitle>
<FluentStack Orientation="@Orientation.Vertical" Width="100%" Style="min-height: 100%">
<div style="width: 100%; height: auto">
<FluentGrid>
<FluentGridItem md="3" xs="12">
<FluentStack Orientation="@Orientation.Horizontal" HorizontalAlignment="@HorizontalAlignment.Center">
<img src="images/avatar.png" alt="Ricardo's Avatar" class="avatar-image"/>
</FluentStack>
</FluentGridItem>
<FluentGridItem md="9" xs="12">
<FluentStack Orientation="@Orientation.Vertical" Style="padding: 25px" VerticalGap="20">
<FluentLabel Typo="@Typography.H3" Weight="@FontWeight.Bold">
初冬的朝阳 (Ricardo Ren)
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
a.k.a jackfiled
</FluentLabel>
<FluentLabel Typo="@Typography.Body" Style="font-style: italic">
世界很大，时间很长。
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
一个平平无奇的CS学生。
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
还太菜了，连微小的贡献都没做。
</FluentLabel>
<div style="height: 20px"></div>
<FluentStack Orientation="@Orientation.Horizontal" HorizontalGap="20">
<FluentLabel Typo="@Typography.Body">
<a href="https://github.com/jackfiled">Github</a>
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
<a href="https://git.rrricardo.top/jackfiled">Gitea</a>
</FluentLabel>
<FluentLabel Typo="@Typography.Body">
<a href="mailto://shicangjuner@outlook.com">E-Mail</a>
</FluentLabel>
</FluentStack>
</FluentStack>
</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="技校学习笔记"/>
</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 - @(DateTimeOffset.Now.Year) By <a href="https://rrricardo.top">Ricardo Ren</a>
</FluentLabel>
<FluentLabel>
<a href="https://beian.miit.gov.cn">蜀ICP备2022004429号-1</a>
</FluentLabel>
</FluentStack>
</FluentStack>
</FluentStack>
@code {
}

15
YaeBlog/Pages/Index.razor.css Normal file
View File

@ -0,0 +1,15 @@
.index-container {
background-color: #f0f2f5;
}
.avatar-image {
margin: 25px;
width: 100%;
height: auto;
max-width: 300px;
max-height: 300px;
}
.footer-zone {
text-align: center;
}

2
YaeBlog/Pages/Links.razor
View File

@ -1,4 +1,4 @@
@page "/links"
@page "/blog/links"
@using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance

6
YaeBlog/Pages/Tags.razor
View File

@ -1,4 +1,4 @@
@page "/tags"
@page "/blog/tags"
@using YaeBlog.Core.Models
@using YaeBlog.Core.Services
@ -33,7 +33,7 @@
@foreach (KeyValuePair<string, int> pair in EssayContentInstance.Tags)
{
<div class="tag-item">
<a href="tags?TagName=@(pair.Key)">
<a href="/blog/tags?TagName=@(pair.Key)">
<span style="font-size: @(14 + pair.Value)px; color: @(RandomColor())">
@pair.Key
</span>
@ -52,7 +52,7 @@
{
<div style="margin: 0 4% 0 4%">
<div class="tag-essay-item">
<a href="essays/@(essay.FileName)" target="_blank">
<a href="/blog/essays/@(essay.FileName)" target="_blank">
<FluentStack Orientation="@Orientation.Horizontal">
<FluentLabel Typo="@Typography.H5" Style="width: 120px">
@(essay.PublishTime.ToString("yyyy-MM-dd"))

24
YaeBlog/YaeBlog.csproj
View File

@ -4,30 +4,6 @@
<ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" />
</ItemGroup>
<ItemGroup>
<AdditionalFiles Include="Layout\MainLayout.razor" />
<AdditionalFiles Include="Pages\About.razor" />
<AdditionalFiles Include="Pages\Archives.razor" />
<AdditionalFiles Include="Pages\Error.razor" />
<AdditionalFiles Include="Pages\Essay.razor" />
<AdditionalFiles Include="Pages\Home.razor" />
<AdditionalFiles Include="Pages\Links.razor" />
<AdditionalFiles Include="Pages\NotFound.razor" />
<AdditionalFiles Include="Pages\Tags.razor" />
</ItemGroup>
<ItemGroup>
<_ContentIncludedByDefault Remove="Components\Pages\About.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\Archives.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\Error.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\Essay.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\Home.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\Links.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\NotFound.razor" />
<_ContentIncludedByDefault Remove="Components\Pages\Tags.razor" />
<_ContentIncludedByDefault Remove="Components\Layout\MainLayout.razor" />
</ItemGroup>
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>

2
YaeBlog/appsettings.json
View File

@ -29,7 +29,7 @@
},
{
"Name": "志田千陽",
"Description": "日出多期待",
"Description": "日出多值得",
"Link": "https://zzachary.top/",
"AvatarImage": "https://zzachary.top/img/ztqy_hub928259802d192ff5718c06370f0f2c4_48203_300x0_resize_q75_box.jpg"
},

BIN
YaeBlog/wwwroot/images/blog-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
YaeBlog/wwwroot/images/git-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
YaeBlog/wwwroot/images/wiki-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

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");