Красивый листинг файлов при помощи .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.
Вот как в итоге стал выглядеть список файлов:
Код в файлах dirlist_footer.shtml и dirlist_header.shtml тут надо наверное поменять местами.
Спасибо, поменял)
Спасибо за статью!
есть вопрос
хочу прикрутить к красивому листеру prettyPhoto. Чтобы можно было красиво просматривать фотки.
возможно ли редактировать a href который генерирует Apache
с вот такова
на такой
Андрей
В апаче вроде нет стандартных настроек для этого, но всегда можно поменять ссылки на лету с помощью jQuery, перед инициализацией prettyPhoto.
Спасибо! я так и сделал:
извиняюсь за кривые комментарии
Ничего, поправил
В коментах можно код вставлять с подсветкой.
А как сделать, чтобы страничка html была во всех директориях? У меня только на главной, а если перехожу в папку, то меняется на обычный. Спасибо)
Н
Нужно просто указывать абсолютный путь ко всем файлам в .htaccess, тогда будут работать и поддиректории:
https://mikanoshi.name/share/
На этой странице что-то случилось
Dmawzx писал:
Новая версия плагина для подсветки синтаксиса шалит