借鉴了小何博客的代码,自己试了下发现不对称就改了一个数值。每次刷新颜色都会改变,目前有8组颜色,具体效果看我的侧边栏。
引入自定义CSS
/*侧栏标签云*/
.flink-item{width:63px;height: 25px; margin:3px; background-color:#57b027; border-radius:2px; text-align: center;}
.flink-title a{ font-size:10px; color:#ffffff; margin:3px; }
.flink-title a:hover{ color:#cccccc; }
.bg-1{background-color:#b57dff!important}
.bg-2{background-color:#465efb!important}
.bg-3{background-color:#f9bb3c!important}
.bg-4{background-color:#f55555!important}
.bg-5{background-color:#f6969a!important}
.bg-6{background-color:#e92b6f!important}
.bg-7{background-color:#8c76f!important}
.bg-8{background-color:#3fa5ff!important}
通过函数调用标签
路径 /Cuteen/include/sidebar.php 合适位置加入下方代码
<!-- 标签云 -->
<section class="sidebar-comment-box card mt-4">
<div class="px-3 py-2 my-2 d-flex align-items-center border-bottom">
<svg t="1678186881052" class="icon icon-20 me-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13180" width="20" height="20"><path d="M511.744 514.7136m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#1296db" p-id="13181" data-spm-anchor-id="a313x.7781069.0.i20" class="selected"></path><path d="M405.0432 356.4544l154.9824-143.4624c24.9344-23.0912 65.3312-23.296 90.5728-0.4608l100.5056 91.0336c14.9504 13.5168 15.6672 35.584 1.6384 49.9712l-347.6992 2.9184zM293.376 356.1472l94.976-142.0288c16.7936-26.7264 52.3776-37.8368 83.2512-26.0096 23.2448 8.9088 45.0048 17.3056 44.3392 17.3056-1.4336 0-163.6352 150.016-163.6352 150.016l-58.9312 0.7168zM749.6192 402.176H280.1664c-44.9536 0-81.4592 36.4544-81.4592 81.4592v213.0944c0 44.9536 36.4544 81.4592 81.4592 81.4592h469.4528c44.9536 0 81.4592-36.4544 81.4592-81.4592V483.584c-0.0512-44.9536-36.5056-81.408-81.4592-81.408z m-430.7968 237.7216c-27.4944 0-49.7664-22.272-49.7664-49.7664s22.272-49.7664 49.7664-49.7664c27.4944 0 49.7664 22.272 49.7664 49.7664s-22.272 49.7664-49.7664 49.7664z" fill="#FFFFFF" p-id="13182"></path></svg>
<span>标签云</span> <span class="ios"></span> </div>
<div class="px-2 pb-3">
<ul class="flinks"><li></li><li></li><li></li><li></li></ul>
<?php $this->widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&limit=28')->to($tags); ?>
<?php while($tags->next()): ?>
<script>document.querySelectorAll('ul.flinks').forEach(function(e){let a=e;if(a){let ns=a.querySelectorAll("li");let str='<div style="display:inline-block;; float:left">';let bgid=0;const bgs=["bg-1","bg-2","bg-3","bg-4","bg-5","bg-6","bg-7","bg-8"];for(let i=0;i<ns.length;i+=4){str+=(`<div class="flink-item ${bgs[Math.floor(Math.random() * 8)]}"><div class="flink-title"><a href="<?php $tags->permalink(); ?>"><?php $tags->name(); ?></a></div></div>`)}str+=`</div>`;let n1=document.createElement("div");n1.innerHTML=str;a.parentNode.insertBefore(n1,a);a.style="display: none;"}else{console.log('No such id "flinks"')}});</script>
<?php endwhile; ?>
</div></section>
<!-- 标签云 -->