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

add: 子标题和文章简介

Browse Source
This commit is contained in:
jackfiled 2024-01-24 20:53:41 +08:00
parent afc6f26370
commit 78c6a806bf
5 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
View File

@ -9,7 +9,7 @@
<div style="width: 50px"></div> <div style="width: 50px"></div>
<a href="/"> <a href="/">
<FluentLabel Typo="@Typography.H3"> <FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
@BlogOptionsInstance.Author @BlogOptionsInstance.Author
</FluentLabel> </FluentLabel>
</a> </a>
@ -17,31 +17,31 @@
<FluentSpacer/> <FluentSpacer/>
<a href="/" style="margin: auto 0 auto 0"> <a href="/" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5"> <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
首页 首页
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/archives" style="margin: auto 0 auto 0"> <a href="/archives" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5"> <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
归档 归档
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/tags" style="margin: auto 0 auto 0"> <a href="/tags" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5"> <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
标签 标签
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/about" style="margin: auto 0 auto 0"> <a href="/about" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5"> <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
关于 关于
</FluentLabel> </FluentLabel>
</a> </a>
<a href="/links" style="margin: auto 0 auto 0"> <a href="/links" style="margin: auto 0 auto 0">
<FluentLabel Typo="@Typography.H5"> <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
友链 友链
</FluentLabel> </FluentLabel>
</a> </a>

20
YaeBlog.Theme.FluentUI/Pages/Essay.razor
View File

@ -9,9 +9,26 @@
<div style="height: 100%"> <div style="height: 100%">
<div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')"> <div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
<div class="essay-title"> <div class="essay-title">
<FluentStack Orientation="@Orientation.Vertical"
HorizontalAlignment="@HorizontalAlignment.Center">
<FluentLabel Typo="@Typography.H1" Style="color: white"> <FluentLabel Typo="@Typography.H1" Style="color: white">
@(_essay!.Title) @(_essay!.Title)
</FluentLabel> </FluentLabel>
<div class="essay-subtitle">
<FluentIcon Value="@(new Icons.Regular.Size16.Calendar())"
Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
@(_essay!.PublishTime.ToString("yyyy年MM月dd日"))
</FluentLabel>
</div>
<div class="essay-subtitle">
<FluentIcon Value="@(new Icons.Regular.Size16.DataBarVerticalAscending())"
Color="@Color.Fill"/>
<FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
@(_essay!.WordCount)字
</FluentLabel>
</div>
</FluentStack>
</div> </div>
</div> </div>
@ -35,8 +52,7 @@
</div> </div>
@code { @code {
[Parameter] [Parameter] public string? Filename { get; set; }
public string? Filename { get; set; }
private BlogEssay? _essay; private BlogEssay? _essay;

6
YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
View File

@ -8,7 +8,6 @@
.essay-title { .essay-title {
color: white; color: white;
text-align: center;
top: 43%; top: 43%;
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -18,3 +17,8 @@
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
.essay-subtitle {
display: flex;
align-items: center;
}

10
YaeBlog.Theme.FluentUI/Pages/Home.razor
View File

@ -31,10 +31,18 @@
<div> <div>
<a href="essays/@(essay.Key)" target="_blank"> <a href="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">
<a href="essays/@(essay.Key)" target="_blank" style="color: #718096;">
<div class="essay-description">
@(essay.Value.Description)
</div>
</a>
</div>
<FluentStack VerticalAlignment="@VerticalAlignment.Center" <FluentStack VerticalAlignment="@VerticalAlignment.Center"
Style="margin: 1rem 0 1rem 0" Style="margin: 1rem 0 1rem 0"
HorizontalGap="4"> HorizontalGap="4">

8
YaeBlog.Theme.FluentUI/Pages/Home.razor.css
View File

@ -56,7 +56,13 @@
} }
.essay-description { .essay-description {
vertical-align: middle; width: 100%;
line-height: 1.4rem;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
} }
.pagination { .pagination {