创建Typecho彩云标签

这个彩云书签从bytecats™从提取出来的
把CSS添加到主题style.css，主题根目录下创建一个PHP即可

CSS

/*云标签*/
.tag{clear:both}
.tag-cloud{padding:10px 10px;margin-bottom: 160px;}
.tag-cloud a{
    display:inline-block;
    padding:2px 5px;
    background:#eaeaea;
    margin:0 5px 5px 0;
    border-radius:2px;
    color:#333;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -ms-transition:all .2s linear;
    transition:all .2s linear
}
.tag-cloud a:hover{
    color:#fff;
    background:#429e46;
    text-decoration:none;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.3),0 2px 3px 0 rgba(0,0,0,0.1)
}

例如将下面保存为page-tags.php,主题布局不同，看关键代码

<?php    
   /**  
    * 云标签
    * @package custom   
    */    
$this->need('header.php');?>   
<div class="col-mb-12 col-8" id="main">
    <div class="res-cons">
        <article class="post type-post">
            <!-- 以上视主题不同而不同，但可能会错位而已 -->
<!-- 关键代码开始 -->
<div class="tag-cloud">
    <?php if($this->slug=="tags"): ?>
    <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud')->to($tags); ?>
    <?php if($tags->have()): ?>
    <?php while ($tags->next()): ?>
    <a style="background:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,
    <?php echo(rand(0,255)); ?>);color:#fff" href="<?php $tags->permalink();?>">
    <?php $tags->name(); ?>(<?php $tags->count() ?>)</a>
    <?php endwhile; ?>
    <?php endif; ?>
    <?php else: ?>
    <?php $this->content(); ?>
    <?php endif; ?>
</div>
<!-- 关键代码结束 -->
<!-- 以下视主题不同而不同，一般不用改，不影响布局 -->
</article>
</div>
</div>    
<?php $this->need('sidebar.php'); ?>
<?php $this->need('footer.php'); ?>

效果请看 https://m69w.com/tags

标签：typecho