Наверняка где-нибудь в сети вы видели уже каталоги файлов, среди них весьма хорошо оформленные. Реализовать такую фичу можно разными способами, например, при помощи специального PHP скрипта. Однако, если ваш HTTP-сервер работает на Apache, то существует другой подход. Имеется специальный модуль, именуемый mod_autoindex. Правда, сервер должен быть соответствующим образом настроен и модуль подключен. Тогда директивой Directory можно настроить красивую индексацию для какой-либо директории вашего сервера.
Однако доступ к httpd.conf, в котором разрешены директивы Directory, часто не предусмотрен на виртуальных хостингах. А поэтому ничего не остаётся, как использовать файлы .htaccess. Главное уточнить у своего хостера, возможен ли Override определённых директив из httpd.conf в .htaccess.
Предположим, всё это настроено и работает. Тогда запишем в .htaccess корневого каталога с файлами следующее:
Options +Indexes
По умолчанию это вызовет стандартный метод индексации, который будет работать и для подкаталогов (если только в этих каталогах нет index.html, index.php и т.п.). Так мы безо всяких дополнительных скриптов получили структурированный каталог, по которому могут перемещаться пользователи и забирать выставленные для загрузки файлы. Однако наша задача помимо всего предполагает ещё и оформление, не так ли? Что ж, давайте посмотрим, как это можно сделать.
Рассмотрим конкретный пример. Возьмём каталог загрузок материалов для студентов ТТУ. Он доступен по адресу:
http://www.starspirals.net/ttu/materjalid/
Первым делом, необходимо включить «красивую» индексацию, параллельно расставив её дополнительные опции. Делается это при помощи директивы IndexOptions следующим образом:
IndexOptions FancyIndexing XHTML NameWidth=* FoldersFirst SuppressDescription IgnoreCase SuppressHTMLPreamble HTMLTable Charset=UTF-8
Тут требуются пояснения. Разберёмся по порядку:
— FancyIndexing включает «красивую» индексацию с использованием текста и графики, что позволяет для определённых типов файлов задать соответствющие иконки;
— XHTML заставляет сервер выдавать XHTML код;
— NameWidth=* отвечает за то, чтобы имена файлов не обрезались (строчки с именами файлов будут настолько широкими, сколько самое длинное название файла);
— FoldersFirst говорит серверу, что список папок в каталоге должен отображаться до списка файлов;
— SuppressDescription отменяет генерацию описания файлов;
— IgnoreCase делает сортировку файлов регистронезависимой;
— SuppressHTMLPreamble убирает генерацию стандартной «шапки» HTML в случае, если необходимо использовать пользовательскую.
— HTMLTable указывает, что Apache будет генерировать для каталога файлов таблицу;
— Charset=UTF-8 задаёт выходную кодировку, в данном случае это UTF-8; с этой опцией нужно быть осторожным, появилась она в Apache относительно недавно, да и стоит учесть, что всякие собственные «шапки» и «подвалы» генерируемой страницы нужно будет сохранять в этой кодировке.
Отлично, вроде с этим разобрались. Посмотрим теперь, как добавляются иконки для файлов. В рассмотриваемом файле .htaccess есть следующие директивы:
AddIcon (IMG,/ttu/img/icons/folder.gif) ^^DIRECTORY^^ AddIcon (IMG,/ttu/img/icons/p_folder.gif) .. AddIcon (IMG,/ttu/img/icons/text.gif) *.txt *.rtf AddIcon (IMG,/ttu/img/icons/cpp.gif) *.c *.cpp AddIcon (IMG,/ttu/img/icons/pdf.gif) *.pdf AddIcon (IMG,/ttu/img/icons/djvu.gif) *.djvu AddIcon (IMG,/ttu/img/icons/xls.gif) *.xls AddIcon (IMG,/ttu/img/icons/doc.gif) *.doc AddIcon (IMG,/ttu/img/icons/archive.gif) *.rar *.zip *.tar *.tar.gz *.tar.bz *.tar.bz2 AddIcon (IMG,/ttu/img/icons/cd.gif) *.iso *.bin *.mdf *.mds *.ccd *.img *.nrg AddIcon (IMG,/ttu/img/icons/exe.gif) *.exe *.EXE AddIcon (IMG,/ttu/img/icons/com.gif) *.com *.COM AddIconByType (IMG,/ttu/img/icons/sound.gif) audio/* AddIconByType (IMG,/ttu/img/icons/image.gif) image/* DefaultIcon /ttu/img/icons/misc.gif
Вот для чего нужны эти директивы:
— AddIcon — добавить иконку для файла, имя которого задаётся по образцу;
— AddIconByType — добавить иконку для определённого MIME-типа;
— DefaultIcon — в случае, если для определённого типа файла не найдётся специальной иконки, будет использована эта.
Синтаксис довольно простой, думаю и без особых объяснений понятно. Главное разобраться с типичной проблемой «абсолютности» пути к файлам иконок. Ну а IMG просто указывает, что «видят» браузеры без поддержки графики на месте иконок. Здесь сложность заключается, в общем-то, в правильном подборе иконок. Желательно чтобы они были небольшими (у меня 32 х 32 пикселя) и смотрелись вместе как единое целое. Понятно, что иконки лучше сохранять в форматах GIF и PNG с прозрачностью (они более универсальны).
Всё бы хорошо, вроде индексы украсили, но что-то не так. Что насчёт сортировки файлов? Тут приходит на помощь директива IndexOrderDefault. В конкретном случае сортировка происходит в восходящем порядке и на основе описания файла:
IndexOrderDefault Ascending Description
Однако без описаний файлов тут ничего не выйдет. Добавляем:
AddDescription "txt file" .txt AddDescription "gp5 file" .gp* AddDescription "rtf file" .rtf AddDescription "xls file" .xls AddDescription "doc file" .doc AddDescription "iso file" .iso AddDescription "bin file" .bin AddDescription "pdf file" .pdf AddDescription "rar file" .rar AddDescription "zip file" .zip AddDescription "img file" .img AddDescription "mid file" .mid AddDescription "wav file" .wav AddDescription "mp3 file" .mp3 AddDescription "ogg file" .ogg AddDescription "avi file" .avi AddDescription "mp4 file" .mp4 AddDescription "mov file" .mov AddDescription "jpg file" .jpg .jpeg AddDescription "gif file" .gif AddDescription "flv file" .flv AddDescription "fla file" .fla AddDescription "exe file" .exe AddDescription "com file" .com AddDescription "jsp file" .jsp
Помимо всего прочего, неплохо бы не индексировать определённые «служебные» файлы. Этого добьёмся использованием IndexIgnore:
IndexIgnore .htaccess . aine.txt ~*
Последнее, что осталось сделать в данном случае — это добавить «шапку» и «подвал». Делается это с помощью директив HeaderName («шапка») и ReadmeName («подвал»). Кажется очевидным, что наличие последней возможности позволяет творить с индексом что угодно. Можно назначить документу любой набор стилей и даже применить JavaScript (этим, конечно, не следует злоупотреблять).
Мне вот захотелось использовать в шапке скрипт. Однако без некоторых хитростей тут не обошлось. Очевидная директива
HeaderName header.php
Ни в какую не хотела работать. В интернете была также информация, что запускать скрипты таким образом можно, но необходимо сообщить Apache, что файл скрипта является text/plain, иначе сервер его не воспринимает. Однако у меня таким образом запустить скрипт не получилось. После некоторых безуспешных попыток выход всё же нашёлся. Это SSI (Server-Side Includes). Нужно записать в файл header.shtml следующее:
(нужен виртуальный путь от корневой директории)
и добавить в .htaccess дополнительные опции (они разрешают запуск CGI-скриптов и вложения-инклуды как таковые) и, разумеется, название shtml-файла:
Options +Indexes +ExecCGI +Includes HeaderName header.shtml
и всё начинает работать.
Точно так же можно поступить и с «подвалом». В этом случае мне нужен был скрипт для создания путеводителя и динамической подзагрузки текстовых комментариев при помощи AJAX. Однако возможности использования этой техники в принципе не ограничены.
Вот всё содержание файла .htaccess:
# Установить опции Options +Indexes +ExecCGI +Includes # Установить опции индексирования IndexOptions XHTML FancyIndexing NameWidth=* FoldersFirst SuppressDescription IgnoreCase SuppressHTMLPreamble HTMLTable Charset=UTF-8 # Добавить собственные иконки для файлов AddIcon (IMG,/ttu/img/icons/folder.gif) ^^DIRECTORY^^ AddIcon (IMG,/ttu/img/icons/p_folder.gif) .. AddIcon (IMG,/ttu/img/icons/text.gif) *.txt *.rtf AddIcon (IMG,/ttu/img/icons/cpp.gif) *.c *.cpp AddIcon (IMG,/ttu/img/icons/pdf.gif) *.pdf AddIcon (IMG,/ttu/img/icons/djvu.gif) *.djvu AddIcon (IMG,/ttu/img/icons/xls.gif) *.xls AddIcon (IMG,/ttu/img/icons/doc.gif) *.doc AddIcon (IMG,/ttu/img/icons/archive.gif) *.rar *.zip *.tar *.tar.gz *.tar.bz *.tar.bz2 AddIcon (IMG,/ttu/img/icons/cd.gif) *.iso *.bin *.mdf *.mds *.ccd *.img *.nrg AddIcon (IMG,/ttu/img/icons/exe.gif) *.exe *.EXE AddIcon (IMG,/ttu/img/icons/com.gif) *.com *.COM # Задать порядок сортировки файлов IndexOrderDefault Ascending Description # Добавить описания файлов AddDescription "txt file" .txt AddDescription "gp5 file" .gp* AddDescription "rtf file" .rtf AddDescription "xls file" .xls AddDescription "doc file" .doc AddDescription "iso file" .iso AddDescription "bin file" .bin AddDescription "pdf file" .pdf AddDescription "rar file" .rar AddDescription "zip file" .zip AddDescription "img file" .img AddDescription "mid file" .mid AddDescription "wav file" .wav AddDescription "mp3 file" .mp3 AddDescription "ogg file" .ogg AddDescription "avi file" .avi AddDescription "mp4 file" .mp4 AddDescription "mov file" .mov AddDescription "jpg file" .jpg .jpeg AddDescription "gif file" .gif AddDescription "flv file" .flv AddDescription "fla file" .fla AddDescription "exe file" .exe AddDescription "com file" .com AddDescription "jsp file" .jsp # Добавить иконки к аудиофайлам и изображениям AddIconByType (IMG,/ttu/img/icons/sound.gif) audio/* AddIconByType (IMG,/ttu/img/icons/image.gif) image/* # Иконка по умолчанию для неизвестных типов файлов DefaultIcon /ttu/img/icons/misc.gif # Не индексировать эти файлы IndexIgnore .htaccess . aine.txt ~* # Добавить шапку и подвал HeaderName /ttu/header.shtml ReadmeName /ttu/footer.shtml # Дополнительные типы для загрузки мобильного контента AddType text/vnd.sun.j2me.app-descriptor jad AddType application/java-archive jar
Помните, что хорошо оформленные индексы более привлекательны для пользователей. Поэтому если вы не используете сторонний скрипт для выполнения той же задачи, стоит уделить им должное внимание :-)
Дополнительно: официальная документация