Add an empty view for blog posts

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -1,5 +1,5 @@
 {
-  "culture": "en",
+    "culture": "en",
     "texts": {
         "AddSubMenuItem": "Add Sub Menu Item",
         "AreYouSure": "Are You Sure?",
@@ -227,6 +227,7 @@
         "CssClass": "CSS Class",
         "TagsHelpText": "Tags should be comma-separated (e.g.: tag1, tag2, tag3)",
         "ThisPartOfContentCouldntBeLoaded": "This part of content couldn't be loaded.",
-        "DuplicateCommentAttemptMessage": "Duplicate comment post attempt detected. Your comment has already been submitted."
+        "DuplicateCommentAttemptMessage": "Duplicate comment post attempt detected. Your comment has already been submitted.",
+        "NoBlogPostYet": "No blog post yet!"
     }
 }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml

@@ -59,38 +59,48 @@
     <hr />
 }
 
-<abp-row id="blogs-container">
+@if (Model.Blogs.TotalCount > 0)
-    @foreach (var blog in Model.Blogs.Items)
+{
-    {
+    <abp-row id="blogs-container">
-        <abp-column size="_12" size-md="_6" size-lg="_4">
+        @foreach (var blog in Model.Blogs.Items)
-            <abp-card>
+        {
-                @if (blog.CoverImageMediaId != null)
+            <abp-column size="_12" size-md="_6" size-lg="_4">
-                {
+                <abp-card>
-                    <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
+                    @if (blog.CoverImageMediaId != null)
-                }
+                    {
-                else
+                        <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
-                {
+                    }
-                    <img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top" />
+                    else
-                }
+                    {
-                <abp-card-body class="p-4">
+                        <img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top" />
-                    <h5>@blog.Title</h5>
+                    }
-                    <p class="mb-2">
+                    <abp-card-body class="p-4">
-                        <span class="font-weight-bold author-name-span" data-author-id="@blog.Author.Id">@@@blog.Author?.UserName</span>
+                        <h5>@blog.Title</h5>
-                        <small style="opacity:.65;">@blog.CreationTime</small>
+                        <p class="mb-2">
-                    </p>
+                            <span class="font-weight-bold author-name-span" data-author-id="@blog.Author.Id">@@@blog.Author?.UserName</span>
-                    <p style="min-height: 60px;">@blog.ShortDescription</p>
+                            <small style="opacity:.65;">@blog.CreationTime</small>
-                    <div class="d-grid gap-2">
+                        </p>
-                        <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug/@blog.Slug" class="btn btn-light">
+                        <p style="min-height: 60px;">@blog.ShortDescription</p>
-                            @L["Read"]
+                        <div class="d-grid gap-2">
-                        </a>
+                            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug/@blog.Slug" class="btn btn-light">
-                    </div>
+                                @L["Read"]
-                </abp-card-body>
+                            </a>
-            </abp-card>
+                        </div>
+                    </abp-card-body>
+                </abp-card>
+            </abp-column>
+        }
+    </abp-row>
+    <abp-row>
+        <abp-column>
+            <abp-paginator model="Model.PagerModel" />
         </abp-column>
-    }
+    </abp-row>
-</abp-row>
+}
-<abp-row>
+else
-    <abp-column>
+{
-        <abp-paginator model="Model.PagerModel" />
+    <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center py-5">
-    </abp-column>
+        <h1><i class="fa fa-ban"></i></h1>
-</abp-row>
+        <h3>@L["NoBlogPostYet"]</h3>
+    </div>
+}