將標記渲染爲雲

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網絡服務。它允許您從數據源（xml，rss，html）創建漂亮的標籤雲並將其嵌入到您的網頁中。