将标签渲染为云

Question

我有一个链接和标签的数据库。将其显示为标签云的最简单方法是什么？

Answer 1

你可以从this改编。

Answer 2

我建议使用无序列表(<ul>)，然后使用CSS类来定义不同标签的大小(例如，<li class="used_many_times">与<li class="used_few_times">)。I did just this，但它是一个事件列表，事件的显示大小取决于事件发生的时间。

下面是将为其生成的HTML代码的示例：

<ul> 
    <li class="in2days"><a href="/event/2009-09-07-12-step-study-groups" rel="#12-step-study-groups-1-details">12 Step Study Groups</a><div id="12-step-study-groups-1-details" class="details">Monday, Sep 7, 2009, 7:00pm</div></li> 
    <li class="in1day"><a href="/event/2009-09-06-all-access-tour-mesa-campus" rel="#all-access-tour-mesa-campus-2-details">All Access Tour-Mesa Campus</a><div id="all-access-tour-mesa-campus-2-details" class="details">Sunday, Sep 6, 2009, 9:45am</div></li> 
    <li class="in3days"><a href="/event/2009-09-08-back-to-basics" rel="#back-to-basics-3-details">Back to Basics</a><div id="back-to-basics-3-details" class="details">Tuesday, Sep 8, 2009, 6:00pm</div></li> 
    <li class="in1day"><a href="/event/2009-09-06-celebrate-recovery" rel="#celebrate-recovery-4-details">Celebrate Recovery</a><div id="celebrate-recovery-4-details" class="details">Sunday, Sep 6, 2009, 6:00pm</div></li> 
    <li class="today"><a href="/event/2009-09-05-childrens-weekend-services" rel="#childrens-weekend-services-5-details">Children's Weekend Services</a><div id="childrens-weekend-services-5-details" class="details">Saturday, Sep 5, 2009, 6:00pm</div></li> 
    <li class="in2months"><a href="/event/2009-10-23-destination-zero-2009" rel="#destination-zero-2009-7-details">Destination Zero 2009</a><div id="destination-zero-2009-7-details" class="details">Friday, Oct 23, 2009</div></li> 
    <li class="in3weeks"><a href="/event/2009-09-22-doorway-to-hope" rel="#doorway-to-hope-8-details">Doorway to H.O.P.E.</a><div id="doorway-to-hope-8-details" class="details">Tuesday, Sep 22, 2009, 7:00pm</div></li> 
    <li class="in1month"><a href="/event/2009-10-02-encounter-service" rel="#encounter-service-9-details">Encounter Service</a><div id="encounter-service-9-details" class="details">Friday, Oct 2, 2009, 7:00pm</div></li> 
    <li class="in3monthsplus"><a href="/event/2009-11-28-family-weekend" rel="#family-weekend-10-details">Family Weekend</a><div id="family-weekend-10-details" class="details">Saturday, Nov 28, 2009, 6:00pm</div></li> 
    <li class="in2weeks"><a href="/event/2009-09-15-first-call-singles--bible-study-resuming" rel="#first-call-singles--bible-study-resuming-11-details">First Call Singles -Bible Study resuming</a><div id="first-call-singles--bible-study-resuming-11-details" class="details">Tuesday, Sep 15, 2009, 7:00pm</div></li> 
    <li class="in1week"><a href="/event/2009-09-12-first-call-singles--movie-and-dinner" rel="#first-call-singles--movie-and-dinner-14-details">First Call Singles- Movie and Dinner</a><div id="first-call-singles--movie-and-dinner-14-details" class="details">Saturday, Sep 12, 2009, 3:00pm</div></li> 
    <li class="in4days"><a href="/event/2009-09-09-taking-marriage-to-the-next-level" rel="#taking-marriage-to-the-next-level-39-details">Taking Marriage to the Next Level</a><div id="taking-marriage-to-the-next-level-39-details" class="details">Wednesday, Sep 9, 2009, 7:00pm</div></li>
</ul>

下面是设置列表样式的CSS代码。不是我写的。

#content ul#cloud{
    width: 598px;
    margin: 0;
    padding: 0;
}

#content ul#cloud li{
    display:-moz-inline-box;
    display:inline-block;
    list-style: none;
    padding-left: 0;
    padding-right: 15px;
    font-size: 1.1em;
    background: none;
    line-height: 1.4;
}

*html #content ul#cloud li{
    display: inline;
}

*+html #content ul#cloud li{
    display: inline;
}

#content ul#cloud li a{
    color: #B0A073;
}

#content #cloud li.today a{
    font-size: 1.8em;
    color: #FCF9F2;
}

#content #cloud li.in1day a{
    font-size: 1.7em;
    color: #F4EEE5;
}

#content #cloud li.in2days a{
    font-size: 1.6em;
    color: #E3DCCA;
}

#content #cloud li.in3days a{
    font-size: 1.5em;
    color: #DDD5C0;
}

#content #cloud li.in4days a{
    color: #D7CEB5;
    font-size: 1.4em;
}

#content #cloud li.in1week a{
    color: #D0C6AB;
    font-size: 1.3em;
}

#content #cloud li.in2weeks a{
    color: #CABFA0;
    font-size: 1.2em;
}

#content #cloud li.in3weeks a{
    color: #C3B795;
    font-size: 1.1em;
}

#content #cloud li.in1month a{
    color: #BDB08A;
    font-size: 1em;
}

#content #cloud li.in2months a{
    font-size: .9em;
    color: #B7A87F;
}

#content #cloud li.in3monthsplus a{
    font-size: 1em;
    color: #B0A073;
}

至于ASP.net部分，我一点也不知道。

Answer 3

您可以尝试Tagul web服务。它允许你从你的数据源(xml，rss，html)创建漂亮的标签云，并将其嵌入到你的网页中。