［Web2.0］web2.0中的tag及其技术实现

《[原创]Web2.0之Tag标签原理实现浅析》http://www.cnblogs.com/randy0528/archive/2007/10/17/927666.html

web1.0做网站

比如一个新闻网站 我们用一个新闻系统

主要的实体是article 那么表设计一般是这样

id title c_id content pubtime author hit

自动编号 文章标题 所属类别编号 内容 发布时间 作者 点击率

然后又一个实体 文章类别

id classname

自动编号 类别名称

具体的做法是网站的编辑上传一篇文章 同时选择一个分类 比如体育

这样整个网站的前台，体育栏目中就多了这条新闻

分类与文章之间的关系是一对多 就是一个类别有很多篇文章 一篇文章属于一个类别

web2.0时期

出现了一个概念叫做标签，正宗是叫tag

简单的做法：

tag表

id tagname num

tag-article表

id article_id tag_id

这样的tag-article表是tag和article的多对多关系

一般仍然是编辑人员 在添加文章的时候手动添加tag，或者从tag库中选取，或者程序从文章标题、内容中检索出tag库有的tag

那么从UGC的角度去看 这还是1.0的做法

改进的做法：

tag表

id tagname num user_id

tag-article表不变

这样在article的展示页面，有一个登录用户的添加标签入口

就是说随便一个网站的注册用户都可以对任何一篇article加tag

再谈谈tag cloud

这是web2.0中实现不同量级tag不同css的术语

具体算法如下：

@toptags = Tag.find_by_sql("select id,tagname,sum(num) as sumnum from tags group by tagname order by sum(num) desc

limit 0,60")

选取热门标签

@max=@toptags[0].sumnum.to_i

@min=@toptags[59].sumnum.to_i

@distribution = (@max-@min)/5

@toptags = @toptags.sort_by{|tag| tag.id }

重新将toptags按照id排序

这样才会看到正宗的web2.0热门标签

定义css：

<style>

.moltopiccolo { font-size: 12px; }

.piccolo{ font-size: 14px; }

.medio { font-size: 16px; }

.grande{ font-size: 20px; font-weight: bold;}

.enorme{ font-size: 25px; font-weight: bold; }

</style>

前台页面对每个tag处理：

<% for @tag in @toptags %>

<% if @tag.sumnum.to_i==@min %>

<% @css = "moltopiccolo" %>

<% elsif @tag.sumnum.to_i==@max %>

<% @css = "enorme" %>

<% elsif @tag.sumnum.to_i> @min + (@distribution * 2) %>

<% @css = "grande" %>

<% elsif @tag.sumnum.to_i> @min + @distribution %>

<% @css = "medio" %>

<% else @css = "piccolo" %>

<% end %>