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

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

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



Начнём по-порядку. Заполняем .htaccess:

  1. RewriteEngine On

  2. RewriteBase /

  3. Options +Indexes

  4. Options +FollowSymLinks

 

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

  1. ErrorDocument 400 /error.shtml
  2. ErrorDocument 401 /error.shtml
  3. ErrorDocument 403 /error.shtml
  4. ErrorDocument 404 /error.shtml
  5. ErrorDocument 500 /error.shtml

 

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

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

 

Запрещаем обращение к .htaccess

  1. <IfModule mod_autoindex.c>
  2. IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* XHTML HTMLtable SuppressHTMLPreamble SuppressRules SuppressLastModified IconHeight=16 IconWidth=16
  3. IndexOrderDefault Ascending Name
  4. HeaderName dirlist_header.shtml
  5. ReadmeName dirlist_footer.shtml
  6. IndexIgnore error.shtml *.png *.css dirlist_header.shtml dirlist_footer.shtml cgi-bin favicon.ico .htaccess .ftpquota .DS_Store *.log *,v *,t .??* *~ *#
  7. </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. Исключение из списка файлов по имени и по маске.

 

  1. DefaultIcon /icons/bullet_black.png
  2. AddIcon /icons/folder.png ^^DIRECTORY^^
  3. AddIcon /icons/bullet_arrow_up.png ..
  4.  
  5. AddIcon /icons/deb16.png .deb
  6. AddIcon /icons/book_open.png .pdf
  7. AddIcon /icons/page_white_word.png .txt .doc .rtf .log .asc
  8. AddIcon /icons/picture.png .jpg .jpeg .jpe .png .gif .mpg .ico .psd
  9. AddIcon /icons/music.png .mp3 .wav .vox .wma .ra .ram .ogg .vqf .aac
  10. AddIcon /icons/film.png .mov .avi .wmv .mpeg
  11. AddIcon /icons/html.png .html .htm .shtm .shtml
  12. AddIcon /icons/xhtml.png .xhtml
  13. AddIcon /icons/css.png .css
  14. AddIcon /icons/script.png .php

 

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

 

  1. AddDescription "[<span class='description'>Go Back..</span>]" ..
  2. AddDescription "<span class='description'>Music/Sound File</span>" .mp3
  3.  
  4. AddDescription "<p class='description'>Play as a God of a tribe and defeat your enemies!</p>" AncientWar.deb
  5. AddDescription "<p class='description'>Bash.Org.Ru Viewer</p>" BashOr.deb
  6. AddDescription "<p class='description'>Fun spelling game!</p>" BeeSpelled.deb
  7.  
  8. AddDescription "<p class='description'>DEB package</p>" .deb

 

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

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

dirlist_header.shtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title><!--#echo var="Request_URI" --></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <link rel="stylesheet" type="text/css" href="/style.css" />
  7. <link rel="shortcut icon" href="/favicon.png" />
  8. </head>
  9. <body>
  10. <div id="wrap">
  11. <div id="main">
  12. <h1 class="location">Location: <!--#echo var="Request_URI" --></h1>
  13. <br />

 

dirlist_footer.shtml

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

 

style.css

  1. body {
  2. background-attachment: fixed;
  3. }
  4. #wrap {
  5. width:960px;
  6. margin:30px auto 0;
  7. }
  8. #main {
  9. width:900px;
  10. float:left;
  11. padding:10px 30px 0 30px;
  12. border:0px;
  13. }
  14. #tbl {
  15. border:1px dashed #555;
  16. padding: 0;
  17. }
  18. h1 {
  19. font: 2.0em Verdana, Georgia, serif;
  20. text-align:center;
  21. color:#787878;
  22. }
  23. h3.location {
  24. font-size:13px;
  25. font-weight: bold;
  26. margin:12px 0 30px;
  27. text-align:center;
  28. color:#4D4D4D;
  29. }
  30. a:link, a:visited {
  31. text-decoration: none;
  32. color: #aaa;
  33. }
  34. a:hover, a:active {
  35. text-decoration: none;
  36. color: #eee;
  37. border-bottom: 1px dashed #eee;
  38. }
  39. table {
  40. width:100%;
  41. margin:0;
  42. margin-bottom:10px;
  43. border:0;
  44. }
  45. tr {
  46. width:100%;
  47. padding:0;
  48. margin:0;
  49. }
  50. tr:nth-child(odd) {
  51. background: url(181818.png);
  52. }
  53. tr:nth-child(even) {
  54. background: url(222222.png);
  55. }
  56. tr:nth-child(odd):hover td, tr:nth-child(odd):active td, tr:nth-child(even):hover td, tr:nth-child(even):active td {
  57. color: #eee;
  58. }
  59. 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 {
  60. color: #eee;
  61. }
  62. th {
  63. display:none;
  64. }
  65. td {
  66. height:20px;
  67. padding:20px 10px 10px 20px;
  68. margin:0;
  69. }
  70. td:nth-child(1){
  71. width:16px;
  72. }
  73. hr {
  74. display:none;
  75. }
  76. .description {
  77. margin:0;
  78. padding-right:15px;
  79. text-align:left;
  80. }

 

Стоит отметить псевдокласс 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.

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