Szablon strony bez ramek
Jak umieścić menu serwisu w osobnym pliku, tak aby w przypadku modyfikacji nie trzeba było go zmieniać na każdej podstronie?
Wstęp
Załóżmy, że Twój serwis składa się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek aktualizacji serwisu 🙁
Rozwiązaniem tego problemu mogłyby być ramki lokalne (<iframe>...</iframe>). W takim przypadku teoretycznie można stworzyć jedną stronę index.html, na której umieszcza się menu i inne stałe elementy, a w miejsce właściwej treści strony wstawia się ramkę lokalną, gdzie wczytuje się zawartość poszczególnych podstron. Taki sposób niestety posiada poważną wadę: na pasku adresu przeglądarki wyświetla się cały czas taki sam adres. Powoduje to problemy z dodaniem wybranej podstrony do ulubionych oraz choćby przekazaniem wprost jej adresu znajomemu. Ponadto odświeżenie takiej strony zawsze powoduje powrót na stronę główną serwisu.
Istnieje jednak alternatywny sposób, który nie posiada tych wad. Z każdego szkieletu strony można wydzielić powtarzające się fragmenty w postaci nagłówka oraz stopki szablonu. Na przykład, jeśli Twoja strona główna wygląda tak:
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Tytuł strony</title> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul> Właściwa zawartość strony... </body> </html>
Kolorem czerwonym zaznaczono nagłówek szablonu (jak widać nie jest to wprost odpowiednik nagłówka dokumentu - <head>...</head>), a niebieskim - stopkę szablonu. Ponadto na zielono oznaczony został fragment nagłówka, który powinien być różny na każdej podstronie - każdy dokument powinien posiadać swój osobny tytuł. Wstawienie tego samego tytułu na wszystkich podstronach to bardzo zły pomysł, ponieważ jest niewygodne dla użytkownika (tytuł dokumentu wyświetla się na belce tytułowej przeglądarki internetowej) i niekorzystnie wpływa na pozycję serwisu w wyszukiwarkach sieciowych. Oczywiście oprócz tytułu w tej części nagłówka można umieścić inne elementy, które powinny być różne na każdej podstronie. Może, a nawet powinien, to być np. opis zawartości strony - różne wartości tego znacznika w każdym dokumencie również mogą przyczynić się do poprawienia pozycji serwisu w wyszukiwarkach.
Koncepcja jest taka, aby nagłówek i stopkę szablonu zapisać w osobnych plikach. Dzięki temu dodanie nowego linka do menu nawigacyjnego lub jakakolwiek inna zmiana w powtarzających się elementach strony, będzie wymagała modyfikacji tylko jednego lub dwóch plików, a zmiany będą widoczne od razu na wszystkich podstronach. Czy coś takiego w ogóle jest możliwe? W czystym języku HTML raczej nie, ale z pomocą przychodzą języki skryptowe obsługiwane po stronie serwera, np. PHP lub SSI. Bardziej popularnym, a zarazem dającym zdecydowanie większe możliwości, jest PHP. Niestety nie wszystkie serwery obsługują ten język, dlatego przedstawione zostanie również identyczne rozwiązanie oparte o SSI.
Obsługa skryptów PHP oraz SSI wymaga specjalnej konfiguracji serwera WWW. Włączyć ich obsługę może tylko administrator serwera. O tym, czy Twój serwer WWW obsługuje PHP lub SSI możesz się zwykle przekonać odwiedzając stronę domową danego serwera lub kontaktując się z administratorem serwera. Możesz też po prostu przetestować bezpośrednio na serwerze przedstawione tutaj skrypty - jeżeli zadziałają, o nic nie musisz się już martwić.
Ponadto zwracam uwagę, że skrypty PHP ani SSI nie będą działały na Twoim dysku lokalnym. Działanie będzie widoczne dopiero po wprowadzeniu strony na serwer WWW, o ile obsługuje tego rodzaju skrypty.
Szablon PHP
W swoim edytorze HTML utwórz nowy plik i wklej do niego zawartość nagłówka szablonu, a następnie zapisz w katalogu głównym konta WWW pod nazwą head.php. Dla przedstawionego wcześniej przykładu, w pliku tym powinna się znaleźć następująca zawartość:
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul>
Zwróć uwagę na wyróżniony fragment. Stanowi on tę część nagłówka, która powinna być różna na każdej podstronie. W naszym przypadku będzie to po prostu: <title>Tytuł strony</title>. Musisz wyciąć z nagłówka wszystkie takie elementy i zastąpić je jednym specjalnym kodem.
Następnie w analogiczny sposób utwórz drugi plik - foot.php - również zapisz go w głównym katalogu konta WWW:
</body> </html>
Mamy już nagłówek oraz stopkę szablonu zapisane w osobnych plikach. Nagłówek zawiera m.in. całe menu nawigacyjne, więc jeśli w przyszłości będzie trzeba dodać w nim nowy link, wystarczy zmodyfikować tylko ten jeden plik. Aby było to jednak możliwe, wszystkie podstrony serwisu trzeba tworzyć w specjalny sposób. Z każdej z nich wydzielamy właściwą zawartość. Może być to po prostu treść tekstowa, prawdopodobnie ze znacznikami formatującymi, takimi jak pogrubienie lub pochylenie, akapity itp. Ważne jest, aby do plików head.php i foot.php wydzielić jak największy fragment kodu źródłowego - ten, który powtarza się na wszystkich podstronach serwisu.
Aby wykorzystać szablon PHP, wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.php, a nie *.html, czyli np. podstrona.php. Plik strony głównej serwisu musi się nazywać index.php, a nie index.html ani index.htm.
Każdy plik podstrony musi mieć następującą postać (np. podstrona.php):
<?php include $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?> Właściwa zawartość strony... <?php include $_SERVER['DOCUMENT_ROOT'].'/foot.php'; ?>
Zwróć uwagę, że nie umieszcza się już tutaj nagłówka ani stopki szablonu, ponieważ zostały one zapisane w osobnych plikach. Wystarczy tylko wstawić odwołanie do tych plików - w powyższym kodzie odpowiednie fragmenty zostały wyróżnione. W szczególności na takich podstronach nie wstawia się deklaracji strony kodowej, ale koniecznie należy zadbać, aby treść była zapisana przy użyciu takiego samego kodowania znaków, jak strona kodowa zapisana w pliku head.php (UTF-8). Edytory HTML pozwalają wybrać kodowanie znaków w pliku bez potrzeby wstawiania deklaracji <meta>. Zwracam uwagę, że w ten sam sposób należy przygotować stronę główną serwisu, czyli plik index.php.
Jeżeli ustawisz nieprawidłowe kodowanie znaków, po wyświetleniu strony w przeglądarce internetowej polskie znaki diakrytyczne mogą się nie pojawić.
Ostatnim krokiem będzie przygotowanie różniącego się kodu nagłówkowego. W naszym przykładzie będzie to znacznik <title>...</title> z tytułem poszczególnych podstron. Nie można go po prostu wstawić w pliku head.php, ponieważ wtedy byłby identyczny na wszystkich podstronach, a zależy nam na tym, aby tak nie było. Każdy dokument podstrony musi posiadać odpowiadający sobie plik z różniącym się kodem nagłówkowym. Plik ten musi znajdować się w tym samym katalogu co podstrona i nazywać się identycznie, tylko do nazwy trzeba na końcu dodać przyrostek .html. Przykładowo: dokument podstrona.php musi posiadać w tym samym katalogu plik podstrona.php.html, którego zawartość może być następująca:
<title>Tytuł strony</title>
UWAGA!
Jeżeli zapomnisz utworzyć takiego pliku albo pomylisz jego nazwę, w szablonie strony wyświetlą się błędy, a nawet w ogóle może się on nie wyświetlić.
To już koniec. W tej chwili możesz wprowadzić wszystkie dokumenty na serwer. Nie zapomnij, że pliki head.php i foot.php należy umieścić w głównym katalogu publicznym konta WWW, czyli w tym samym miejscu co strona główna, a sama strona główna musi się nazywać index.php, a nie index.html. Po wprowadzeniu wszystkich plików na konto FTP, możesz już wpisać w dowolnej przeglądarce internetowej adres strony i sprawdzić, czy skrypt szablonu działa prawidłowo. Jeżeli skrypt nie działa, a masz stuprocentową pewność, że wszystko zostało wykonane prawidłowo (radzę to sprawdzić), tzn. na ekranie nie wyświetlają się żadne komunikaty błędów (ang. error) ani ostrzeżeń (ang. warning), spróbuj skorzystać z szablonu SSI, przedstawionego w następnym podpunkcie.
Szablon SSI
Szablon SSI tworzy się analogicznie jak PHP. Różnice pojawiają się tylko w nazwach rozszerzeń plików oraz poleceniach dołączających pliki nagłówka i stopki szablonu. Poniżej przedstawiony zostanie tylko skrócony opis, a po szczegóły odsyłam do opisu szablonu PHP.
W katalogu głównym konta WWW umieść plik head.shtml, w którym wstawiamy powtarzający się kod nagłówkowy szablonu:
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <!--#include virtual="${SCRIPT_NAME}.html" --> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul>
Następnie w analogiczny sposób utwórz drugi plik - foot.shtml - również zapisz go w głównym katalogu konta WWW:
</body> </html>
Aby wykorzystać szablon SSI, wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.shtml, a nie *.html, czyli np. podstrona.shtml. Plik strony głównej serwisu musi się nazywać index.shtml, a nie index.html ani index.htm.
Każdy plik podstrony musi mieć następującą postać (np. podstrona.shtml):
<!--#include virtual="/head.shtml" --> Właściwa zawartość strony... <!--#include virtual="/foot.shtml" -->
Pamiętaj o ustawieniu w edytorze HTML odpowiedniej strony kodowej, aby polskie znaki diakrytyczne zostały prawidłowo zapisane!
Każdy dokument podstrony musi posiadać odpowiadający sobie plik z różniącym się kodem nagłówkowym. Plik ten musi znajdować się w tym samym katalogu co podstrona i nazywać się identycznie, tylko do nazwy trzeba na końcu dodać przyrostek .html. Przykładowo: dokument podstrona.shtml musi posiadać w tym samym katalogu plik podstrona.shtml.html, którego zawartość może być następująca:
<title>Tytuł strony</title>
UWAGA!
Jeżeli zapomnisz utworzyć takiego pliku albo pomylisz jego nazwę, w szablonie strony wyświetlą się błędy, a nawet w ogóle może się on nie wyświetlić.