方法比较简单,加个js脚本就好了,至于加载哪里都无所谓了,就放在标签云的页面。
就加在标签的那个页面好了。
打开themes
extlayoutpage.swig
找到
{% if page.type === "tags" %}
将下面这段代码
<div class ="tag-cloud" > <!-- <div class ="tag-cloud-title" > {{ _p(counter.tag_cloud , site.tags.length) }} </div> --> <div class ="tag-cloud-tags" id="tags" > {{ tagcloud({min_font: 16 , max_font: 16 , amount: 300 , color: true , start_color: #fff , end_color: #fff }) }} </div> </div>
换成这段代码
<div class ="tag-cloud" > <!-- <div class ="tag-cloud-title" > {{ _p(counter.tag_cloud , site.tags.length) }} </div> --> <div class ="tag-cloud-tags" id="tags" > {{ tagcloud({min_font: 16 , max_font: 16 , amount: 300 , color: true , start_color: #fff , end_color: #fff }) }} </div> </div> <br> <script type="text/javascript" > var alltags=document.getElementById(tags ); var tags=alltags.getElementsByTagName(a ); for (var i = tags.length - 1 ; i >= 0 ; i--) { var r=Math.floor(Math.random()*75 +130 ); var g=Math.floor(Math.random()*75 +100 ); var b=Math.floor(Math.random()*75 +80 ); tags[i].style.background = "rgb(" +r+"," +g+"," +b+")" ; } </script> <style type="text/css" > div#posts.posts-expand .tag-cloud a{ background-color: #f5f7f1; border-radius: 6 px; padding-left: 10 px; padding-right: 10 px; margin-top: 18 px; } .tag-cloud a{ background-color: #f5f7f1; border-radius: 4 px; padding-right: 5 px; padding-left: 5 px; margin-right: 5 px; margin-left: 0 px; margin-top: 8 px; margin-bottom: 0 px; } .tag-cloud a:before{ content: "?" ; } .tag-cloud-tags{ text-align: left; counter-reset: tags; } </style>
然后就好啦!
可能需要清理缓存
hexo clean
hexo d -g
下面是展示
标签云放在主页
标签云页面