Typecho 彩色标签云按数量显示不同字体大小

11/07/201812:30:44
评论
259

Typecho提供了一个标签云示例,但真心太难看啦,网络上搜索了一圈,差不多都是引用的那几行代码。让我们 DIY 一个,只需会一点儿 PHP 和 css 就能做得很漂亮,实现自动调节大小的彩色标签。TypechoTips之前有给大家分享过一篇类似实现彩色标签云的方法,见:Typecho 代码实现侧边栏添加彩色云标签,不过今天分享的这个更加完善。

载入标签对象

Typecho给我们留一个很好用的接口:

<?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=name&ignoreZeroCount=1&desc=0&limit=30')->to($tags); ?>

参数说明

sort:排序方式,可以选 mid,name,count;

ignoreZeroCount:是否忽略文章数为 0 的;

desc:是否降序输出;

limit:输出数目。

这其实是构造了一个标签对象链表。之后我们就可以开心地使用tags对象了,通过next()方法,可以遍历所有标签。具体参见后面的完整代码。

随机颜色

通过设置标签链接的style来改变颜色

color:#<?php echo substr(md5(rand()), 0, 6); ?>

固定颜色

如果你希望每次打开博客,标签云的颜色是固定的,试试

color:#<?php echo substr(md5($tags->name), 0, 6); ?>

对标签名做哈希来生成颜色,这样同一标签的颜色就是给定的了。如果你觉得生成的颜色不好看,试试改成md5($tags->name.'abc'),这里abc可以是任意字符。

字体大小

想根据文章数量调整标签文字大小,让内容多的标签显示得更大?没问题。

font-size:<?php echo log($tags->count)*50+100; ?>%;

或者这样更好,把字体大小输出为整数:

font-size:<?php printf("%u%%", log($tags->count)*50+100); ?>

如果某标签下条目数特别多,50应该改成一个较小的数。你可以先试试 100/log(N) 是否合适,再稍做调整。

完整代码

<style>.widget-list-tag li{display:inline-block;list-style:none;font-family:monospace;margin:1px;padding:1px;}</style>
<?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=name&ignoreZeroCount=1&desc=0&limit=30')->to($tags); ?>
<ul class="widget-list widget-list-tag">
<?php if($tags->have()): ?>
    <?php while ($tags->next()): ?>
    <li><a style="font-size:<?php printf("%u%%", log($tags->count)*50+100); ?>; color:#<?php echo substr(md5($tags->name.'rand'), 0, 6); ?>;" href="<?php $tags->permalink(); ?>" title="<?php $tags->count(); ?> 个话题"><?php $tags->name(); ?></a></li>
    <?php endwhile; ?>
<?php else: ?>
    <li><?php _e('没有任何标签'); ?></li>
<?php endif; ?>
</ul>

Typecho设置文章密码保护 开发日志

Typecho设置文章密码保护

在别人博客看到了一个需要输入密码才能访问文章的功能,像下图一样:typecho也是有这个功能,不需要插件就可以实现。在编辑文章时,右边高级选项,公开度里有个密码保护可以选择:加密效果如下:不过这样的界...
Typecho程序伪静态规则大全 开发日志

Typecho程序伪静态规则大全

Typecho程序的伪静态规则不同于wp直接默认可用,需要我们手工加载到空间中才可以生效。这里TypechoTips整理了一些不同的主机环境中的伪静态规则,希望对大家有所帮助!1、Linux Apac...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: