Περιεχόμενα καταλόγου με στυλ εμφάνισης - CSS-Κόλπα

Anonim

Οι διακομιστές μπορούν να ρυθμιστούν ώστε να εμφανίζουν τα περιεχόμενα ενός καταλόγου που δεν διαθέτει αρχείο ευρετηρίου για απόδοση. Το αποτέλεσμα είναι συνήθως λιγότερο από οπτικά θεαματικό:

Προεπιλογή Lackluster στο Chrome
Πιο καλύτερα, Προβολή επίδειξης

Μπορούμε να το ελέγξουμε μόνοι μας με την αναπαραγωγή αυτής της λειτουργικότητας με PHP.

  1. Δημιουργήστε ένα αρχείο ευρετηρίου ( .index.php, ξεκινώντας από την τελεία, πραγματικά) που διαβάζει τα αρχεία στον κατάλογο και τα εξάγει σε έναν πίνακα
  2. Δημιουργήστε ένα .htaccessαρχείο που εξυπηρετεί αυτό το αρχείο ως ευρετήριο
  3. Φορτώστε το αρχείο ευρετηρίου σε CSS και άλλους πόρους που έχουν επίσης πρόθεμα με τελεία (κρυφό)

Το ακόλουθο PHP διαβάζει τον κατάλογο των αρχείων και εμφανίζει έναν στυλ πίνακα με το όνομά τους, τον τύπο αρχείου και το μέγεθος του αρχείου. Εφαρμόζει επίσης ένα όνομα κλάσης για την εφαρμογή εικονιδίων για τους διαφορετικούς τύπους μεγάλων αρχείων (βλ. 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

Οι πόροι που φορτώνονται σε αυτό το αρχείο ευρετηρίου είναι το top-in script sorter script sortable.js και ένα αρχείο .style.css. (Θυμηθείτε, η εισαγωγή των αρχείων με τελεία καθιστά το αόρατο στα περισσότερα λειτουργικά συστήματα και επίσης δεν θα εμφανίζεται στον κατάλογο αρχείων σας (καλό)). Εδώ είναι το 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); )

Προβολή αρχείων λήψης επίδειξης

ΘΥΜΗΘΕΙΤΕ: Το αρχείο .zip μπορεί να φαίνεται κενό, αλλά δεν είναι. Όλα τα αρχεία είναι προεπιλεγμένα με τελεία. Δείτε τα σε ένα πρόγραμμα επεξεργασίας αρχείων που σας δείχνει "κρυμμένα" αρχεία.

Ειδικές ευχαριστίες στον Cliff White.

Ενημέρωση Νοέμβριος 2012: Η επίδειξη και τα αρχεία με δυνατότητα λήψης ενημερώθηκαν σε (1) δείχνουν περισσότερα ανθρώπινα μεγέθη αρχείων με δυνατότητα ανάγνωσης (2) έχουν σελίδες σφάλματος