Rodyti stilizuoto katalogo turinį CSS-gudrybės

Anonim

Serveriai gali būti sukonfigūruoti rodyti katalogo, kuriame nėra rodomo failo, turinį. Rezultatas paprastai yra mažesnis nei vizualiai įspūdingas:

„Chrome“ numatytasis numatytasis nustatymas
Geriau, peržiūrėkite demonstracinę versiją

Mes galime tai kontroliuoti patys, atkartodami šią funkciją su PHP.

  1. Sukurkite indekso failą ( .index.phppradedant nuo taško, kuris iš tikrųjų), kuris nuskaito kataloge esančius failus ir išves juos į lentelę
  2. Padarykite .htaccessfailą, kuris tą failą aptarnauja kaip indeksą
  3. Įkelkite indekso failą į CSS ir kitus išteklius, kurie taip pat yra pažymėti tašku (paslėpta)

Šis PHP nuskaito failų katalogą ir parodo jų pavadinimo, failo tipo ir dydžio lentelę. Ji taip pat taiko klasės pavadinimą, kuriame įvairiems pagrindiniams failų tipams taikomos piktogramos (žr. 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

Tame indekso faile įkelti ištekliai yra viršuje esantis lentelių rūšiavimo scenarijus sortable.js ir .style.css failas. (Atminkite, kad failų įvedimas tašku daro nematomą daugumoje operacinių sistemų, taip pat nebus rodomas failų kataloge (gerai). Štai 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); )

Žiūrėti demonstracinius atsisiuntimo failus

ATSIMINKITE: gali atrodyti, kad .zip failas yra tuščias, bet taip nėra. Visi failai įvesti tašku. Peržiūrėkite juos failų redagavimo priemonėje, kurioje rodomi „paslėpti“ failai.

Ypatingas ačiū Cliff White.

Atnaujinta 2012 m. Lapkričio mėn .: demonstraciniai ir atsisiųstieji failai buvo atnaujinti (1) rodyti daugiau žmonių skaitomų failų dydžių (2) turi klaidos puslapius