Листинг файлов (список файлов) в веб сервере apache

Как известно, если разрешить директиву в служебном файле .htaccess Options +Indexes То при запросе пути веб сервер покажет файлы, которые есть в этой директории

Листинг файлов (список файлов) в веб сервере apache

Этот список файлов можно визуально изменить (темизировать) и сделать, например, так (скриншот ниже) используя базовые возможность веб сервера

Новый вариант
Листинг файлов

или так (старый вариант)
Листинг файлов (список файлов) в веб сервере apache

Для этого создадим в нужной директории файл .htaccess с таким содержимым

RewriteEngine On
RewriteBase /
Options +Indexes
Options +FollowSymLinks
IndexOptions Charset=windows-1251
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
</Files>

<IfModule mod_autoindex.c>
IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* XHTML HTMLtable SuppressHTMLPreamble SuppressRules SuppressLastModified
IndexOrderDefault Ascending Name
HeaderName /путь/dirlist_header.shtml
ReadmeName /путь/dirlist_footer.shtml
IndexIgnore .htaccess .ftpquota .DS_Store
</IfModule>

DefaultIcon /путь/ico/bullet_black.png
AddIcon /путь/list_blank.png ^^BLANKICON^^
AddIcon /путь/list_folder.png ^^DIRECTORY^^
AddIcon /путь/bullet_arrow_up.png ..
AddIcon /путь/list_images.png .png .gif .tiff .jpg .jpeg

Рассмотрим, что обозначают все эти директивы:

Options +Indexes
Options +FollowSymLinks

Включаем вывод листинга файлов и симлинки (симлинки не обязательно)

IndexOptions Charset=windows-1251
AddDefaultCharset windows-1251

Затем указываем кодировку. В зависимости от настроек сервера она может и не нужна либо нужна, но другая

<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
</Files>

Защита файла .htaccess

И основная часть

<IfModule mod_autoindex.c>
IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* XHTML HTMLtable SuppressHTMLPreamble SuppressRules SuppressLastModified
IndexOrderDefault Ascending Name
HeaderName /путь/dirlist_header.shtml
ReadmeName /путь/dirlist_footer.shtml
IndexIgnore .htaccess .ftpquota .DS_Store
</IfModule>

Параметры основной части более подробней:

Параметр Описание
IndexOptions включение опций (все опции можно посмотреть на оф сайте Apache apache.org
IgnoreCase игнорирование регистра
FancyIndexing сортировка по столбцам
FoldersFirst папки показывать вверху списка
NameWidth=* размер поля имени файла. Звездочка обозначает, что имя файла не будут переносится на новую строчку
DescriptionWidth=* тоже самое для описания файлов
XHTML формат разметки страницы с листингом. Может быть и HTML
HTMLtable оборачивает список файлов в html таблицу. Для таблиц всегда удобней применять специальный для этого html тег
SuppressHTMLPreamble убирает стандартную шапку, тем самым позволяя задать свою. Под шапкой подразумевается доктайп и все что находится в теге . Но для простаты реализации шапку можно оставить стандартную, если не требуется выводить что-то особенное.
SuppressRules убирает горизонтальные линии разметки
SuppressDescription
SuppressLastModified
SuppressSize
убирают соответственно колонки описания файла, даты его модификации и размера
IconHeight=16 размер высоты иконки в пикселях
IconWidth=16 размер ширины иконки в пикселях
IconsAreLinks иконки имеют ссылку на файл
HeaderName /dirlist_header.shtml подключение html страницы с основной разметкой
ReadmeName /dirlist_footer.shtml подключение html страницы с подвалом
IndexIgnore игнорирование показа файлов, например, самого файла .htaccess и тех файлов, которые не должны показываться в листинге, а так же можно скрыть и целые папки. Можно указывать как полное название файла так и маску например игнорировать все файлы стилей *.css

Осталось присвоить иконки разным типам файлов, делается это следующим образом

AddIcon /путь/list_blank.png ^^BLANKICON^^
AddIcon /путь/list_folder.png ^^DIRECTORY^^
AddIcon /путь/bullet_arrow_up.png ..
AddIcon /путь/list_images.png .png .gif .ico .psd .tiff .jpg .jpeg
AddIcon /путь/list_blank.png ^^BLANKICON^^ иконка по умолчанию
AddIcon /путь/list_folder.png ^^DIRECTORY^^ иконка для папки
AddIcon /путь/bullet_arrow_up.png .. иконка для возврата
AddIcon /путь/list_images.png .png .gif .tiff .jpg .jpeg иконки для выбранных типов файлов. Одна иконка может обозначать разные расширения файлов, достаточно их просто перечислить

Что у нас находится в html шаблоне. dirlist_header.shtml (основная часть)

<!DOCTYPE html>
<html>
<head>
<title><!--#echo var="Request_URI" --></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/путь/style.css">
</head>

<body>
<div id="main">
<h1 class="location">Каталог: <!--#echo var="Request_URI" --></h1>

HTML код за исключением вставки

это путь к текущей директории, который отображается в тайтле и в теге h1 И заглушка страницы dirlist_footer.shtml

</div>
</body>
</html>

Все готово, остались стили к html шаблону, которые можно посмотреть в демонстрации