update post comments to api

_includes/comments-counter.html

@@ -4,6 +4,28 @@
     }
 </style>
 
-<i class="fa fa-comment" aria-hidden="true" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.comments}}"
+<i class="fa fa-comment" aria-hidden="true" {% if include.tooltip %}
-    data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
+    title="{{site.data.locales[include.lang].post.comments}}" data-bs-toggle="tooltip" data-bs-placement="bottom" {%
+    endif %}></i>
 <span class="remark42__counter"></span>
+
+<script>
+    function commentTextChange() {
+        var target = document.querySelector('.remark42__counter');
+        if(!target){
+            window.setTimeout(commentTextChange, 500);
+            return;
+        }
+        var observer = new MutationObserver(function (mutations) {
+            const comments = document.querySelector(".remark42__counter");
+            var commentsCount = 0;
+            if(Number(comments.innerText) !== NaN){
+                commentsCount = Number(comments.innerText);
+            }
+            ajax(serviceUrl + "/UpdatePostCommentsCount?blogUrl=" + siteId + "&postSlug=" + postId, "POST", commentsCount);
+        });
+        var config = { childList: true };
+        observer.observe(target, config);
+    }
+    commentTextChange();
+</script>

_includes/likes-views.html

@@ -24,7 +24,6 @@
 
 {% include views.html tooltip=true onload=false lang=lang %}
 {% include likes.html tooltip=true onload=false lang=lang %}
-{% include comments-counter.html tooltip=true lang=lang %}
 
 <script>
     const views = document.getElementById("views-count");

_layouts/post.html

@@ -36,7 +36,7 @@ tail_includes:
         <!-- post counter -->
         <div id="likes-views">
           {% include likes-views.html tooltip=true lang=lang %}
-          <!-- {% include comments-counter.html tooltip=true lang=lang %} -->
+          {% include comments-counter.html tooltip=true lang=lang %}
         </div>
 
       </div>