首页 » 建站手册 » Typecho设置标签云的方法教程

Typecho设置标签云的方法教程

谷歌已收录,更新于2018年12月27日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

本教程讲述了Typecho如何设置标签云,包括彩色标签云,标签云字体根据文章数目大小自动调节,这些都靠几个函数实现。

函数

随机颜色代码

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

固定颜色代码

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

根据标签文章个数调整字体大小代码

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

整数字体大小

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

完整代码

    <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>

本站代码

    <?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=name&ignoreZeroCount=1&desc=0&limit=30')->to($tags); ?>
    <div class="widget-list widget-list-tag">
        <?php if($tags->have()): ?>
        <?php while ($tags->next()): ?>
           <span class="tag-one"><a style="color:#<?php echo substr(md5($tags->name.'rand'), 0, 6); ?>;" href="<?php $tags->permalink(); ?>" title="<?php $tags->count(); ?> 个话题"><?php $tags->name(); ?></a></span>
        <?php endwhile; ?>
        <?php else: ?>
           <span class="tag-one"><?php _e('没有任何标签'); ?></span>
        <?php endif; ?>
    </div>

参考

参考链接如下所示:http://luly.lamost.org/blog/typecho_tag_cloud.html

本站舍弃了上述教程中的<ul><li></li></ul>布局样式,改为采用<div><span></span></div>,完美的实现了样式自动适配主题,现在将教程发出来,感谢各位支持。关于采用本站提供的标签云方法设置前后,本站的改变如下。

修改前修改后
Typecho设置标签云的方法教程Typecho设置标签云的方法教程

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫