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"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<base href="/"/> <base href="/"/>
<link rel="stylesheet" href="YaeBlog.styles.css"/> <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"/> <link href="globals.css" rel="stylesheet"/>
<HeadOutlet/> <HeadOutlet/>
</head> </head>
<body> <body>
<Routes/> <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="_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="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
<script src="themes.js" type="module"></script>
</body> </body>
</html> </html>

10
YaeBlog/Components/Routes.razor
View File

@ -1,6 +1,14 @@
<Router AppAssembly="typeof(Program).Assembly"> <Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData"> <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"/> <FocusOnNavigate RouteData="routeData" Selector="h1"/>
</Found> </Found>
</Router> </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;
}

71
YaeBlog/Layout/MainLayout.razor
View File

@ -1,75 +1,16 @@
@using YaeBlog.Core.Models
@inherits LayoutComponentBase @inherits LayoutComponentBase
@inject BlogOptions BlogOptionsInstance
<FluentLayout> <FluentLayout Style="min-height: 100vh">
<FluentHeader> <FluentHeader Height="60">
<FluentStack Orientation="@Orientation.Horizontal"> <a href="/">
<div style="width: 50px"></div>
<a href="./">
<FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight"> <FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
@BlogOptionsInstance.Author Ricardo's Index
</FluentLabel> </FluentLabel>
</a> </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>
</FluentHeader> </FluentHeader>
<FluentBodyContent Style="height: 100%">
<FluentBodyContent>
<main style="height: 100%"> <main style="height: 100%">
@Body @Body
</main> </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 @using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance @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.Models
@using YaeBlog.Core.Services @using YaeBlog.Core.Services
@ -40,7 +40,7 @@
@foreach (KeyValuePair<string, BlogEssay> pair in group) @foreach (KeyValuePair<string, BlogEssay> pair in group)
{ {
<div class="archive-item"> <div class="archive-item">
<a href="essays/@(pair.Key)" target="_blank"> <a href="/blog/essays/@(pair.Key)" target="_blank">
<FluentStack Orientation="@Orientation.Horizontal"> <FluentStack Orientation="@Orientation.Horizontal">
<FluentLabel Typo="@Typography.H5" Style="width: 80px"> <FluentLabel Typo="@Typography.H5" Style="width: 80px">
@(pair.Value.PublishTime.ToString("MM-dd")) @(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.Models
@using YaeBlog.Core.Services @using YaeBlog.Core.Services
@ -33,14 +33,14 @@
{ {
<FluentCard Style="margin: 2rem 0 2rem 0"> <FluentCard Style="margin: 2rem 0 2rem 0">
<div> <div>
<a href="essays/@(essay.Key)" target="_blank"> <a href="/blog/essays/@(essay.Key)" target="_blank">
<FluentLabel Typo="@Typography.H4"> <FluentLabel Typo="@Typography.H4">
@(essay.Value.Title) @(essay.Value.Title)
</FluentLabel> </FluentLabel>
</a> </a>
<div style="margin: 0.5rem 0 0.5rem 0"> <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"> <div class="essay-description">
@(essay.Value.Description) @(essay.Value.Description)
</div> </div>
@ -172,7 +172,7 @@
if (flag is false) 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.Models
@using YaeBlog.Core.Services @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 @using YaeBlog.Core.Models
@inject BlogOptions BlogOptionsInstance @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.Models
@using YaeBlog.Core.Services @using YaeBlog.Core.Services
@ -33,7 +33,7 @@
@foreach (KeyValuePair<string, int> pair in EssayContentInstance.Tags) @foreach (KeyValuePair<string, int> pair in EssayContentInstance.Tags)
{ {
<div class="tag-item"> <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())"> <span style="font-size: @(14 + pair.Value)px; color: @(RandomColor())">
@pair.Key @pair.Key
</span> </span>
@ -52,7 +52,7 @@
{ {
<div style="margin: 0 4% 0 4%"> <div style="margin: 0 4% 0 4%">
<div class="tag-essay-item"> <div class="tag-essay-item">
<a href="essays/@(essay.FileName)" target="_blank"> <a href="/blog/essays/@(essay.FileName)" target="_blank">
<FluentStack Orientation="@Orientation.Horizontal"> <FluentStack Orientation="@Orientation.Horizontal">
<FluentLabel Typo="@Typography.H5" Style="width: 120px"> <FluentLabel Typo="@Typography.H5" Style="width: 120px">
@(essay.PublishTime.ToString("yyyy-MM-dd")) @(essay.PublishTime.ToString("yyyy-MM-dd"))

24
YaeBlog/YaeBlog.csproj
View File

@ -4,30 +4,6 @@
<ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" /> <ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" />
</ItemGroup> </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> <PropertyGroup>
<TargetFramework>net8.0</TargetFramework> <TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable> <Nullable>enable</Nullable>

2
YaeBlog/appsettings.json
View File

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