MoeJue/Gmeek
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tag页面标签显示文章数量，并且以多到少排列

Browse Source
This commit is contained in:
Meekdai 2024-04-07 10:39:06 +08:00
parent a32a663320
commit ae95ed6a82
1 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
templates/tag.html
View File

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