Kuva stiiliga kataloogi sisu - CSS-trikid

Serverid saab konfigureerida kuvama kataloogi sisu, millel pole renderdatavat indeksfaili. Tulemus on tavaliselt vähem kui visuaalselt tähelepanuväärne:

Saame selle ise juhtida, korrates seda funktsionaalsust PHP-ga.

Tehke indeksfail ( .index.phpalgusega punktist, tõesti), mis loeb kataloogis olevad failid ja väljastab need tabelisse
Tehke .htaccessfail, mis teenib seda faili indeksina
Laske indeksfailil laadida CSS-i ja muid ressursse, mis on ka eesliitega (varjatud)

Järgmine PHP loeb failide kataloogi ja kuvab nende nime, faili tüübi ja suuruse kujundatud tabeli. Samuti rakendatakse klassi nime, kus rakendatakse ikoone erinevate peamiste failitüüpide jaoks (vt 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

Sellesse registrifaili laaditavad ressursid on tabeli ülaosa skripti sortable.js ja .style.css fail. (Pidage meeles, et failide eesmine punktiga muutmine on enamikus opsüsteemides nähtamatu ja seda ei kuvata ka teie failide kataloogis (hea). Siin on see 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); )

Kuva demo allalaaditavad failid

MEENUTAGE: .zip-fail võib tunduda olevat tühi, kuid see pole nii. Kõik failid on eeltäidetud punktiga. Vaadake neid failiredaktoris, mis näitab teile peidetud faile.