typecho制作彩色标签云
康露依
2022-08-23 11:23
/
0
/
1
/
0
/
KR4
> 标签云（TagCloud）是用以表示一个网站中的内容标签。标签的排列顺序一般依照字典排序，按照热门程度确定字体的大小和颜色。这样，依照字典或者热门程度来寻找信息便成为可能。标签通常是超链接，指向分类页面。[^1]
Joe主题的标签云默认的是在电脑端的侧边栏里的  而且作为3D动态标签云，想要准确的点击并进入一个标签是比较困难的（特别是标签比较多的时候）。所以呢，康露依便想着再制作一个简易的标签云来供移动端的朋友们点击～
#实现方法
1．在你的主题文件夹里新建“tag.php”。
2．复制你主题文件夹里的“page.php”文件里的所有内容，并粘贴到“tag.php”。
3．在“tag.php”里找到合适的位置粘贴以下内容：[^2] [^3]
```php
<?php Typecho_Widget::widget(\'Widget_Metas_Tag_Cloud\',\'ignoreZeroCount=1&limit=150\')->to($tags); ?>
<?php if($tags->have()): ?>
<?php while ($tags->next()): ?>
<span id=\"tag-clould-color\" style=\"background-color:rgb(<?php echo(rand(155,255)); ?>,<?php echo(rand(155,255)); ?>,<?php echo(rand(155,255)); ?>)\">
<a >permalink();?>\" title=\"共<?php $tags->count(); ?>篇相关文章\"><?php $tags->name(); ?>(<?php $tags->count(); ?>)</a>
</span>
<?php endwhile; ?>
<?php else: ?>
<li><?php _e(\'没有任何标签\'); ?></li>
<?php endif; ?>
<style>
#tag-clould-color {
padding: 5px 10px 5px 10px;
border-radius: 20px;
margin: 6px 3px 3px 0;
display: inline-block;
}
</style>
```
4．在“tag.php”最前边添加以下内容：
```php
<?php
/**
* 标签云
*
* @package custom
*/
?>
```
5．执行“后台>管理>独立页面>新增”新建独立页，在“编辑页面”右侧（移动端是下方）的“自定义模板”里，选择“标签云”
#效果演示
#参数说明
- sort：排序方式为 mid；
- ignoreZeroCount：忽略文章数为 0 的；
- desc：是否降序输出；
- limit：输出数目。
#其他的修改
Joe主题可以直接添加到“统计页”
##实现方法
在主题文件夹（一般是“Joe-master”）找到“census.php”文件，将以下代码添加到“第127行”
{tabs}
{tabs-pane label=\"添加内容\"}
```php
<br>
<div class=\"joe_census__filing\">
<div class=\"title\">标签云</div>
<div class=\"content\">
<?php Typecho_Widget::widget(\'Widget_Metas_Tag_Cloud\',\'ignoreZeroCount=1&limit=150\')->to($tags); ?>
<?php if($tags->have()): ?>
<?php while ($tags->next()): ?>
<span id=\"tag-clould-color\" style=\"background-color:rgb(<?php echo(rand(155,255)); ?>,<?php echo(rand(155,255)); ?>,<?php echo(rand(155,255)); ?>)\">
<a >permalink();?>\" title=\"共<?php $tags->count(); ?>篇相关文章\"><?php $tags->name(); ?>(<?php $tags->count(); ?>)</a>
</span>
<?php endwhile; ?>
<?php else: ?>
<li><?php _e(\'没有任何标签\'); ?></li>
<?php endif; ?>
<style>
#tag-clould-color {
padding: 5px 10px 5px 10px;
border-radius: 20px;
margin: 6px 3px 3px 0;
display: inline-block;
}
</style>
</div>
</div>
</div>
```
{/tabs-pane}
{tabs-pane label=\"添加位置\"}
{/tabs-pane}
{tabs-pane label=\"最终效果\"}
{/tabs-pane}
{/tabs}
!---
参考资料：
[^1]: [标签云_搜狗百科](https://baike.sogou.com/m/v10656440.html) [color=#ccc]［引用时间：2022-08-23］[/color]
[^2]: [typecho标签云页面创建教程 - 银狐笔记](https://www.ityinhu.com/37.html) [color=#ccc]［引用时间：2022-08-23］[/color]
[^3]: [输出标签云 - Typecho Docs](http://docs.typecho.org/themes/tag-cloud) [color=#ccc]［引用时间：2022-08-23］[/color]
0
温馨提示：
本文最后更新于 2022-08-23 ，若内容或图片失效，请留言反馈。
萌ICP备
