Description
- Archive Block in Blog Post
- Show more >100 tags
Use this code to Blog Page Header Injection
<!-- @tuanphan - extend archive block -->
<script>document.addEventListener('DOMContentLoaded',function(){const currentUrl=window.location.href;const blogPath=currentUrl.split('?')[0].split('/').slice(0,-1).join('/');fetch(`${blogPath}?format=json-pretty`).then(response=>response.json()).then(blogData=>{const allTags=new Set();blogData.items.forEach(item=>{if(item.tags&&Array.isArray(item.tags)){item.tags.forEach(tag=>{if(tag&&tag.trim()){allTags.add(tag.trim())}})}});const sortedTags=Array.from(allTags).sort((a,b)=>a.localeCompare(b));const archiveBlock=document.querySelector('.archive-block-wrapper .archive-group-list');let existingTags=new Set();if(archiveBlock){const existingLinks=archiveBlock.querySelectorAll('.archive-group-name-link');existingLinks.forEach(link=>{const tagText=link.textContent.trim();existingTags.add(tagText)});const missingTags=sortedTags.filter(tag=>!existingTags.has(tag));if(missingTags.length>0){missingTags.forEach(tag=>{const urlSafeTag=encodeURIComponent(tag.replace(/\s+/g,'+'));const newTagElement=document.createElement('li');newTagElement.className='archive-group';newTagElement.innerHTML=`<a href="${blogPath}/tag/${urlSafeTag}" class="archive-group-name-link">${tag}</a>`;archiveBlock.appendChild(newTagElement)});const updatedLinks=archiveBlock.querySelectorAll('.archive-group-name-link');const sortedLinks=Array.from(updatedLinks).sort((a,b)=>{return a.textContent.trim().localeCompare(b.textContent.trim())});archiveBlock.innerHTML='';sortedLinks.forEach(link=>{const li=document.createElement('li');li.className='archive-group';li.appendChild(link);archiveBlock.appendChild(li)})}}}).catch(error=>{console.error('Error fetching blog data:',error)})});</script>
Note: it will take 2-3 seconds to load code