Visa utformad kataloginnehåll - CSS-tricks

Servrar kan konfigureras för att visa innehållet i en katalog som inte har en indexfil att återge. Resultatet är vanligtvis mindre än visuellt spektakulärt:

Vi kan ta kontroll över detta själva genom att replikera denna funktionalitet med PHP.

Skapa en indexfil (från .index.phpbörjan med punkten, verkligen) som läser filerna i katalogen och matar ut dem i en tabell
Skapa en .htaccessfil som tjänar den filen som index
Ha indexfilen laddad i CSS och andra resurser som också är prefix med en punkt (dold)

Följande PHP läser katalogen med filer och visar en formad tabell över deras namn, filtyp och filstorlek. Det tillämpar också ett klassnamn för att tillämpa ikoner för de olika stora filtyperna (se 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

Filename	Type	Size (bytes)	Date Modified
$name	$extn	$size	$modtime

De resurser som laddas i indexfilen är topp-in tabell sorteringsskript sortable.js och en .style.css-fil. (Kom ihåg att det är osynligt i de flesta operativsystem att föregripa filerna med en punkt och inte heller visas i din katalog med filer (bra)). Här är den 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); )

Visa demohämtningsfiler

Ihåg: .zip-filen kan tyckas vara tom, men den är det inte. Filerna är alla inordnade med en punkt. Visa dem i en filredigerare som visar dig "dolda" filer.