From 92caae215c1f5acf222f3a54d804776fecd3eed7 Mon Sep 17 00:00:00 2001
From: Mansur Besleney <besleneymansur@gmail.com>
Date: Fri, 28 Nov 2025 17:30:04 +0300
Subject: [PATCH] Improve blog post UI and update tag and style components

Refactored tag display in Default.cshtml to use divs and updated badge classes for better styling. Enhanced BlogPost.cshtml layout for author info, ratings, and reactions, improving structure and visual hierarchy. Added new CSS styles for blockquotes and code blocks in blogPost.css to enhance content readability.
---
 .../Shared/Components/Tags/Default.cshtml     | 12 ++--
 .../Pages/Public/CmsKit/Blogs/BlogPost.cshtml | 70 ++++++++++---------
 .../Pages/Public/CmsKit/Blogs/blogPost.css    | 18 +++++
 3 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
index 133e868a3f..7d568c4b0b 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
@@ -6,26 +6,22 @@
 	<div class="cms-tags-area">
 		@if (Model.Tags != null)
 		{
-			<ul class="d-flex flex-wrap gap-1">
+			<div class="d-flex flex-wrap gap-2">
 				@foreach (var tag in Model.Tags)
 				{
 					if (Model.UrlFormat.IsNullOrWhiteSpace())
 					{
-						<li>
-							<span class="badge rounded-pill badge-secondary text-bg-secondary cmskit-tag font-weight-normal">
+							<span class="badge rounded-pill bg-secondary cmskit-tag fw-normal">
 								@tag.Name
 							</span>
-						</li>
 					}
 					else
 					{
 						var formattedUrl = Model.UrlFormat.Replace("{TagId}", tag.Id.ToString()).Replace("{TagName}", tag.Name);
-						<li>
-							<a href="@formattedUrl"><span class="badge rounded-pill badge-secondary text-bg-secondary cmskit-tag font-weight-normal">@tag.Name</span></a>
-						</li>
+							<a class="badge rounded-pill bg-secondary cmskit-tag fw-normal text-decoration-none" href="@formattedUrl">@tag.Name</a>
 					}
 				}
-			</ul>
+			</div>
 		}
 	</div>
 </div> 
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
index e3f8fa1677..d94c8e199e 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
@@ -60,13 +60,13 @@
                 <input hidden id="BlogId" value="@Model.ViewModel.Id" />
                 <abp-card-body>
                     <abp-row>
-                        <div class="col-lg-8 col-md-10 mx-auto pb-4">
+                        <div class="col-lg-8 col-md-10 mx-auto">
                             <h1 class="mt-lg-4 mt-md-3">@Model.ViewModel.Title</h1>
                             <p class="mb-lg-5 mb-md-3">
-                            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
-                                    <span class="font-weight-bold">@@@Model.ViewModel.Author?.UserName</span>
+                            <a class="text-decoration-none" href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
+                                    <span class="fw-bold text-dark">@@@Model.ViewModel.Author?.UserName</span>
                                 </a>
-                                <small style="opacity:.65;">@Model.ViewModel.CreationTime</small>
+                                <small class="text-muted">@Model.ViewModel.CreationTime</small>
                             </p>
                             @(await Component.InvokeAsync(typeof(ContentFragmentViewComponent), new DefaultContentDto
                             {
@@ -96,35 +96,41 @@
                             }
                     </div>
                 </abp-row>
+                
+                    <abp-row class="row">
+                        <div class="col-lg-8 col-md-10 mx-auto pb-4">
+                            <hr class="mt-0" />
+                            <abp-row>
+                                <abp-column size-lg="_6" size-md="_12">
+                                    @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
+                                    {
+                                        if (Model.RatingsFeature?.IsEnabled == true)
+                                        {
+                                            @await Component.InvokeAsync(typeof(RatingViewComponent), new
+                                            {
+                                                entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                                                entityId = Model.ViewModel.Id.ToString()
+                                            })
+                                        }
+                                    }
+                                </abp-column>
+                                <abp-column class="d-flex justify-content-end" size-lg="_6" size-md="_12">
+                                    @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
+                                    {
+                                        if (Model.ReactionsFeature?.IsEnabled == true)
+                                        {
+                                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
+                                            {
+                                                entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                                                entityId = Model.ViewModel.Id.ToString()
+                                            })
+                                        }
+                                    }
+                                </abp-column>
+                            </abp-row>
+                        </div>
 
-                <abp-row class="row">
-                    <abp-column size-lg="_6" size-md="_12">
-                        @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-                        {
-                            if (Model.ReactionsFeature?.IsEnabled == true)
-                            {
-                                @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
-                                {
-                                    entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                                    entityId = Model.ViewModel.Id.ToString()
-                                })
-                            }
-                        }
-                    </abp-column>
-                    <abp-column size-lg="_6" size-md="_12">
-                        @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
-                        {
-                            if (Model.RatingsFeature?.IsEnabled == true)
-                            {
-                                @await Component.InvokeAsync(typeof(RatingViewComponent), new
-                                {
-                                    entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                                    entityId = Model.ViewModel.Id.ToString()
-                                })
-                            }
-                        }
-                    </abp-column>
-                </abp-row>
+                    </abp-row>
             </abp-card-body>
         </abp-card>
     </div>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
index 03ed4523e4..96e4520d9a 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
@@ -42,4 +42,22 @@ span.area-title {
     color: #aaa;
     text-decoration: none;
     padding-left: 18px;
+}
+
+.blockquote, blockquote{
+    display: block;
+    padding: 1em 1.5em;
+    border-radius: 8px;
+    background: rgba(58, 130, 246, 0.1);
+    font-size: 1.125rem;
+}
+
+code.hljs{
+    border-radius: 8px;
+    background: rgba(247, 37, 133, 0.1);
+}
+
+pre code.hljs{
+    background: rgba(0, 0, 0, 0.1);
+    padding: 1em 1.5em;
 }
\ No newline at end of file