PHP 實現多彩標籤雲：隨機顏色與字體大小生成策略

需求分析

部落格側邊欄常見的「標籤雲」視覺特徵：顏色多樣、字體大小不一。這能直觀反映標籤熱門度（字越大越熱門），並增加頁面活潑感。

核心實作：隨機生成器

1. 隨機字體大小

直接在合理區間取整數，加上 px 單位：

<?php
$size = rand(12, 24); // 12px ~ 24px
echo '<span style="font-size:' . $size . 'px">標籤文字</span>';
?>

2. 隨機十六進位顏色

顏色格式為 #RRGGBB，每位取 0-9、A-F。用陣列映射下標隨機取值：

<?php
function getRandomColor(): string {
    $hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
    $color = '#';
    for ($i = 0; $i < 6; $i++) {
        $color .= $hex[rand(0, 15)];
    }
    return $color;
}

// 使用範例
echo '<span style="color:' . getRandomColor() . '">彩色標籤</span>';
?>

完整標籤雲生成流程

1. 從資料庫查詢所有標籤及其文章數（熱度）
2. 去重、排序
3. 遍歷標籤陣列，根據熱度計算字體大小（或隨機），調用 getRandomColor()
4. 拼接 HTML 字串，輸出或快取至靜態檔案

效能優化建議

• 靜態化：標籤雲不需即時渲染。僅在「新增/刪除/修改文章導致標籤變更」時重新生成 HTML 片段，存入檔案（如 tags_cloud.html），前端直接 include 或 AJAX 載入。
• 前端化：將標籤資料輸出為 JSON，由 JavaScript 在瀏覽器端渲染（Canvas / SVG / DOM），可實現動畫、互動（懸停放大、點擊篩選），且零伺服器壓力。
• 色彩協調：純隨機顏色可能刺眼。建議預定義幾組和諧配色方案（如 Material Design 色板），隨機從中抽取，或用 HSL 色空間固定飽和度/亮度只隨機色相。

進階：JS 版標籤雲優勢

• 客戶端渲染，不佔伺服器 CPU
• 支援 3D 球體、動畫漂浮、點擊篩選等豐富互動
• 資料與展現分離，易於維護與重構

有空再分享 JavaScript 版的動態標籤雲實作！