Jednostronicowa witryna w Drupalu

Tworzenie jednostronicowych witryn to nowy trend projektowania stron internetowych, który staje się coraz bardziej popularny. Jednostronicowe witryny można tworzyć, gdy strona nie posiada wiele podstron a całość ma się zawierać na stronie głównej, na której przeskakuje się między sekcjami. Jednostronicowe witryny można sprawdzają się jako strony prywatne np: CV, portfolio jak również dla niewielkich firm jako wizytówki.

Jeżeli szukasz rozwiązania na to, jak zrobić jednostronicową stronę www z nawigacją między sekcjami, Drupal jest do tego jak najlepszym rozwiązaniem. Drupal w wersji 7 wspiera moduły i szablony niezbędne do tworzenia jednostronicowych witryn. W tym artykule opisałem krok po kroku jak utworzyć jednostronicową witrynę na Drupalu.

Moduły niezbędne do utworzenia jednostronicowej strony WWW

Konfiguracja drupala

Najpierw należy pobrać i zainstalować dwa powyższe moduły. Moduł Libraries API wymagany jest do zainstalowania modułu Single Page Website zatem najpierw należy zainstalować Libraries API, po nim Single Page Website.

Po instalacji należy przejść do:  "Configuration > System > Site information > Front page > Default front page" w polskiej wersji językowej: "Konfiguracja > System > Podstawowe dane > Strona głowna > Domyślna strona główna".
W pole tekstowe domyślna strona główna należy wpisać single_page.

Jednostronicowa witryna w Drupalu

Po ustawieniu strony głównej należy ustawić szablon. W tym celu trzeba przejść do: "Configuration > System > Single Page Settings > Theme" w polskiej wersji językowej: "Konfiguracja > System > Single Page Settings > Skórka" i z listy rozwijanej wybrać szablon wspierający moduł Single Page Website (np. Bartik).

Jednostronicowa witryna w Drupalu

I to by było na tyle konfiguracji. Teraz należy określić, które strony mają być wyświetlane na jednostronicowej witrynie. Strony takie należy dodać do menu głównego przy czym należy pamiętać o tym że trzeba usunąć link prowadzący do strony głównej, znajdujący się w tym menu.

Bardziej przyjazne linki

W wprowadzeniu powyższych ustawień zauważyłem jeszcze jedną drobną niedogodność. Linki do podstron (sekcji) miały postać mojadomena.com/#single_page_anchor_1, mojadomena.com/#single_page_anchor_2 itd co jest niezbyt eleganckie. W związku z czym zmodyfikowałem pliki w module Single Page Website jak poniżej:

//w pliku "menu.js" zmieniłem dwie poniższe linie
//var anchor = $(this).text();
//this.href = basePath + pathPrefix + "#single_page_anchor_" + index;  
//na
var anchor = $(this).text().toLowerCase().replace(" ","_");
this.href = basePath + pathPrefix + "#" + anchor;
//w pliku single_page_website.module
//$anchor = 'single_page_anchor_' . $single_page_counter;
//$output .= '<a name="' . $anchor . '"></a><div id="'
//. $anchor . '" class="single_page_wrapper"><div class="single_page">';
//na
$anchor = str_replace(" ", "_", strtolower($item['#title']));
$output .= '<a name="' . $anchor . '"></a><div id="'
. $anchor . '" class="single_page_wrapper"><div class="single_page">';

Jaki efekt uzyskałem po powyższych zmianach? Zostawiam to do sprawdzenia bardziej dociekliwym czytelnikom.

Dodaj nowy komentarz

Filtrowany HTML

  • Adresy internetowe są automatycznie zamieniane w odnośniki, które można kliknąć.
  • Dozwolone znaczniki HTML: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Znaki końca linii i akapitu dodawane są automatycznie.
  • Tekstowe buźki będą zamieniane na ich graficzne odpowiedniki.

Czysty tekst

  • Znaczniki HTML niedozwolone.
  • Adresy internetowe są automatycznie zamieniane w odnośniki, które można kliknąć.
  • Znaki końca linii i akapitu dodawane są automatycznie.
  • Tekstowe buźki będą zamieniane na ich graficzne odpowiedniki.
CAPTCHA
W celu potwierdzenia, że jesteś człowiekiem, prosimy o wykonanie poniższego zadania
Target Image