From ae95ed6a82b5ea85705f490223a9b13cf605dc21 Mon Sep 17 00:00:00 2001
From: Meekdai <meekdai@163.com>
Date: Sun, 7 Apr 2024 10:39:06 +0800
Subject: [PATCH] =?UTF-8?q?Tag=E9=A1=B5=E9=9D=A2=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=96=87=E7=AB=A0=E6=95=B0=E9=87=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=94=E4=BB=A5=E5=A4=9A=E5=88=B0=E5=B0=91=E6=8E=92?=
 =?UTF-8?q?=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/tag.html | 69 +++++++++++++++++++++++-----------------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/templates/tag.html b/templates/tag.html
index 48d4db6..38efe0a 100644
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -53,7 +53,7 @@
 {% endblock %}
 
 {% block content %}
-<div id="tagLable" style="margin-bottom: 16px;"></div>
+<div id="taglabel" style="margin-bottom: 16px;"></div>
 <nav class="SideNav"></nav>
 <div class="notFind" style="display:none;font-size:24px;margin:8px;">Not Find</div>
 {% endblock %}
@@ -64,6 +64,7 @@ document.getElementById("pathHome").setAttribute("d",IconList["home"]);
 document.getElementById("searchSVG").setAttribute("d",IconList["search"]);
 
 tagList=[];
+labelsCount={};
 jsonData='';
 let requestJson="postList.json"
 let request=new XMLHttpRequest();
@@ -73,41 +74,41 @@ request.send();
 request.onload=function(){
     jsonData=JSON.parse(request.response);
     console.log(jsonData);
-    showList();
+    showList(labelsCount);
     setClassDisplay(decodeURI(window.location.hash.slice(1)));
 }
 
-function showList(){
+function showList(labelsCount){
     let SideNav=document.getElementsByClassName("SideNav")[0];
-    SideNav.setAttribute("class","SideNav border");
-    let tagLable=document.getElementById("tagLable");
+    SideNav.classList.add("border");
+    let taglabel=document.getElementById("taglabel");
 
-    if(tagList.length==0){
-        let showLabels=document.createElement("button");
-        showLabels.setAttribute("class","Label");
-        showLabels.setAttribute("style","background-color:#000");
-        showLabels.innerHTML="All";
-        showLabels.setAttribute("onclick","javascript:updateShowTag('All');");
-        tagLable.appendChild(showLabels);
-    }
-
-    let labelsSet = new Set();
-    for(let key in jsonData) {
+    jsonData['labelColorDict']["All"]="#000";
+    labelsCount["All"]=0;
+    for (let key in jsonData) {
         if (key !== 'labelColorDict' && Array.isArray(jsonData[key]['labels'])) {
+            labelsCount["All"]++;
             for (let label of jsonData[key]['labels']) {
-                labelsSet.add(label);
+                labelsCount[label] = (labelsCount[label] || 0) + 1;
             }
         }
     }
-    let labelsList = Array.from(labelsSet);
-    for(label of labelsList){
+
+    let sortedLabelsList = Object.keys(labelsCount).sort((a, b) => labelsCount[b] - labelsCount[a]);
+    for (let label of sortedLabelsList) {
         tagList.push(label);
-        let showLabels=document.createElement("button");
-        showLabels.setAttribute("class","Label");
-        showLabels.setAttribute("style","background-color:"+jsonData['labelColorDict'][label]);
-        showLabels.innerHTML=label;
-        showLabels.setAttribute("onclick","javascript:updateShowTag('"+label+"');");
-        tagLable.appendChild(showLabels);
+        let showLabels = document.createElement("button");
+        showLabels.setAttribute("class", "Label");
+        showLabels.setAttribute("style", "background-color:" + jsonData['labelColorDict'][label]+";padding:4px;");
+        showLabels.innerHTML="&nbsp;&nbsp;"+label+" ";
+        showLabels.setAttribute("onclick", "javascript:updateShowTag('" + label + "');");
+
+        let LabelNum=document.createElement("span");
+        LabelNum.setAttribute("class","Counter");
+        LabelNum.setAttribute("style","color:#fff;background-color:rgba(234, 238, 242, 0.5)");
+        LabelNum.innerHTML=labelsCount[label];
+        showLabels.appendChild(LabelNum);
+        taglabel.appendChild(showLabels);
     }
 
     for(i in jsonData){
@@ -166,29 +167,29 @@ function updateShowTag(label){
     }
 }
 
-function setClassDisplay(lable){
+function setClassDisplay(label){
     let lists = document.getElementsByClassName("lists");
     let tagTitle = document.getElementsByClassName("tagTitle")[0];
-    tagTitle.innerHTML="Tag #"+lable;
-    document.title=lable+" - {{ blogBase['title'] }}";
+    tagTitle.innerHTML="Tag #"+label;
+    document.title=label+" - {{ blogBase['title'] }}";
     document.getElementsByClassName("subnav-search-input")[0].value='';
-    if(lable=="All"){
+    if(label=="All"){
         for(let i = 0; i < lists.length; i++){lists[i].style.display='block';}
         document.getElementsByClassName("notFind")[0].style.display='none';
     }
-    else if(tagList.indexOf(lable)!=-1){
+    else if(tagList.indexOf(label)!=-1){
         for(let i = 0; i < lists.length; i++){
             lists[i].style.display='none';
         }
 
-        let lables = document.getElementsByClassName(lable);
-        for(let i = 0; i < lables.length; i++){
-            lables[i].style.display='block';
+        let labels = document.getElementsByClassName(label);
+        for(let i = 0; i < labels.length; i++){
+            labels[i].style.display='block';
         }
         document.getElementsByClassName("notFind")[0].style.display='none';
     }
     else{
-        document.getElementsByClassName("subnav-search-input")[0].value=lable;
+        document.getElementsByClassName("subnav-search-input")[0].value=label;
         searchShow();
     }
 }