Näytä tyylitetyn hakemiston sisältö - CSS-temppuja

Palvelimet voidaan määrittää näyttämään hakemiston sisältö, jossa ei ole renderoitavaa hakemistotiedostoa. Tulos on yleensä vähemmän kuin visuaalisesti upea:

Voimme hallita tätä itse toistamalla tämän toiminnon PHP: llä.

Tee hakemistotiedosto ( .index.phptodella pisteestä alkaen), joka lukee hakemiston tiedostot ja tuottaa ne taulukkoon
Luo .htaccesstiedosto, joka palvelee kyseistä tiedostoa hakemistona
Pyydä hakemistotiedostoa lataamaan CSS: ssä ja muissa resursseissa, joihin on myös lisätty piste (piilotettu)

Seuraava PHP lukee tiedostohakemiston ja näyttää tyylin muotoisen taulukon, jossa on niiden nimi, tiedostotyyppi ja tiedostokoko. Se käyttää myös luokan nimeä, jossa kuvakkeita käytetään eri päätiedostotyyppeihin (katso 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

Hakemistotiedostoon ladatut resurssit ovat ylimmän taulukon lajittelukomentosarja sortable.js ja .style.css-tiedosto. (Muista, että tiedostojen esipiste pisteellä tekee näkymättömäksi useimmissa käyttöjärjestelmissä, eikä myöskään näy tiedostohakemistossa (hyvä). Tässä 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); )

Näytä esittelylataustiedostot

MUISTA: .zip-tiedosto saattaa näyttää olevan tyhjä, mutta se ei ole. Kaikki tiedostot on merkitty pisteellä. Tarkastele niitä tiedostojen muokkausohjelmassa, joka näyttää piilotetut tiedostot.