将多个链接显示为云

Question

我的客户希望我创建一个页面，并将一些外部链接显示为云。他希望能够添加外部链接并编辑字体大小和颜色。

此云必须位于页面的中心，并从中心开始增长。我认为用Wordpress创作会很容易，但事实上并非如此。我同意使用任何CMS，但无法找到任何现成的解决方案。发现这个：http://www.goat1000.com/tagcanvas-weighted.php。它与我想要的类似，但它没有CMS后端。

对不起，我很抱歉，但也许有人会明白我想要什么，并帮助我在哪里可以找到它。

也许这不难从头开始创建？并将所有链接存储在文本或html文件中。我真的做了我的功课，但只为世界上所有的CMS引擎找到了很多标签云插件。

UPD。 我找到了现成的解决方案！但它并不完美。例如，我不明白为什么改变颜色不起作用。那就是：

<? 

     $array = array (
    0 => array ('link' => 'http://123.com', 'name' => 'qq', 'cnt' => 100) 
    , 1 => array ('link' => 'http://123.com', 'name' => 'ww', 'cnt' => 2) 
    , 2 => array ('link' => 'http://123.com', 'name' => 'ee', 'cnt' => 3) 
    , 3 => array ('link' => 'http://123.com', 'name' => 'rr', 'cnt' => 61) 
    , 4 => array ('link' => 'http://123.com', 'name' => 'tt', 'cnt' => 5) 
    , 5 => array ('link' => 'http://123.com', 'name' => 'yy', 'cnt' => 60) 
    , 6 => array ('link' => 'http://123.com', 'name' => 'uu', 'cnt' => 7) 
    , 7 => array ('link' => 'http://123.com', 'name' => 'ii', 'cnt' => 8) 
    , 8 => array ('link' => 'http://123.com', 'name' => 'iii', 'cnt' => 9) 
    , 9 => array ('link' => 'http://123.com', 'name' => 'oo', 'cnt' => 10) 
    , 10 => array ('link' => 'http://123.com', 'name' => 'pp', 'cnt' => 11) 
    , 11 => array ('link' => 'http://123.com', 'name' => 'aa', 'cnt' => 12) 
    , 12 => array ('link' => 'http://123.com', 'name' => 'ss', 'cnt' => 10) 
    , 13 => array ('link' => 'http://123.com', 'name' => 'dd', 'cnt' => 11) 
    , 14 => array ('link' => 'http://123.com', 'name' => 'ff', 'cnt' => 12) 
    , 15 => array ('link' => 'http://123.com', 'name' => 'gg', 'cnt' => 10) 
); 

    echo '<div style="font-family:arial; font-size: 10px; width: 300px; text-align: center; position: absolute; 
    top: 100px; left: 50%; margin-left: -150px;">'; 
    $params['min_size'] = 100;      
    $params['max_size'] = 1000;      
    $params['colors'] = array(0 => 'red', 1 => 'blue', 2 => 'brown', 3 => 'pink', 4 => 'green'); 
    ntts_cloud_ShowCloud($array, $params); 
    echo '</div>'; 


function ntts_cloud_FlipArray($array) 
    { 
     $rows = array_keys($array); 
     $first_row_key = $rows[0]; 
     $cols = array_keys($array[$first_row_key]); 

     $rows_cnt = count($rows); 
     $cols_cnt = count($cols); 

     for($i = 0; $i < $rows_cnt; $i++) 
     { 
     for($j = 0; $j < $cols_cnt; $j++) 
     { 
      $result[$cols[$j]][$rows[$i]] = $array[$rows[$i]][$cols[$j]]; 
     } 
     } 
     return $result;  
    } 


function ntts_cloud_ShowCloud($entries, $config = 0) 
    { 
     //$entries is array of cloud elements 
     //each element should be present as associative array with follows keys 
     //'name' - name of the element 
     //'link' - URL 
     //'cnt' - weight of the element 


     $colors = array(
     0 => '73cf3b', 
     1 => '000', 
     2 => '000', 
     3 => '000', 
     4 => '000', 
     5 => 'red', 
     6 => '000', 
     7 => '000', 
     8 => '000', 
     9 => '000', 
     10 => '000', 
     11 => '000', 
     12 => '000', 
     13 => '000', 
     14 => '000', 
     15 => '000');     
     //font size in percent 
     $min_size = (isset($config['min_size'])) ? $config['min_size'] : 100; 
     $max_size = (isset($config['max_size'])) ? $config['max_size'] : 200; 

     if(is_array($config)) 
     { 
     if(isset($config['colors']) && is_array($config['colors'])) 
     { 
      $colors = $config['colors']; 
     } 
     } 


     $flipped = ntts_cloud_FlipArray($entries); 
     $min  = min($flipped['cnt']); 
     $max  = max($flipped['cnt']); 
     array_multisort($flipped['cnt'], SORT_DESC, $flipped['name'], $flipped['link']); 
     $entries = ntts_cloud_FlipArray($flipped); 

     $shown_entries = array(); 
     $keys   = array(); 
     $cnt = count($entries); 

     $limit = (isset($config['limit'])) ? min($config['limit'], $cnt) : $cnt; 

     for($i = 0; $i < $limit; $i++) 
     { 
     $entries[$i]['cnt'] -= $min; 
     if($max > $min) 
     { 
      $entries[$i]['cnt'] /= ($max - $min); 
     }  
     $entries[$i]['cnt'] *= ($max_size - $min_size); 
     $entries[$i]['cnt'] += $min_size; 
     $entries[$i]['cnt'] = round($entries[$i]['cnt']); 
     $key = md5($entries[$i]['name']); 
     $shown_entries[$key] = $entries[$i]; 
     $keys[$i] = $key; 
     //проверка корректности url на наличие префикса http:// 
     if(!preg_match('/^http:/i', $entries[$i]['link'])) 
     { 
      $shown_entries[$key]['link'] = 'http://'.$entries[$i]['link']; 
     } 
     } 


     sort($keys); 
     $cnt = count($keys); 
     $colors_cnt = count($colors); 
     for($i = 0; $i < $cnt; $i++) 
     { 
     $key = $keys[$i]; 
     $idx = hexdec($key[31]) % $colors_cnt; 
     $color = $colors[$idx]; 
     echo '<nobr><a href='.$shown_entries[$key]['link'] 
      .' style="font-size:'.$shown_entries[$key]['cnt'].'%; ' 
      .' text-decoration:none; color: #'.$color.';' 
      .'">'.$shown_entries[$key]['name'].'</a></nobr> ' ; 
     } 

    } 



?> 

Answer 1

我想你可能会发现其中一个在这里满足您的要求：smashingmagazine.com

注意你的老板：更多的颜色使用，更多的刺激性标签云。