Samouczek: dodawanie niestandardowego układu strony do witryny

Podczas tworzenia nowych stron sieci Web przy użyciu obszaru roboczego Strony można korzystać z różnych układów. W niektórych przypadkach może okazać się, że jest używany układ strony niestandardowej w celu wyświetlania informacji w określonym formacie lub użycia specjalistycznego interfejsu użytkownika.

W tym samouczku powiesz się, jak utworzyć układ strony niestandardowej przy użyciu Liquid.

Naszym przykładowym scenariuszem jest zbudowanie prostego, dwukolumnowego szablonu, którego używa menu witryny głównej jako nawigacji po lewej stronie, zawartością strony po prawej.

Oto następujące kroki i zasoby, które zostaną utworzone w celu zapewnienia niestandardowego układu strony:

• Utworzymy wspólny podstawowy szablon sieci Web z kodem niestandardowym, aby ustanowić podstawowy układ strony.
• Utworzymy drugi szablon sieci Web z dodatkowym kodem w celu zademonstruje funkcje szablonów sieci Web.
• Zostanie również utworzony rekord szablonu strony odwołujący się do szablonu sieci Web, który skonfiguruje sposób renderowania układu strony w witrynie.
• Na koniec zostanie utworzona strona sieci Web przy użyciu niestandardowego układu strony.

Wymagania wstępne

• Subskrypcja lub wersja próbna Power Pages. Pobierz bezpłatną wersję próbną Power Pages tutaj.
• Utworzono witrynę Power Pages. Tworzenie witryny programu Power Pages.
• Podstawowa wiedza na temat języka HTML i Liquid.

Krok 1: Utwórz szablon sieci Web i napisz kod szablonu Liquid

Najpierw utworzymy nasz Szablon sieci Web i napiszemy kod szablonu Liquid. Jest prawdopodobne iż ponownie wykorzystamy niektóre typowe elementy tego szablonu w przyszłych szablonach. Utworzymy więc wspólny szablon podstawowy, który rozszerzymy naszym konkretnym szablonem. Nasz szablon bazowy zapewni łącza do stron nadrzędnych, tytuł/nagłówek strony, a także zdefiniuje układ z dwoma kolumnami.

1. Przejdź do Power Pages.

2. W studio projektowym wybierz opcję ... a następnie wybierz opcję Zarządzanie portalami. Musisz użyć aplikacji Zarządzanie portalami, aby utworzyć rekord szablonu i wprowadzić kod niestandardowy.

   

3. W aplikacji do zarządzania portalami przewiń do sekcji Zawartość i wybierz Szablony internetowe.

4. Na ekranie Aktywne szablony internetowe wybierz pozycję Nowy.

5. Nadaj szablonowi sieci Web nazwę Układ dwóch kolumn.

   

6. W polu Źródło, wklej następujący kod.

   Układ z dwiema kolumnami (szablon sieci Web)

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. Wybierz pozycję Zapisz.

Krok 2: Utwórz nowy szablon sieci Web, który wykracza poza szablon bazowy

Utworzymy szablon sieci web, który będzie odczytywał rekord nawigacyjny ze skojarzonej strony sieci Web (zobacz niżej). Poszerzymy także szablon podstawowy utworzony w poprzednim kroku. Szablony sieci Web mogą służyć jako składniki, które można ponownie wykorzystać podczas tworzenia zaawansowanych witryn.

1. W aplikacji do zarządzania portalami przewiń do sekcji Zawartość i wybierz Szablony internetowe.

2. Na ekranie Aktywne szablony internetowe wybierz pozycję Nowy.

3. Nadaj nazwę szablonowi internetowemu Lewy układ nawigacji linków sieci Web.

   

   Lewy układ nawigacji linków sieci Web (szablon sieci Web)

   Należy zwrócić uwagę, w jaki sposób Liquid używa słowa kluczowego extends w celu uwzględnienia szablonu układu podstawowego.

   {% extends 'Two Column Layout' %}
   
   {% block sidebar %}
     {% assign weblinkset_id = page.adx_navigation.id %}
     {% if weblinkset_id %}
       {% assign nav = weblinks[page.adx_navigation.id] %}
       {% if nav %}
         <div class=list-group>
           {% for link in nav.weblinks %}
             <a class=list-group-item href={{ link.url }}>
               {{ link.name }}
             </a>
           {% endfor %}
         </div>
       {% endif %}
     {% endif %}
   {% endblock %}
   
   {% block content %}
     <div id="mainContent" class = "wrapper-body" role="main">
       {% include 'Page Copy' %}
     </div>
   {% endblock %}
   

Krok 3: Utwórz nowy szablon strony bazujący na szablonie sieci Web

W tym kroku zostanie utworzony nowy szablon strony bazujący na szablonie sieci Web utworzonym w poprzednim kroku. Szablon strony jest wymagany, aby niestandardowy układ strony stanowił opcję, którą można wybrać podczas tworzenia nowej strony sieci Web.

1. W aplikacji do zarządzania portalami przewiń do sekcji Witryna internetowa i wybierz Szablony strony.

2. Na ekranie Aktywne strony internetowe wybierz pozycję Nowy.

3. Wypełnij pola.

   Pole	Wartość
   Imię i nazwisko/nazwa	Wpisz nazwę.
   Witryna sieci web	Wybierz witrynę sieci Web, do której zostanie zastosowany motyw. Umieść kursor w polu i naciśnij klawisz Enter na klawiaturze, aby wyświetlić listę dostępnych opcji.
   Type	Wybierz Szablon internetowy
   Szablon sieci Web	Wybierz opcję Lewy układ nawigacji linków sieci Web (lub co najmniej jedną nazwę w szablonie sieci Web).
   Użyj nagłówka i stopki witryny internetowej	Zaznaczono.
   Domyślne	Usunięto zaznaczenie.
   Nazwa tabeli	Nie wybrano niczego.
   opis	Opis szablonu strony.

   

4. Wybierz pozycję Zapisz.

Krok 4: Utwórz stronę sieci Web, aby wyświetlić zawartość

1. W studio projektowym wybierz opcję Synchronizacja. W ten sposób w studio projektowym zostaną wprowadzone aktualizacje w aplikacji Zarządzanie portalami.

2. W obszarze roboczym Strony wybierz + strona.

3. W oknie dialogowym Dodaj stronę;

   1. Wprowadź w Nazwa strony
   2. Z Układów niestandardowych wybierz niestandardowy układ strony.
   3. Wybierz Dodaj.

   

4. Dodaj więcej zawartości do edytowalnej sekcji strony.

Dodatkowa konfiguracja strony

W tym przykładzie rekord nawigacyjny trzeba będzie połączyć ze stroną zawartości, aby kod niestandardowy był renderowany w menu po lewej stronie nawigacji.

1. W studio projektowym wybierz opcję ... a następnie wybierz opcję Zarządzanie portalami. Do dodania dodatkowej konfiguracji do strony użyj aplikacji Zarządzanie portalami.

2. W aplikacji do zarządzania portalami przewiń do sekcji Zawartość i wybierz Strony internetowe.

3. Znajdź i otwórz uprzednio utworzoną stronę w obszarze roboczym Strony. To spowoduje otwarcie głównej strony internetowej. Musisz wprowadzić nasze zmiany w pokrewnej stronie ze zlokalizowaną zawartością.

4. Przewiń w dół i w sekcji Zawartość lokalna wybierz stronę sieci Web zlokalizowanej zawartości.

   

   Uwaga

   Jeśli jest używanych wiele języków, należy zaktualizować każdą zlokalizowaną stronę.

5. Przejdź do sekcji Różne i wybierz zestaw łączy internetowych, który chcesz wyświetlić w polu Nawigacja.

   

6. Zapisz zmiany i wróć do studio projektowego.

7. Wybierz opcję Podgląd, a następnie Pulpit, aby wyświetlić niestandardową stronę z zaimplementowaną nawigacją po stronie.

   

Zobacz też

• Utwórz niestandardowy układ strony
• Omówienie języka Liquid