सर्वर को एक निर्देशिका की सामग्री को दिखाने के लिए कॉन्फ़िगर किया जा सकता है जिसमें रेंडर करने के लिए कोई इंडेक्स फाइल नहीं है। परिणाम आमतौर पर नेत्रहीन शानदार से कम है:
हम PHP के साथ इस कार्यक्षमता की प्रतिकृति बनाकर इसे स्वयं नियंत्रित कर सकते हैं।
- एक इंडेक्स फाइल बनाएं (
.index.php, डॉट से शुरू करते हुए, वास्तव में) जो डायरेक्टरी में फाइलों को पढ़ती है और उन्हें एक टेबल में आउटपुट करती है - एक
.htaccessफाइल बनाएं जो उस फाइल को इंडेक्स के रूप में पेश करे - सीएसएस और अन्य संसाधनों में सूचकांक फ़ाइल लोड है जो एक डॉट (छिपे हुए) के साथ उपसर्ग कर रहे हैं
निम्न PHP फाइलों की निर्देशिका को पढ़ता है और उनके नाम, फ़ाइल प्रकार, और फ़ाइल आकार की एक स्टाइल तालिका प्रदर्शित करता है। यह एक वर्ग का नाम भी लागू करता है जिसमें विभिन्न प्रमुख फ़ाइल प्रकारों के लिए आइकन (सीएसएस देखें) लागू होते हैं।
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
उस इंडेक्स फ़ाइल में लोड किए गए संसाधन टॉप-इन टेबल सॉर्टर स्क्रिप्ट 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); )डेमो डाउनलोड फ़ाइलें देखें
REMEMBER: .zip फ़ाइल खाली दिख सकती है, लेकिन यह नहीं है। फ़ाइलें सभी एक डॉट के साथ पूर्वनिर्मित हैं। उन्हें एक फ़ाइल संपादक में देखें जो आपको "छिपी" फाइलें दिखाता है।
क्लिफ व्हाइट के लिए विशेष धन्यवाद।
अद्यतन नवंबर 2012: डेमो और डाउनलोड करने योग्य फ़ाइलों को अपडेट किया गया है (1) अधिक मानव पठनीय फ़ाइल आकार दिखाएं (2) त्रुटि पृष्ठ हैं