Sunucular, işlenecek bir dizin dosyası olmayan bir dizinin içeriğini gösterecek şekilde yapılandırılabilir. Sonuç genellikle görsel olarak muhteşem olmaktan daha azdır:
Bu işlevselliği PHP ile kopyalayarak bunu kendi kendimize kontrol edebiliriz.
.index.phpDizindeki dosyaları okuyan ve bunları bir tabloya çıkaran bir dizin dosyası oluşturun ( gerçekten noktayla başlayarak).htaccessBu dosyayı dizin olarak sunan bir dosya oluşturun- Dizin dosyasının CSS'de ve ayrıca bir nokta (gizli) ile ön eklenmiş diğer kaynaklarda yüklenmesini sağlayın
Aşağıdaki PHP dosyaların dizinini okur ve adlarının, dosya türlerinin ve dosya boyutlarının stilize edilmiş bir tablosunu görüntüler. Ayrıca, farklı ana dosya türleri için simgelerin uygulanacağı bir sınıf adı da uygular (bkz. 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
Bu dizin dosyasına yüklenen kaynaklar, en üstteki tablo sıralayıcı komut dosyası sortable.js ve bir .style.css dosyasıdır. (Unutmayın, dosyalara nokta koymanın çoğu işletim sisteminde görünmez olmasını sağlar ve ayrıca dosyalar dizininizde görünmez (iyi)). İşte o 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); )Demo İndirme Dosyalarını Görüntüleyin
UNUTMAYIN: .zip dosyası boş görünebilir, ancak değildir. Dosyaların hepsinin önünde bir nokta vardır. Bunları, size "gizli" dosyaları gösteren bir dosya düzenleyicide görüntüleyin.
Cliff White'a özel teşekkürler.
Kasım 2012 Güncellemesi: Demo ve indirilebilir dosyalar, (1) daha fazla insan tarafından okunabilir dosya boyutu (2) hata sayfalarına sahip olacak şekilde güncellendi