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

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

@ -9,9 +9,26 @@
<div style="height: 100%">
<div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
<div class="essay-title">
<FluentLabel Typo="@Typography.H1" Style="color: white">
@(_essay!.Title)
</FluentLabel>
<FluentStack Orientation="@Orientation.Vertical"
HorizontalAlignment="@HorizontalAlignment.Center">
<FluentLabel Typo="@Typography.H1" Style="color: white">
@(_essay!.Title)
</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>
@ -35,8 +52,7 @@
</div>
@code {
[Parameter]
public string? Filename { get; set; }
[Parameter] public string? Filename { get; set; }
private BlogEssay? _essay;

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

@ -8,7 +8,6 @@
.essay-title {
color: white;
text-align: center;
top: 43%;
position: absolute;
width: 100%;
@ -18,3 +17,8 @@
font-size: 1rem;
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>
<a href="essays/@(essay.Key)" target="_blank">
<FluentLabel Typo="@Typography.H4">
@essay.Value.Title
@(essay.Value.Title)
</FluentLabel>
</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"
Style="margin: 1rem 0 1rem 0"
HorizontalGap="4">

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

@ -56,7 +56,13 @@
}
.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 {