Сервери можна налаштувати на відображення вмісту каталогу, який не має файлу індексу для візуалізації. Результат зазвичай менше, ніж візуально вражаючий:
Ми можемо взяти під контроль це самі, відтворивши цю функцію за допомогою PHP.
- Створіть файл індексу (
.index.phpпочинаючи з крапки, справді), який зчитує файли в каталозі та виводить їх у таблицю - Створіть
.htaccessфайл, який служить цим файлом як індекс - Завантажте файл індексу в CSS та інші ресурси, які також мають префікс крапки (приховано)
Наступний PHP читає каталог файлів і відображає стилізовану таблицю з їх ім'ям, типом файлу та розміром файлу. Він також застосовує ім'я класу, до якого застосовуються піктограми для різних основних типів файлів (див. CSS).
Directory Contents "; $class="dir"; ) else ( $class="file"; ) // Cleans up . and… directories if($name==".")($name=". (Current Directory)"; $extn=" ";) if($name=="… ")($name="… (Parent Directory)"; $extn=" ";) // Print 'em print(" "; $size=" "); ) ) ?>
Filename Type Size (bytes) Date Modified
$name $extn $size $modtime
Ресурсами, завантаженими в цей індексний файл, є сценарій сортування таблиць toptable sortable.js та файл .style.css. (Пам’ятайте, попереднє виділення файлів крапкою робить невидимим у більшості операційних систем, а також не відображатиметься у вашому каталозі файлів (добре)). Ось цей CSS:
* ( padding:0; margin:0; ) body ( color: #333; font: 14px Sans-Serif; padding: 50px; background: #eee; ) h1 ( text-align: center; padding: 20px 0 12px 0; margin: 0; ) h2 ( font-size: 16px; text-align: center; padding: 0 0 12px 0; ) #container ( box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5); position: relative; background: white; ) table ( background-color: #F3F3F3; border-collapse: collapse; width: 100%; margin: 15px 0; ) th ( background-color: #FE4902; color: #FFF; cursor: pointer; padding: 5px 10px; ) th small ( font-size: 9px; ) td, th ( text-align: left; ) a ( text-decoration: none; ) td a ( color: #663300; display: block; padding: 5px 10px; ) th a ( padding-left: 0 ) td:first-of-type a ( background: url(./.images/file.png.webp) no-repeat 10px 50%; padding-left: 35px; ) th:first-of-type ( padding-left: 35px; ) td:not(:first-of-type) a ( background-image: none !important; ) tr:nth-of-type(odd) ( background-color: #E6E6E6; ) tr:hover td ( background-color:#CACACA; ) tr:hover td a ( color: #000; ) /* icons for file types (icons by famfamfam) */ /* images */ table tr td:first-of-type a(href$=".jpg.webp"), table tr td:first-of-type a(href$=".png.webp"), table tr td:first-of-type a(href$=".gif"), table tr td:first-of-type a(href$=".svg"), table tr td:first-of-type a(href$=".jpeg.webp") ( background-image: url(./.images/image.png.webp); ) /* zips */ table tr td:first-of-type a(href$=".zip") ( background-image: url(./.images/zip.png.webp); ) /* css */ table tr td:first-of-type a(href$=".css") ( background-image: url(./.images/css.png.webp); ) /* docs */ table tr td:first-of-type a(href$=".doc"), table tr td:first-of-type a(href$=".docx"), table tr td:first-of-type a(href$=".ppt"), table tr td:first-of-type a(href$=".pptx"), table tr td:first-of-type a(href$=".pps"), table tr td:first-of-type a(href$=".ppsx"), table tr td:first-of-type a(href$=".xls"), table tr td:first-of-type a(href$=".xlsx") ( background-image: url(./.images/office.png.webp) ) /* videos */ table tr td:first-of-type a(href$=".avi"), table tr td:first-of-type a(href$=".wmv"), table tr td:first-of-type a(href$=".mp4"), table tr td:first-of-type a(href$=".mov"), table tr td:first-of-type a(href$=".m4a") ( background-image: url(./.images/video.png.webp); ) /* audio */ table tr td:first-of-type a(href$=".mp3"), table tr td:first-of-type a(href$=".ogg"), table tr td:first-of-type a(href$=".aac"), table tr td:first-of-type a(href$=".wma") ( background-image: url(./.images/audio.png.webp); ) /* web pages */ table tr td:first-of-type a(href$=".html"), table tr td:first-of-type a(href$=".htm"), table tr td:first-of-type a(href$=".xml") ( background-image: url(./.images/xml.png.webp); ) table tr td:first-of-type a(href$=".php") ( background-image: url(./.images/php.png.webp); ) table tr td:first-of-type a(href$=".js") ( background-image: url(./.images/script.png.webp); ) /* directories */ table tr.dir td:first-of-type a ( background-image: url(./.images/folder.png.webp); )Переглянути демонстраційні файли для завантаження
ПАМ’ЯТАЙТЕ. Файл .zip може здаватися порожнім, але це не так. Усі файли мають перед крапкою. Перегляньте їх у редакторі файлів, який відображає "приховані" файли.
Особлива подяка Кліффу Уайту.
Оновлення в листопаді 2012 року: демонстраційний файл та файли, що завантажуються, були оновлені, щоб (1) показати більше розмірів файлів, що читаються людиною (2), мають сторінки помилок