May 25
Typecho彩色标签云的实现
这篇文章主要是typecho下的彩色标签云实现方式
handsome主题适用 改动不大 修改的有3个文件
- component/sidebar.php
- 新增CSS文件
- 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>
这里简单解释一下:
实现方式主要是加一个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">
然后就可以愉快的看到你的彩色标签云辣~
个别用户可能需要清除一下浏览器缓存才有效果
作者:https://ixiyu.me/index.php/archives/267/
:D 少女祈祷中...