Servery je možné nakonfigurovať tak, aby zobrazovali obsah adresára, ktorý nemá indexový súbor na vykreslenie. Výsledok je zvyčajne vizuálne menej efektný:
Môžeme to prevziať sami replikáciou tejto funkcionality s PHP.
- Vytvorte indexový súbor (
.index.phpskutočne začínajúci bodkou), ktorý načíta súbory v adresári a odošle ich do tabuľky - Vytvorte
.htaccesssúbor, ktorý slúži ako index - Nechajte načítať indexový súbor v CSS a ďalších prostriedkoch, ktoré majú tiež predponu s bodkou (skryté)
Nasledujúce PHP číta adresár súborov a zobrazuje štylizovanú tabuľku s ich menom, typom a veľkosťou súboru. Aplikuje tiež názov triedy, v ktorej sa majú ikony používať pre rôzne hlavné typy súborov (pozri 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
Zdroje načítané v tomto indexovom súbore sú skript na triedenie tabuľky najvyššej úrovne, ktorý je zaradený.js a súbor .style.css. (Pamätajte, že predbežné zarovnanie súborov s bodkou robí neviditeľné vo väčšine operačných systémov a tiež sa nezobrazí v adresári súborov (dobré)). Toto je 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); )Zobraziť ukážku súborov na stiahnutie
Pamätajte: súbor ZIP sa môže javiť ako prázdny, ale nie je to tak. Všetky súbory sú označené bodkou. Prezerajte si ich v editore súborov, ktorý zobrazuje „skryté“ súbory.
Špeciálne poďakovanie patrí Cliffovi Whiteovi.
Aktualizácia november 2012: Ukážka a súbory na stiahnutie boli aktualizované tak, aby (1) zobrazovali ľudskejšie čitateľné veľkosti súborov (2) obsahovali chybové stránky