Vis innstilt kataloginnhold - CSS-triks

Servere kan konfigureres til å vise innholdet i en katalog som ikke har en indeksfil å gjengi. Resultatet er vanligvis ikke visuelt spektakulært:

Vi kan ta kontroll over dette selv ved å replikere denne funksjonaliteten med PHP.

Lag en indeksfil (som .index.phpegentlig begynner med prikken) som leser filene i katalogen og skriver dem ut i en tabell
Lag en .htaccessfil som tjener den filen som indeks
Ha indeksfilene lastet inn i CSS og andre ressurser som også er prefikset med en prikk (skjult)

Følgende PHP leser katalogen over filer og viser en stylet tabell med navn, filtype og filstørrelse. Det bruker også et klassenavn der du kan bruke ikoner for de forskjellige hovedfiltyper (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

Ressursene som er lastet inn i indeksfilen er topp-i-sorteringsskript sortable.js og en .style.css-fil. (Husk at det å fremstille filene med en prikk gjør det usynlig i de fleste operativsystemer, og vil heller ikke vises i filkatalogen din (bra)). Her er 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); )

Vis Demo Last ned filer

HUSK: ZIP-filen kan se ut til å være tom, men den er den ikke. Filene er alle foran en prikk. Se dem i et filredigeringsprogram som viser "skjulte" filer.