PHP自动文件夹菜单式动态图片画廊开发与优化问询

以下是简化后的完整代码，同时优化了安全性、可读性和样式体验：

简化后的HTML/PHP代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>画廊</title>
</head>
<body>
    <?php
    // 通用字符串清理函数，避免重复代码
    function cleanName($name) {
        $filters = ['-', '_', '~'];
        return ucfirst(strtolower(str_replace($filters, ' ', $name)));
    }

    $baseDir = './images';
    // 安全处理选中文件夹，防止路径遍历
    $selectedFolder = isset($_GET['folder']) ? basename($_GET['folder']) : '';
    // 直接获取所有子文件夹
    $folders = array_filter(glob($baseDir . '/*'), 'is_dir');
    $folders = array_map(fn($path) => basename($path), $folders);
    ?>

    <header>
        <ul class="header-ul">
            <?php foreach($folders as $folder): ?>
                <li>
                    <a href="?folder=<?= $folder ?>" class="<?= $selectedFolder === $folder ? 'selected' : '' ?>">
                        <?= cleanName($folder) ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    </header>

    <main>
        <?php if($selectedFolder && is_dir($baseDir . '/' . $selectedFolder)): ?>
            <?php
            // 按扩展名分组获取图片
            $imageGroups = [
                'JPG' => glob($baseDir . '/' . $selectedFolder . '/*.{jpg,JPG}', GLOB_BRACE),
                'PNG' => glob($baseDir . '/' . $selectedFolder . '/*.{png,PNG}', GLOB_BRACE),
                'GIF' => glob($baseDir . '/' . $selectedFolder . '/*.{gif,GIF}', GLOB_BRACE)
            ];
            ?>

            <?php foreach($imageGroups as $type => $images): ?>
                <?php if(!empty($images)): ?>
                    <h2><?= $type ?> 图片</h2>
                    <div class="gallery-grid">
                        <?php foreach($images as $imgPath): ?>
                            <?php
                            $imgName = basename($imgPath);
                            $cleanImgName = cleanName(pathinfo($imgName, PATHINFO_FILENAME));
                            ?>
                            <div class="img-container">
                                <a href="<?= $imgPath ?>" target="_blank">
                                    <img src="<?= $imgPath ?>" alt="<?= $cleanImgName ?>">
                                    <p><?= ucfirst($cleanImgName) ?></p>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </main>
</body>
</html>

简化后的CSS代码 #

body {
    font-family: 'Arimo', Arial, sans-serif;
    margin: 20px;
    line-height: 1.5;
}

.header-ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.header-ul li a {
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s;
}

.header-ul li a.selected {
    font-weight: 700;
    color: #0056b3;
    background-color: #f0f8ff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.img-container {
    text-align: center;
}

.img-container img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.img-container p {
    margin: 8px 0 0;
    font-size: 14px;
    color: #555;
}

主要简化点说明 #

• 复用函数减少重复：将文件夹名和图片名的清理逻辑提取为cleanName函数，避免冗余代码
• 更高效的文件获取：使用glob直接筛选目标文件/文件夹，替代scandir+array_diff的组合
• 增强安全防护：用basename处理选中文件夹，防止路径遍历攻击
• 提升代码可读性：使用PHP短标签和foreach替代语法，让HTML与PHP混合代码更清晰
• 样式统一优化：移除内联样式，改用CSS Grid实现响应式布局，添加视觉优化效果

内容的提问来源于stack exchange，提问作者Jiu