标签云页面&黑暗模式

资料来源：
追随她的旅程 - 标签页面的优化
潮流周刊 - 第167期 - 碧空雪涛

<?php
/**
 * 标签云（现代版）
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php'); ?>

<h1 class="title"><?php $this->title() ?></h1>

<style>
.tag-cloud-modern {
    max-width: 800px;
    margin: 30px auto;
    padding: 15px;
    position: relative;
}

.tag-cloud-modern-container {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 30px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.tag-cloud-modern ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tag-cloud-modern li {
    display: inline-block;
    margin: 3px;
}

.tag-cloud-modern li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 15px;
    border-radius: 6px;
    text-decoration: none;
    color: #666;
    font-weight: 400;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.2s ease;
}

.tag-cloud-modern li a:hover {
    background: #f5f5f5;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tag-cloud-modern .tag-count {
    font-size: 0.85em;
    margin-left: 6px;
    color: #999;
}
</style>

<?php
// 获取所有标签
$tags = $this->widget('Widget_Metas_Tag_Cloud', 'sort=count&ignoreZeroCount=1&desc=1&limit=0')->to($tags);

// 将标签存储到数组中
$tagArray = array();
$maxCount = 1;
$minCount = PHP_INT_MAX;

while ($tags->next()) {
    $tagArray[] = array(
        'name' => $tags->name,
        'permalink' => $tags->permalink,
        'count' => $tags->count
    );
    if ($tags->count > $maxCount) {
        $maxCount = $tags->count;
    }
    if ($tags->count < $minCount) {
        $minCount = $tags->count;
    }
}

// 计算字体大小范围
$minFontSize = 14;
$maxFontSize = 24;
$fontRange = $maxFontSize - $minFontSize;

if (!empty($tagArray)): ?>
<div class="tag-cloud-modern">
    <div class="tag-cloud-modern-container">
        <ul>
        <?php 
        // 随机打乱标签顺序
        shuffle($tagArray);
        
        foreach ($tagArray as $tag): 
            // 计算平滑的字体大小
            if ($maxCount == $minCount) {
                $fontSize = $minFontSize + ($fontRange / 2);
            } else {
                $weight = ($tag['count'] - $minCount) / ($maxCount - $minCount);
                $fontSize = $minFontSize + ($weight * $fontRange);
            }
        ?>
            <li><a href="<?php echo $tag['permalink']; ?>" 
                   style="font-size: <?php echo $fontSize; ?>px;" 
                   title="<?php echo $tag['name']; ?>的文章列表">
                   <?php echo $tag['name']; ?>
                   <span class="tag-count"><?php echo $tag['count']; ?></span>
                </a>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
</div>
<?php else: ?>
<div class="tag-cloud-modern">
    <div class="tag-cloud-modern-container">
        <p style="text-align: center; color: #666;">暂无标签</p>
    </div>
</div>
<?php endif; ?>

<?php $this->need('footer.php'); ?>

一段代码增加黑暗模式：

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
  html img,
  html video {
    filter: invert(1) hue-rotate(180deg);
  }
}