Fancy Indexing

19.02.2012 Artykuły Fancy indexingApacheHTTPd

Najprostszą metodą jest skorzystanie z funkcji, która nazywa się „fancy indexing”. Cóż to takiego? Najprościej mówiąc jest to funkcjonalność HTTPd pozwalająca na skonfigurowanie standardowego generatora listingów katalogu. Pozwala ona na dodanie ikon przy nazwach plików umożliwiających szybszą identyfikację zawartości czy dodanie własnej otoczki HTML. Ta druga opcja jest szczególnie przydatna ponieważ pozwala zagnieździć również CSS, co ułatwi ostylowanie całego listingu. Popatrzmy na przykład ze strony pliki.pidpawel.eu:

.htaccess:

AddDefaultCharset UTF-8

# FancyIndexing
IndexOptions FancyIndexing
# Foldery na gorze, sortowanie z uwzglednieniem wielkosci znakow
IndexOptions FoldersFirst IgnoreCase XHTML NameWidth=*
# Wylacz dodawanie html do header i footer, lista jako tabela
IndexOptions SuppressHTMLPreamble SuppressRules HTMLTable
# Nie wyswietlaj opisow do plikow
IndexOptions SuppressDescription
IndexOptions IconHeight=22 IconWidth=22
IndexOptions Charset=UTF-8

# Wskaz pliki z naglowkiem i stopka
# Potrzebny / zeby dzialalo dla podkatalogow
HeaderName /includes/header.html
ReadmeName /includes/footer.html

# Ikonki
# Domyslna
DefaultIcon /includes/blank.png
# Katalogi
AddIcon /includes/directory.png ^^DIRECTORY^^

AddIcon /includes/binary.png .o .sh
AddIcon /includes/source_c.png .c
AddIcon /includes/source_cpp.png .cpp
AddIcon /includes/source_h.png .h
AddIcon /includes/source_java.png .class
AddIcon /includes/source_php.png .php .php5 .phps
AddIcon /includes/source_py.png .py .pyc
AddIcon /includes/tar.png .tar .zip .gz .tgz .arj
AddIcon /includes/wordprocessing.png .odf .odt .doc .docx

AddIconByType /includes/pdf.png application/pdf
AddIconByType /includes/html.png text/html
AddIconByType /includes/txt.png text/*
AddIconByType /includes/image.png image/*
AddIconByType /includes/video.png video/*
AddIconByType /includes/sound.png audio/*
AddIconByType /includes/.png /*

# Nie wyswietlaj katalogu z includami
IndexIgnore /includes

Jak widać na powyższym przykładzie dość dokładnie określiliśmy jak ma działać nasz generator. Teraz należy stworzyć pliki nagłówka i stopki potrzebne do poprawnego wygenerowania całości drzewa HTML.

Nagłówek i stopka

Zacznijmy od utworzenia katalogu includes w którym będą umieszczane wszystkie pliki potrzebne generatorowi. W tym katalogu należy umieścić:

  • header.html – nagłowek strony, zawierający część <head> w tym m.in. ewentualne odwołania do arkusza stylów, bądź definicji samego stylu jako takiego
  • footer.html – stopka strony, zamykająca drzewo HTML bądź zawierająca dodatkowe informacje (SEO, regulamin,…)
  • style.css – niewymagany plik, będący arkuszem stylu dla naszej strony
  • ikony dla każdego z typów pliku, ikonę katalogu i nierozpoznanego typu. W Internecie można znaleźć wiele zestawów ikon, które będą świetnie pasować i będą miały odpowiednią dla nas licencję
  • inne pliki – nie jest powiedziane, że listing musi byc statyczną stroną. W praktyce możemy umieścić w nim dowolną treść w tym JavaScript.

header.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset=utf-8 />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>(S)krypta</title>
    <link rel="stylesheet" href="/includes/style.css" type="text/css" />
    <style type="text/css">
        table{
            width: 100%;
        }
        th{
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #D6D6D6;
        }
        tr td:first-child{
            width: 22px;
            text-align: center;
        }
        tr:nth-child(even){
            background: #F7F7F7;
        }
        tr:hover td{
            background: yellow;
        }
        table tr:first-child{
            text-align: right;
        }
        table tr:first-child th:nth-child(2){
            text-align: left;
        }
    </style>
</head>
<body>
    <h1><a href="/">(S)krypta</a></h1>
        <article>

Jak widać kod zawiera tagi rozpocznające drzewo HTML (<html>), definicję całej sekcji <head> oraz początek sekcji <body>. Po tym kodzie zostanie automatycznie wstawiona tabela z zawartością katalogu.

footer.html

        </article>
        <footer>
            © 2012 by <a href="http://pidpawel.eu/">Pidpawel.eu</a>.
        </footer>
    </body>
</html>

Stopka jedynie kończy dokument HTML jako taki.

Zakończenie

Mam nadzieję, że przybliżyłem nieco możliwości modyfikacji listingów serwerów HTTP. Życzę owocnych eksperymentów!