目前,大家的博客左侧通常加上一个漂亮的 多彩标记 ,也想给自己的小站加一下这个小功能。
可惜已经再不再是使用 WordPress 的时候那么方便了,使用 WordPress 的朋友们直接使用现成的插件,鼠标点点就可以加上这个炫彩的功能。小站程序是自个写的,要加这么一个功能还是得自己动手,就当学习吧!
首先,我分析了一下目前 多彩标签 的主要表现形式,主要有两点: 颜色多样 , 大小不一 。这个是多彩标签的特性,于是想到了 PHP 中的 随机函数rand 。直接给大小,颜色用 rand 随机取值就可以。
大小的随机值容易搞定,直接生成后连接单位即可
<?php // 随机大小实例 $m = rand(20,30); echo '<span style="font-size:'.$m.'px">随机大小</span>'; ?>生成 颜色值 稍微麻烦一些,因为 颜色值 是 十六进制 字符表现形式,而随机函数rand不能直接生成 0 到 F 这么用,最后直接用数组保存十六进制字符,然后随机生成鼠标下标这样也可以实现随机颜色
<?php // 随机颜色函数 // 直接返回随机生成的色值 function getColor(){ // 先用数组把十六进制字符保存在一个数组中 $arr = array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'); // 因为颜色色值长度是6位,所以循环6次 for($i=0;$i<6;$i++){ // 随机生成0到15数字,然后当作数组下标取值即可 $color .= $arr[rand(0,15)]; } // 返回的时候,把#号加上 return ‘#’.$color; } ?>随机大小 , 随机颜色 搞定后剩下的都不是问题的问题了。直接取出所有标签然后 去重 ,然后遍历数组生成HTML文本即可。
最后提点建议,毕竟 PHP 是服务器端,每次都 rand 会让服务器鸭梨不小(那些特牛的机器可以忽略不计,毕竟目前用 VPS 的还是众多)。我们可以在博客的标签在发生变动的时候再生成即可,比如删除,修改,增加文章产生新的标签时候我们再去生成 多彩标签 的HTML文本。最后这些生成的多彩签HTML没必要存进 数据库 ,直接保存在在一个 文件 里,然后 include 即可。
目前,我的小站就是这么实现的。有空,我再介绍 JavaScript 实现多彩标签,原理也差不多一样,只不过是 JavaScript 是 客户端行为 ,不用担心服务器端的鸭梨,而且JavaScript 交互性 比较好,可以制作出具有动画效果的 云标签 。