Serverus var konfigurēt tā, lai parādītu direktorija saturu, kuram nav renderējama indeksa faila. Rezultāts parasti ir mazāks nekā vizuāli iespaidīgs:
Mēs paši varam to kontrolēt, atkārtojot šo funkcionalitāti ar PHP.
- Izveidojiet indeksa failu (
.index.phpsākot ar punktu, patiešām), kas nolasa direktorijā esošos failus un izvada tos tabulā - Izveidojiet
.htaccessfailu, kas šo failu kalpo kā indeksu - Novietojiet indeksa failu CSS un citos resursos, kas arī ir pievienoti ar punktu (slēpts)
Šis PHP nolasa failu direktoriju un parāda veidotu tabulu ar to nosaukumu, faila tipu un faila lielumu. Tas lieto arī klases nosaukumu, kurā ikonas jāpiemēro dažādiem galvenajiem failu tipiem (sk. 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
Resursi, kas ielādēti šajā indeksa failā, ir augšējā tabulas šķirotāja skripts sortable.js un .style.css fails. (Atcerieties, ka failu aizpildīšana ar punktu padara neredzamu lielākajā daļā operētājsistēmu, kā arī netiks rādīta jūsu failu direktorijā (labi). Lūk, 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); )Skatīt demonstrācijas lejupielādes failus
ATcerieties: .zip fails, iespējams, ir tukšs, bet tas tā nav. Visi faili ir ievadīti ar punktu. Skatiet tos failu redaktorā, kas parāda “slēptos” failus.
Īpašs paldies Cliff White.
Atjauninājums 2012. gada novembrī: demonstrācijas un lejupielādējamie faili ir atjaunināti (1) parādīt vairāk cilvēku lasāmu failu izmērus (2) ir kļūdu lapas