🆕全新的文章列表UI

StarBlog.Share/Extensions/StringExt.cs

@@ -4,11 +4,14 @@ namespace StarBlog.Share.Extensions;
 
 public static class StringExt {
     public static string Limit(this string str, int length) {
-        if (str.Length <= length) {
-            return str;
-        }
+        return str.Length <= length ? str : str[..length];
+    }
 
-        return str[..length];
+    /// <summary>
+    /// 限制字符串显示长度并在末尾添加省略号
+    /// </summary>
+    public static string LimitWithEllipsis(this string str, int length) {
+        return str.Length <= length ? str : $"{str[..length]}...";
     }
 
     public static string ToSHA256(this string source) {

StarBlog.Web/Views/Blog/List.cshtml

@@ -79,7 +79,7 @@
             }
 
             @foreach (var post in Model.Posts) {
-                <partial name="Widgets/PostCard" model="post"/>
+                <partial name="Widgets/PostCardNew" model="post"/>
             }
         </div>
     </div>

StarBlog.Web/Views/Shared/Widgets/PostCardNew.cshtml

@@ -0,0 +1,40 @@
+@using StarBlog.Share.Extensions
+@model Post
+
+@{
+    var postHref = Url.Action("Post", "Blog", new { id = Model.Id });
+    if (!string.IsNullOrWhiteSpace(Model.Slug)) {
+        postHref = $"/p/{Model.Slug}";
+    }
+}
+
+<div class="mb-3">
+    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col-auto d-none d-lg-block text-center p-3">
+            <img class="bd-placeholder-img" alt="@Model.Title"
+                 src="@Url.Action("GetRandomImage", "PicLib", new { Seed = Model.Id, Width = 250, Height = 160 })">
+        </div>
+        <div class="col p-4 d-flex flex-column position-static">
+            <a href="@postHref" class="mb-1 text-info">
+                <h5 class="card-title">@Model.Title</h5>
+            </a>
+            <small class="card-text text-muted mb-auto">@Model.Summary?.LimitWithEllipsis(120)</small>
+            <div class="d-flex justify-content-between mt-3">
+                <div>
+                    <span class="text-muted me-3">
+                        <i class="fa-regular fa-clock"></i>
+                        @Model.CreationTime.ToString("yyyy-MM-dd")
+                    </span>
+                    <span class="text-muted">
+                        <i class="fa-solid fa-fire-flame-curved"></i> @Random.Shared.Next(500, 2000).ToString()
+                    </span>
+                </div>
+                @if (Model.Category != null) {
+                    <a asp-controller="Blog" asp-action="List" asp-route-categoryId="@Model.Category.Id" class="text-primary">
+                        <strong>@Model.Category.Name</strong>
+                    </a>
+                }
+            </div>
+        </div>
+    </div>
+</div>