add: 子标题和文章简介
This commit is contained in:
parent
afc6f26370
commit
78c6a806bf
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
<FluentLabel Typo="@Typography.H1" Style="color: white">
|
<FluentStack Orientation="@Orientation.Vertical"
|
||||||
@(_essay!.Title)
|
HorizontalAlignment="@HorizontalAlignment.Center">
|
||||||
</FluentLabel>
|
<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>
|
||||||
</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;
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user