Красивый листинг файлов при помощи .htaccess

Скучный и обыденный список файлов, который выдаёт Apache, можно с помощью нехитрых манипуляций превратить в красиво оформленный.

Что имеется по умолчанию:



Начнём по-порядку. Заполняем .htaccess:
RewriteEngine On
RewriteBase /
Options +Indexes
Options +FollowSymLinks

1. Включаем модуль Апача для управления строками запросов.
2. Задаём базовый путь.
3. Включаем вывод листинга файлов.
4. Включаем обработку симлинков (SymLink, символические ссылки в файловой системе *nix систем).

ErrorDocument 400 /error.shtml
ErrorDocument 401 /error.shtml
ErrorDocument 403 /error.shtml
ErrorDocument 404 /error.shtml
ErrorDocument 500 /error.shtml

Задаём страницы для ошибок (не обязательно :)). Получение информации о запросе через SSI (файлы shtml) — оффтопик для данной темы.

<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 IconHeight=16 IconWidth=16
	IndexOrderDefault Ascending Name
	HeaderName dirlist_header.shtml
	ReadmeName dirlist_footer.shtml
	IndexIgnore error.shtml *.png *.css dirlist_header.shtml dirlist_footer.shtml cgi-bin favicon.ico .htaccess .ftpquota .DS_Store *.log *,v *,t .??* *~ *#
</IfModule>

1. Настройки модуля листинга (индексации) файлов.
2. IndexOptions — включение опций модуля. Мануал по всем доступным опциям.
IgnoreCase — игнорировать регистр файлов
FancyIndexing — включает другие опции для оформления листинга
FoldersFirst — каталоги отображать вверху списка
NameWidth=* — размер поля для имени файла, * — размер равен ширине имени файла, длинные имена не будут перенесены на новую строку
DescriptionWidth=* — то же для описания файла
XHTML — формат разметки страницы с листингом. Может быть и HTML
HTMLtable — обернуть список файлов в таблицу, для удобства применения стилей и управления колонками
SuppressHTMLPreamble — убирает стандартный хэдер и футер, чтобы можно было задать свои
SuppressRules — убирает горизонтальные линии разметки
SuppressDescription, SuppressLastModified, SuppressSize — убирают соответственно колонки описания файла, даты его модификации и размера
IconHeight=16 — высота иконки файла
IconWidth=16 — ширина иконки файла
IconsAreLinks — иконки имеют ссылку на файл
3. Сортировка по названию файла, по алфавиту.
4 и 5. Название файлов с кодом для хэдера и футера.
6. Исключение из списка файлов по имени и по маске.

DefaultIcon /icons/bullet_black.png
AddIcon /icons/folder.png ^^DIRECTORY^^
AddIcon /icons/bullet_arrow_up.png ..

AddIcon /icons/deb16.png .deb
AddIcon /icons/book_open.png .pdf
AddIcon /icons/page_white_word.png .txt .doc .rtf .log .asc
AddIcon /icons/picture.png .jpg .jpeg .jpe .png .gif .mpg .ico .psd
AddIcon /icons/music.png .mp3 .wav .vox .wma .ra .ram .ogg .vqf .aac
AddIcon /icons/film.png .mov .avi .wmv .mpeg
AddIcon /icons/html.png .html .htm .shtm .shtml
AddIcon /icons/xhtml.png .xhtml
AddIcon /icons/css.png .css
AddIcon /icons/script.png .php

Присвоение иконок переходу на уровень выше, каталогам и разным форматам файлов. Иконки для многих типов можно взять из набора SILK. Пано из всех SILK иконок (1 мб) для быстрого выбора.

AddDescription "[<span class='description'>Go Back..</span>]" ..
AddDescription "<span class='description'>Music/Sound File</span>" .mp3

AddDescription "<p class='description'>Play as a God of a tribe and defeat your enemies!</p>" AncientWar.deb
AddDescription "<p class='description'>Bash.Org.Ru Viewer</p>" BashOr.deb
AddDescription "<p class='description'>Fun spelling game!</p>" BeeSpelled.deb

AddDescription "<p class='description'>DEB package</p>" .deb

Присвоение описания конкретным файлам, каталогам и отдельным форматам файлов.

Создание страницы и стилей для списка файлов
Обычные страницы с разметкой XHTML и SSI вставкой текущего пути.

dirlist_header.shtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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" />
<link rel="shortcut icon" href="/favicon.png" />
</head>
<body>
<div id="wrap">
<div id="main">
<h1 class="location">Location: <!--#echo var="Request_URI" --></h1>
<br />

dirlist_footer.shtml

</div>
<br />
<p style="width:100%;font-size:10px;text-align:center;"><a href="http://www.AppDB.ru/">AppDB</a> © 2009-2015
<br />All Rights Reserved</p>
</div>
</div>
</body>
</html>

style.css

body {
	background-attachment: fixed;
}
#wrap {
	width:960px;
	margin:30px auto 0;
}
#main {
	width:900px;
	float:left;
	padding:10px 30px 0 30px;
	border:0px;
}
#tbl {
	border:1px dashed #555;
	padding: 0;
}
h1 {
	font: 2.0em Verdana, Georgia, serif;
	text-align:center;
	color:#787878;
}
h3.location {
	font-size:13px;
	font-weight: bold;
	margin:12px 0 30px;
	text-align:center;
	color:#4D4D4D;
}
a:link, a:visited {
	text-decoration: none;
	color: #aaa;
}
a:hover, a:active {
	text-decoration: none;
	color: #eee;
	border-bottom: 1px dashed #eee;
}
table {
	width:100%;
	margin:0;
	margin-bottom:10px;
	border:0;
}
tr {
	width:100%;
	padding:0;
	margin:0;
}
tr:nth-child(odd) {
	background: url(181818.png);
}
tr:nth-child(even) {
	background: url(222222.png);
}
tr:nth-child(odd):hover td, tr:nth-child(odd):active td, tr:nth-child(even):hover td, tr:nth-child(even):active td {
	color: #eee;
}
tr:nth-child(odd):hover td a, tr:nth-child(odd):active td a, tr:nth-child(even):hover td a, tr:nth-child(even):active td a {
	color: #eee;
}
th {
	display:none;
}
td {
	height:20px;
	padding:20px 10px 10px 20px;
	margin:0;
}
td:nth-child(1){
	width:16px;
}
hr {
	display:none;
}
.description {
	margin:0;
	padding-right:15px;
	text-align:left;
}

Стоит отметить псевдокласс CSS :nth-child(), он позволяет задать стиль для дочерних элементов. Удобно для разметки строк таблицы. Выдержка из описания псевдокласса:

элемент:nth-child(odd | even | <число> | <выражение>) {...}

odd - Все нечетные номера элементов
even - Все четные номера элементов
число - Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение - Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

Примеры XHTML и CSS файлов взяты с apt.appdb.ru.

Вот как в итоге стал выглядеть список файлов:

Тэги: Apache, css, file index, htaccess, SSI, xhtml, Апач, листинг файлов

Похожие посты

05 Авг 2010 в Вебмастеринг

11 комментариев

Nagual25 мая 2012 в 19:56

Код в файлах dirlist_footer.shtml и dirlist_header.shtml тут надо наверное поменять местами.

Цитировать
Ответить
Mikanoshi26 мая 2012 в 01:07

Спасибо, поменял)

Цитировать
Ответить
Андрей15 Окт 2012 в 21:59

Спасибо за статью!

есть вопрос
хочу прикрутить к красивому листеру prettyPhoto. Чтобы можно было красиво просматривать фотки.

возможно ли редактировать a href который генерирует Apache

с вот такова

AvataraFallout_02.jpg

на такой

AvataraFallout_02.jpg
Цитировать
Ответить
Mikanoshi17 Окт 2012 в 00:47

Андрей
В апаче вроде нет стандартных настроек для этого, но всегда можно поменять ссылки на лету с помощью jQuery, перед инициализацией prettyPhoto.

Цитировать
Ответить
Андрей17 Окт 2012 в 13:09

Спасибо! я так и сделал:

jQuery(document).ready(function(){
	var exi = /\.(jpg|png|gif)$/i;
	var exs = /\.(swf|mov|avi)$/i;
	$('a').each(function() {
		if (exi.test($(this).attr('href'))){ 
			$(this).attr('class','pretty_photo');
		}
		if (exs.test($(this).attr('href'))){ 
			var link = String($(this).attr('href'));
			var width = String(String($(this).attr('href')).match(/_\d{2,4}x/)).match(/\d{2,4}/);
			var height = String(String($(this).attr('href')).match(/x\d{2,4}./)).match(/\d{2,4}/);
			$(this).attr('href',link+'?width='+width+'&height='+height);
			$(this).attr('class','pretty_photo');
		}

	})
	
	$('.pretty_photo').prettyPhoto({
	animationSpeed: "normal", 
	padding: 40, 
	opacity: 0.35, 
	showTitle: true,
	social_tools:false,
	allowresize: true, 
	counter_separator_label: "/", 
	theme: "pp_default"}
	);
});
Цитировать
Ответить
Андрей17 Окт 2012 в 13:12

извиняюсь за кривые комментарии

Цитировать
Ответить
Mikanoshi18 Окт 2012 в 20:24

Ничего, поправил :-)
В коментах можно код вставлять с подсветкой.

Цитировать
Ответить
Н21 Мар 2015 в 08:07

А как сделать, чтобы страничка html была во всех директориях? У меня только на главной, а если перехожу в папку, то меняется на обычный. Спасибо)

Цитировать
Ответить
Mikanoshi21 Мар 2015 в 12:40

Н
Нужно просто указывать абсолютный путь ко всем файлам в .htaccess, тогда будут работать и поддиректории:
https://mikanoshi.name/share/

Цитировать
Ответить
Dmawzx24 Апр 2016 в 13:41

На этой странице что-то случилось

Цитировать
Ответить
Mikanoshi24 Апр 2016 в 19:54

Dmawzx писал:

На этой странице что-то случилось

Новая версия плагина для подсветки синтаксиса шалит :oops:

Цитировать
Ответить

Оставить комментарий

Оповещать о новых комментариях по RSS