navigation ://

Взнай більше про цей сайт

версія 4.3

uk de en


Робимо apache directory index більш сексі в 2 кроки

9 грудня 2005 р.
Вам подобається як виглядає files.myeburg.net? Все це працює без використання програмування в PHP, чи якійсь іншій скриптовій мові. Всього навсього потрібно зробити кілька картинок і трішки поміняти конфигурацію Вашого веб-сервера.

Тут кілька картинок: Це як воно виглядає для звичної конфигурации, моєї конфигурации, попередньої конфигурації.

Отож якщо Ви бажаєте зробити щось схоже для себе, Вам потрібно зробити два  2 кроки:
  • конфигурація directory index listing і розробка графіки
  • а також поміняти звичні іконки типів файлів на власні.

Перший крок

Скажімо папка, котру Ви хочете показувати з допомогою apache міститься на сервері: /www/dir
Вам потрібно створити нову папку з  "." в початку назви, 
mkdir /www/dir/.include
і тепер туди ви можете помістити всі файли які будуть потрібні для секси індексування. Створіть header.html, end.html і default.css у цій новій папці.
header.html потрбний для дизайну вашої сторінки до того як будуть перечислені файли, end.hml - після. І default.css є всього лиш файлом стилів для остаточного дизайну сторінки.
Ви можете подивитись всі файли повністю самі, тут я вказую тільки самі важливі частини файлів. Отже header.hml :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
    <title>files.myeburg.net</title>
    <link rel="stylesheet" type="text/css" href="/.include/default.css">
</head>
<body>
<div id="hdr">
<div id="logo"><a href="http://screens.myeburg.net/">screens myeburg.net</a></div>
<div id="content">
 
Тепер вкажем end.html :
</div>
</body>
</html>
І нарешті вкажем вигдял всіх частин сторінки у default.css.

Перейдем до конфігурації apache. Ви можете все вказати прямов в основному файлі http.conf file (або файлах конфігурації які він підключає), або також можна взяти просто .htaccess файл з DocumentRoot, чи папок які там містяться.
Це конфігураця всього virtualhost яку я використовую для файлового архіву. Я не дуже люблю використовувати .htaccess файли, бо це заставляє робити веб сервер не потрібні додаткові операції.
<VirtualHost *:80>
    ServerName files.myeburg.net
    DocumentRoot "/www/dir"
    HeaderName "/.include/header.html"
    ReadmeName "/.include/end.html"
    <Directory "/www/dir">
        Options Indexes
        <IfModule mod_autoindex.c>
            IndexOptions FancyIndexing SuppressHTMLPreamble FoldersFirst ScanHTMLTitles
            IndexOptions DescriptionWidth=24
            IndexOptions NameWidth=48
        </IfModule>
        AllowOverride None
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
 
Як бачите я вказую тут Header файл і Readme файл, а також трошки настроюю Fancy Indexing Ви можете побавитись з цією конфігурацією і настроїти все для себе.

Ви можете подивитись усі файли я використовую у  .include тут: files.myeburg.net/.include/

Після перезапуску (якщо конфігурація була зроблена в частині http.conf) apache Ви отримаєте fancy вигляд індексування папок. От тільки іконки виглядають дуже страшними тепер. Отже перейдем до наступного кроку.

Другий крок

Нам потрібні більш гарні іконки для всіх типів файлів. Я використовую іконки типів файлів із gnome (png mime) розміром 16x16, правда це не є оптимальне рішення, оскільки розмір не зовсім відповідає розміру шрифта і  Internet Explorer не вміє показувати прозорість в png картинках. Але я не дуже переживаю за користувачів які використовують buggy программи Якщо у Вас є краще рішення, може Ви напишите мені про це у коментаріях.
Отже нам знов потрібно змінити http.conf файл що б  додати більше різних типів файлів і відповідних їм іконок.
Тут моя повна конфігураця яка потрібна, і ось маленький кусок з неї:
<IfModule mod_autoindex.c>
    AddIcon /icons/csharp.png .csharp
    AddIcon /icons/flash.png .flv .swf
</IfModule>
Залишилось тільки загрузити Ваші власні іконки на сервер і замінити ними стандартні. Це все що потрібно, тепер перезагрузіть apache знову для нового сексі directory listing .

Додаток: my icons files.