From b3e6fc56f7fd4f30476e3be2b1639e77ca8f456b Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 16 Jun 2020 15:55:22 +0800
Subject: [PATCH] Improved the generation rules of Categories ID.

Avoid invalidation of icon animations for closed and opened top categories when category names contain a dot.
---
 tabs/categories.md | 44 ++++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/tabs/categories.md b/tabs/categories.md
index b6c2382..fed6b98 100644
--- a/tabs/categories.md
+++ b/tabs/categories.md
@@ -11,6 +11,8 @@ title: Categories
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
+{% assign group_index = 0 %}
+
 {% assign sort_categories = site.categories | sort %}
 
 {% for category in sort_categories %}
@@ -36,47 +38,47 @@ title: Categories
   <div class="card categories">
     <!-- top-category -->
     <div class="card-header d-flex justify-content-between hide-border-bottom"
-        id="{{ HEAD_PREFIX }}{{ category_name }}">
+        id="{{ HEAD_PREFIX }}{{ group_index }}">
       <span>
-        {% if sub_categories_size > 0 %}
-          <i class="far fa-folder-open fa-fw"></i>
-        {% else %}
-          <i class="far fa-folder fa-fw"></i>
-        {% endif %}
-          <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
-              class="ml-1 mr-2">
-            {{ category_name }}
-          </a>
+      {% if sub_categories_size > 0 %}
+        <i class="far fa-folder-open fa-fw"></i>
+      {% else %}
+        <i class="far fa-folder fa-fw"></i>
+      {% endif %}
+        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
+          class="ml-1 mr-2">
+          {{ category_name }}
+        </a>
 
         <!-- content count -->
         {% assign top_posts_size = site.categories[category_name] | size %}
-          <span class="text-muted small font-weight-light">
+        <span class="text-muted small font-weight-light">
           {% if sub_categories_size > 0 %}
             {{ sub_categories_size }}
             {% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
           {% endif %}
             {{ top_posts_size }}
             post{% if top_posts_size > 1 %}s{% endif %}
-          </span>
+        </span>
       </span>
 
       <!-- arrow -->
       {% if sub_categories_size > 0%}
-        <a href="#{{ LIST_PREFIX }}{{ category_name }}" data-toggle="collapse" aria-expanded="true"
-            class="category-trigger hide-border-bottom">
-          <i class="fas fa-fw fa-angle-down"></i>
-        </a>
+      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" aria-expanded="true"
+          class="category-trigger hide-border-bottom">
+        <i class="fas fa-fw fa-angle-down"></i>
+      </a>
       {% else %}
-        <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
-          <i class="fas fa-fw fa-angle-right"></i>
-        </span>
+      <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+        <i class="fas fa-fw fa-angle-right"></i>
+      </span>
       {% endif %}
 
     </div> <!-- .card-header -->
 
     <!-- Sub-categories -->
     {% if sub_categories_size > 0 %}
-    <div id="{{ LIST_PREFIX }}{{ category_name }}" class="collapse show" aria-expanded="true">
+    <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
       <ul class="list-group">
         {% for sub_category in sub_categories %}
         <li class="list-group-item">
@@ -95,5 +97,7 @@ title: Categories
 
   </div> <!-- .card -->
 
+    {% assign group_index = group_index | plus: 1 %}
+
   {% endif %}
 {% endfor %}