refactor blog post.

modules/blogging/src/Volo.Blogging.Domain.Shared/Volo/Blogging/Localization/Resources/en.json

@@ -43,6 +43,7 @@
     "Description": "Description",
     "Blogs": "Blogs",
     "Tags": "Tags",
-    "ShareOn": "Share on"
+    "ShareOn": "Share on",
+    "TitleLengthWarning": "Keep your title size under 60 characters to be SEO friendly!"
   }
 }

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Edit.cshtml

@@ -26,9 +26,11 @@
                     <div class="card-body"> 
                         <form method="post" id="edit-post-form">
                             <abp-input asp-for="Post.Title" auto-focus="true" />
-                            <div class="alert alert-warning" id="WarningMessage-title" role="alert">
-                                Keep your title size under 60 characters to be SEO friendly!
-                            </div>
+                            
+                            <abp-alert dismissible="true" style="display: none" id="title-length-warning">
+                                @L["TitleLengthWarning"]
+                            </abp-alert>
+
                             <abp-input asp-for="Post.Url" />
                             <abp-input asp-for="Post.CoverImage" />
                             

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/New.cshtml

@@ -27,10 +27,11 @@
                         <form method="post" id="new-post-form">
                             <abp-input asp-for="Post.BlogId" />
                             <abp-input asp-for="Post.Title" auto-focus="true" />
-                            <div class="alert alert-warning" id="WarningMessage-title"  style="display: none"  role="alert">
-                                Keep your title size under 60 characters to be SEO friendly!
-                            </div>
                             
+                            <abp-alert dismissible="true" style="display: none" id="title-length-warning">
+                                @L["TitleLengthWarning"]
+                            </abp-alert>
+
                             <abp-input asp-for="Post.Url" />
                             <abp-input asp-for="Post.CoverImage" />
 

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/edit.js

@@ -5,6 +5,7 @@
     var $submitButton = $container.find("button[type=submit]");
     var $form = $container.find("form#edit-post-form");
     var editorDataKey = "tuiEditor";
+    var maxTitleLength = 60;
 
     var setCoverImage = function (file) {
         $('#Post_CoverImage').val(file.fileUrl);
@@ -30,10 +31,10 @@
     var checkTitleLength = function () {
         var title = $('#Post_Title').val();
 
-        if (title.length > 60) {
-            $("#WarningMessage-title").css("display", "block");
+        if (title.length > maxTitleLength) {
+            $("#title-length-warning").css("display", "block");
         } else {
-            $("#WarningMessage-title").css("display", "none");
+            $("#title-length-warning").css("display", "none");
         }
     };
 

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/new.js

@@ -5,6 +5,7 @@
     var $submitButton = $container.find("button[type=submit]");
     var $form = $container.find("form#new-post-form");
     var editorDataKey = "tuiEditor";
+    var maxTitleLength = 60;
 
     var setCoverImage = function (file) {
         $('#Post_CoverImage').val(file.fileUrl);
@@ -104,10 +105,10 @@
 
         var title = $('#Post_Title').val();
 
-        if (title.length > 60) {
-            $("#WarningMessage-title").css("display", "block");
+        if (title.length > maxTitleLength) {
+            $("#title-length-warning").css("display", "block");
         } else {
-            $("#WarningMessage-title").css("display", "none");
+            $("#title-length-warning").css("display", "none");
         }
 
         title = title.replace(' ', '-');