diff --git a/templates/categories.html b/templates/categories.html
index 37a9db8..eb62a4e 100644
--- a/templates/categories.html
+++ b/templates/categories.html
@@ -21,7 +21,7 @@
     <li th:each="category : ${categories}">
       <a class="level is-marginless" th:href="${category.status.permalink}">
         <span class="level-item" th:text="${category.spec.displayName}"></span>
-        <span class="level-item tag" th:text="${category.status.postCount}"></span>
+        <span class="level-item tag" th:text="${category.status.postCount == null ? 0 : category.status.postCount}"></span>
       </a>
       <ul th:if="${!#lists.isEmpty(category.children)}">
         <th:block th:replace="~{:: categories (${category.children})}"/>
diff --git a/templates/tags.html b/templates/tags.html
index d58f5a7..98060a9 100644
--- a/templates/tags.html
+++ b/templates/tags.html
@@ -16,7 +16,7 @@
           <a th:each="tag : ${tags}" class="tags" th:href="${tag.status.permalink}">
           <span class="tag" th:text="${tag.spec.displayName}"
                 th:style="${(enableTagsColor && tag.spec.color != '#ffffff')? 'color: ' + tag.spec.color +'; background: ' + tag.spec.color +'20' : ''}"></span>
-            <span class="tag is-grey" th:text="${tag.postCount}"
+            <span class="tag is-grey" th:text="${tag.postCount == null ? 0 : tag.postCount}"
                   th:style="${(enableTagsColor && tag.spec.color != '#ffffff')? 'background: ' + tag.spec.color +'CC' : ''}"></span>
           </a>
         </div>
diff --git a/templates/widget/categories.html b/templates/widget/categories.html
index e714e29..1dfa771 100644
--- a/templates/widget/categories.html
+++ b/templates/widget/categories.html
@@ -1,28 +1,47 @@
 <div xmlns:th="https://www.thymeleaf.org"
      th:fragment="widget (sidebar)"
      th:class="'card widget ' + ${sidebar.hide}"
-     th:with="num = ${#strings.isEmpty(theme.config.sidebar.categories_num)? 10 : T(java.lang.Integer).parseInt(theme.config.sidebar.categories_num)},
-     categories = ${categoryFinder.listAsTree()},
+     th:with="categories = ${categoryFinder.list(1,1)},
      isEmpty = ${#lists.isEmpty(categories)}">
     <div class="card-title">
-        <i th:class="${#strings.defaultString(sidebar.icon, 'ri-apps-line') + ' card-title-label'}"></i><span th:text="${#strings.defaultString(sidebar.title, '分类')}"></span>
+        <i th:class="${#strings.defaultString(sidebar.icon, 'ri-apps-line') + ' card-title-label'}"></i><span
+            th:text="${#strings.defaultString(sidebar.title, '分类')}"></span>
         <a th:if="${theme.config.sidebar.categories_more}" class="card-more" th:href="@{/categories}">更多<i
                 class="ri-arrow-right-double-line"></i></a>
     </div>
     <div th:if="${isEmpty}" class="card-empty">暂无分类</div>
     <div th:unless="${isEmpty}" class="card-content">
-        <ul class="menu-list">
-            <th:block th:fragment="categories (categories)">
-                <li th:each="category,itemIndex : ${categories}" th:unless="${itemIndex.index >= num}">
-                    <a class="level is-marginless" th:href="${category.status.permalink}">
-                        <span class="level-item" th:text="${category.spec.displayName}"></span>
-                        <span class="level-item tag" th:text="${category.status.postCount}"></span>
-                    </a>
-                    <ul th:if="${!#lists.isEmpty(category.children)}">
-                        <th:block th:replace="~{:: categories (${category.children})}"/>
-                    </ul>
-                </li>
-            </th:block>
+        <ul class="menu-list" id="categories-menu-list">
         </ul>
     </div>
+
+    <script th:inline="javascript">
+      let categories = [[${categoryFinder.listAsTree()}]]
+      let limitCount = [[${#strings.isEmpty(theme.config.sidebar.categories_num)? 10 : T(java.lang.Integer).parseInt(theme.config.sidebar.categories_num)}]]
+      let count = 0
+
+      function showCategories(categories) {
+        let con = ''
+        for (let category of categories) {
+          count++
+          if (count > limitCount) {
+            return con
+          }
+          con += '          <li>\n' +
+            '            <a class="level is-marginless" href="' + category.status.permalink + '">\n' +
+            '              <span class="level-item">'+category.spec.displayName+'</span>\n' +
+            '              <span class="level-item tag">'+(category.status.postCount === null ? 0 : category.status.postCount)+'</span>\n' +
+            '            </a>\n'
+
+          if (category.children.length > 0) {
+            con += '          <ul>\n'
+            con += showCategories(category.children)
+            con += '          </ul>\n'
+          }
+          con += '          </li> \n'
+        }
+        return con
+      }
+      $('#categories-menu-list').html(showCategories(categories));
+    </script>
 </div>