🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

tag 随想 ...... tag cloud plugin

在网络信息爆炸的年代,分类已经不能满足需求了。目前标签(tag)正越来越多的被使用着。

每次为文章写标签的时候,自己总小心翼翼,左思右想,还带有那么点纠结。结果还是按照分类的思路进行着。

每每回顾时,总觉不妥。

就好像使用 google bookmarks,收藏的链接多了,tag 还是按照分类的思路进行,每个链接基本使用一个 tag ,最多使用两个。时间长了就都忘记自己把它分到哪里去了。

可能有时会觉得 tag 多了难以管理;一个东东打上那么多的 tag,那么属于每个 tag 的东东不就多了,找起来也不方便。

可是当我看了 SOSO实验室博客的 tag 后,我才突然醒悟 tag 与分类的区别,tag 之所以存在的意义。

 

同时也发现了自己在处理 tag cloud 代码上的错误:

1.  相信 js 对中文排序的支持

2.  没有根据 tag 数目对所属于的区间进行划分

 

HTML 结构如下

                        <ul>
<li> <a href="/tags/%E8%B0%B7%E6%AD%8C" title="谷歌"> <span>谷歌</span> (<b>52</b>) </a> </li> </ul>

 

现修正如下

         id = id || "tags";
    // 根据引用次数添加样式,产生云效果
    var classes = ["tags1", "tags2", "tags3", "tags4", "tags5"],
    bList = $("#" + id + " b").get();
    var max = parseInt($("#" + id + " b").last().text());
    var distance = Math.ceil(max / classes.length);

    for (var i = 0; i &lt; bList.length; i++) {
        var num = parseInt(bList[i].innerHTML);
        // 算出当前 tag 数目所在的区间,加上 class
        for (var j = 0; j &lt; classes.length; j++) {
            if (num &gt; j * distance &amp;&amp; num &lt;= (j + 1) * distance) {
                bList[i].parentNode.className = classes[j];
                break;
            }
        }
    }
    
    // 按字母或者中文拼音进行排序
    $("#" + id).html($("#" + id + " li").get().sort(function(a, b) {
        var valA = $(a).find("span").text().toLowerCase();
        var valB = $(b).find("span").text().toLowerCase();
        // 对中英文排序的处理
        return valA.localeCompare(valB);
    }));</pre>

 

突然好空白,看来还需要点颜色。决定参考下蝴蝶的颜色搭配表

以前其实有想过用现成的,但貌似都不太理想。期待您更好的 tag cloud 插件分享。


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步