Jquery 将多个链接显示为云

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

此云必须位于页面的中心，并从中心开始生长。我原以为用Wordpress创建会很容易，但事实并非如此。我同意使用任何CMS，但找不到这种现成的解决方案

刚找到这个：。它类似于我想要的，但它没有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> ' ;
      }

    }



 ?>

---

我想你可以在这里找到一个符合你要求的：

---

提醒你的老板：使用的颜色越多，标签云就越令人恼火。

你正在构建的不是标签云，而是一个链接页面，其样式与标签云类似，我怀疑你是否能找到一个预构建的解决方案。也许你可以写一个wordpress插件？假设你能够构建一个模板&一些后端存储+在构建插件时创建/更新/删除后端页面非常感谢分享这个链接！但我担心它太旧了，99%的链接都断了：-不过还是要谢谢你！