感觉在每个页面都把标签云显示出来会有点乱,但标签云的存在又有它自己的作用,于是想着将标签云单独在一个页面中罗列出来。
新建一个名为: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 -->
完成后,在后台创建独立页面,自定义模板选择刚刚新建的“标签云”模板,可以不用填入任何内容,直接发布便完成。
具体效果可以预览本站:https://www.5k5b.com/tags.html