BIJIV

Typecho彩色标签云的使用方法
handsome主题适用 改动不大 修改的有3个文件 component/sidebar.php 新增CSS文件...
扫描右侧二维码阅读全文
20
2018/07

Typecho彩色标签云的使用方法

handsome主题适用 改动不大 修改的有3个文件

  1. component/sidebar.php
  2. 新增CSS文件
  3. component/header.php

用以下这段代码替换原有的标签

<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">   
            <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>            
            <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
            <?php if($tags->have()): ?>
                <?php while ($tags->next()): ?>
                <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,
                    <?php echo(rand(0,255)); ?>)">
                    <a  href="<?php $tags->permalink();?>">
                    <?php $tags->name(); ?></a>
                </span>
               <?php endwhile; ?>
        <?php endif; ?>
</section>

PS:实现方式主要是加一个span标签,让它的背景颜色采用RGB方式随机,从而达到不同颜色的标签效果

增加CSS文件

新增一个CSS文件 起什么名字都可以 看你心情~~
文件放置位置在/assets/css目录下
CDN 的小伙伴也可以同步上传
然后添加如下内容
以后如果是对主题做什么样式上的修改也可以直接写在此文件中:

#tag-clould-color {
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}

在头文件中引用该CSS文件

header.php中增加这行代码(表示在页面引用你新添加的CSS式文件)
filename.css为你自己的文件名
注意要加载在主题样式文件后(因为在html页面中是按顺序加载的,避免你以后写的样式不生效)

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">

可能需要清除一下浏览器缓存才有效果,就可以看到你的彩色标签云。

最后修改:2019 年 04 月 09 日 02 : 25 PM
如果觉得我的文章对你有用,请随意赞赏

2 条评论

  1. CCX

    版主,按照你的方法如果不成功的话,问题可能出在哪里呢?我也一样是handsome主题

  2. slsgan

    先来踩一踩,感觉你博客里面的东西肯定能帮到我这种,代码盲人的

发表评论