Aug 23 2013 at 16:05

Стилизованный листинг Apache

Invite pending

Веб-сервер Apache предоставляет неплохие возможности, для того, чтобы приукрасить стандартный листинг файлов. Модуль mod_autoindex обладает достаточным для стилизации количеством директив. Ниже я приведу несколько примеров и расскажу, как сделать приятный на вид листинг.

Структура html страницы листинга выглядит следующим образом:

<!-- Здесь начинается Header -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
	<head>
		<title>Index of /filеs</title>
		<!-- IndexStyleSheet "style.css" -->
		<!-- IndexHeadInsert "anything" -->
	</head>

	<body>
		<!-- HeaderName "header.html" -->
		<h1>Index of /filеs</h1><!-- Здесь заканчивается header -->

<!-- Здесь расположен список файлов -->
		
<!-- Здесь начинается Footer -->
		<address>Apache/2.2.22 (Ubuntu) Server at localhost Port 80</address>
	</body>
</html>

Данная структура поддается изменениям. Модуль mod_autoindex позволяет использовать свою разметку header и footer. Также вы можете вставить код подключения таблиц стилей (CSS) в стандартный header с помощью директивы IndexStyleSheet:

IndexStyleSheet "http://domain.com/css/bootstrap.css"

Советую использовать полный путь, чтобы не возникало проблем в других директориях.
В результате на странице листинга появится такой код:

<link rel="stylesheet" href="http://domain.com/css/bootstrap.css" type="text/css" />

Если этого недостаточно, можно заменить стандартную разметку header на свою с помощью директивы HeaderName:

HeaderName /includes/header.html

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



Если же вы хотите полностью заменить header, необходимо добавить параметр +SuppressHTMLPreamble директиве IndexOptions.

IndexOptions +SuppressHTMLPreamble


Теперь ваш код должен содержать тэги   , а также вы должны вручную подключить таблицы стилей в своем файле.



Для изменения footer`а необходимо добавить такую строчку в файл конфигурации apache:


ReadmeName /includes/footer.html




Рядом с названиями файлов располагаются пиктограммы, которые меняются в зависимости от расширения файла.

Вы можете указать Apache какие изображения использовать для определенных расширений с помощью директивы AddIcon

AddIcon /icons/image.png .jpg .png .bmp
AddIcon /icons/directory.png ^^DIRECTORY^^
DefaultIcon /icons/default.png




Свой код я вставил в файл /etc/apache2/sites-available/default

Посмотреть результат...
<Directory "/var/www/files">
	Options +Indexes # Разрешить просматривать файлы в данной директории
	IndexOptions +Charset=UTF-8 +IgnoreCase +FoldersFirst +XHTML +HTMLTable +SuppressRules +SuppressDescription
	IndexIgnore .htaccess # Не показывать файл .htaccess
	AddIcon /icons/folder-home.png ..
	AddIcon /icons/audio.png .aif .iff .m3u .m4a .mid .mp3 .mpa .ra .wav .wma
	...
	DefaultIcon /icons/default.png
	HeaderName /includes/header.html
	ReadmeName /includes/footer.html
	IndexStyleSheet "/apaxy/style.css"
</Directory>
...




IndexOptions


Я использовал следующие параметры для директивы IndexOptions:


+Charset (Меняет кодировку страницы)
+IgnoreCase (Сортировка без учёта регистра)
+FoldersFirst (Выводит сначала директории, затем остальные файлы)
+XHTML (Разрешает XHTML)
+HTMLTable (Выводит файлы в виде таблицы , иначе используются списки 

 +SuppressRules (Не использовать тэги  до и после списка файлов)

 +SuppressDescription (Не показывать столбец "Описание файла")





Таблицу стилей я использовал из проекта Apaxy. У меня получился вот такой результат:





Можно конечно сделать листинг с блэкджэком и барышнями навигацией на php, или например заменить структуру  на что-нибудь более удобное с помощью jQuery, как здесь:







Модуль mod_autoindex имеет больше директив, чем описано в статье, поэтому прилагаю ссылку на документацию:

Документация по mod_autoindex

На Хабрахабре я нашел только одно упоминание шестилетней давности о данных возможностях.

Tags:

Hubs:

Apache