演示

使用教程

感觉在每个页面都把标签云显示出来会有点乱，但标签云的存在又有它自己的作用，于是想着将标签云单独在一个页面中罗列出来。
新建一个名为：tags.php文件，填入以下代码后存放在模板目录下：

<?php
    /**
    * 标签云
    *
    * @package custom
    */
?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('component/header.php'); ?>

<!-- aside -->
<?php $this->need('component/aside.php'); ?>
<!-- / aside -->

<!-- <div id="content" class="app-content"> -->
<a class="off-screen-toggle hide"></a>
<main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>">
    <div class="hbox hbox-auto-xs hbox-auto-sm">
        <!--文章-->
        <div class="col center-part">
            <!--标题下的一排功能信息图标：作者/时间/浏览次数/评论数/分类-->
            <?php echo Content::exportPostPageHeader($this,$this->user->hasLogin(),true); ?>
            <div class="wrapper-md" id="post-panel">
                <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?>
                <!--博客文章样式 begin with .blog-post-->
                <div id="postpage" class="blog-post">
                    <article class="single-post panel">
                        <!--文章页面的头图-->
                        <?php echo Content::exportHeaderImg($this); ?>

                        <div class="wrapper-lg" id="post-content">
                            <!--标签云 调用代码-->
                            <div class="tt-tags">
                                <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=280')->to($tags); ?>
                                <!--limit：输出标签数目，若设置为0代表输出全部-->
                                <?php if($tags->have()): ?>
                                <?php while ($tags->next()): ?>
                                <span class="tt-badge"
                                    style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)"><a
                                        href="<?php $tags->permalink();?>" target="_blank">
                                        <?php $tags->name(); ?>
                                    </a></span>
                                <?php endwhile; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
        <!--文章右侧边栏开始-->
        <?php $this->need('component/sidebar.php'); ?>
        <!--文章右侧边栏结束-->
    </div>
</main>
<!--标签云的样式-->
<style>
    .tt-tags {
        line-height: 2.3em;
    }

    .tt-badge {
        padding: 5px 10px;
        margin-right: 5px;
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border-radius: 10px;
    }

    .tt-badge:hover {
        background-color: #666 !important;
    }
</style>
<!-- footer -->
<?php $this->need('component/footer.php'); ?>
<!-- / footer -->

完成后，在后台创建独立页面，自定义模板选择刚刚新建的“标签云”模板，可以不用填入任何内容，直接发布便完成。