Tutorial: afegir una disposició de pàgina personalitzada al vostre lloc

Quan creeu pàgines web noves amb l'espai de treball Pàgines, podeu triar entre disposicions de pàgina proporcionades. En alguns casos, és possible que vulgueu crear un disseny de pàgina personalitzat per mostrar informació en un format determinat o per proporcionar una interfície d'usuari especialitzada.

En aquest tutorial, aprendràs a crear un disseny de pàgina personalitzat amb Liquid.

El nostre exemple d'escenari és crear una plantilla de dues columnes amb el menú principal del lloc com a navegació a l'esquerra i el contingut de la pàgina a la dreta.

Aquests són els passos i els recursos següents que es creen per proporcionar un disseny de pàgina personalitzat:

• Crearem una plantilla web base comuna amb codi personalitzat per establir el disseny bàsic de la pàgina.
• Crearem una segona plantilla web amb codi addicional per donar a conèixer les característiques modulars de les plantilles web.
• També crearem un registre de plantilla de pàgina que faci referència a la plantilla web que configura com es representa el disseny de pàgina al lloc.
• Finalment, crearem una pàgina web amb el disseny de pàgina personalitzat.

Requisits previs

• Una prova de subscripció o gratuïta de Power Pages. Aconsegueix una Power Pages prova aquí
• Lloc de Power Pages creat. Crear un Power Pages lloc web
• Coneixements bàsics d'HTML i Liquid

Pas 1: crear una plantilla web i introduir el codi de plantilla de Liquid.

Primer, creeu la vostra plantilla web i escriviu el codi de la plantilla Liquid. És probable que reutilitzeu alguns elements comuns d'aquesta plantilla en futures plantilles. Per tant, creeu una plantilla base comuna que estengueu amb la vostra plantilla específica. La plantilla base proporciona enllaços de ruta de pa, el títol/capçalera de la pàgina i defineix el disseny de dues columnes.

1. Aneu al Power Pages.

2. A l'estudi de disseny, trieu ... i, a continuació, seleccioneu Administració del portal. Utilitzeu l'aplicació Administració del portal per crear un registre de plantilla web i introduïu el codi personalitzat.

   

3. A l'aplicació Administració del portal, desplaceu-vos a la secció Contingut i seleccioneu Pàgines web.

4. A la pantalla Plantilles web actives , seleccioneu Nova.

5. Anomeneu la plantilla web Disseny de dues columnes.

   

6. Enganxeu el codi següent al camp Font :

   <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. Seleccioneu Desa.

Pas 2: Crear una nova plantilla web que ampliï la plantilla de disseny

Estem creant una plantilla web que llegeix el registre de navegació de la pàgina web associada (vegeu més avall). També ampliem la plantilla base que vam crear en el pas anterior. Les plantilles web es poden utilitzar com a components reutilitzables en crear llocs avançats.

1. A l'aplicació Administració del portal, desplaceu-vos a la secció Contingut i seleccioneu Pàgines web.

2. A la pantalla Plantilles web actives , seleccioneu Nova.

3. Anomeneu la plantilla web Enllaços web Navegació esquerra.

Navegació esquerra dels enllaços (plantilla web)

Heu de tenir en compte com el codi utilitza la paraula clau extends de Liquid per incorporar la plantilla de disposició de base.

{% 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 %}

Pas 3: crear una plantilla de pàgina nova basada en una plantilla web

En aquest pas, creeu una plantilla de pàgina nova basada en la plantilla web creada al pas anterior. La plantilla de pàgina és necessària perquè el disseny de pàgina personalitzat sigui una opció que podeu seleccionar quan creeu una pàgina web nova.

1. A l'aplicació Administració del portal, desplaceu-vos a la secció Lloc web i seleccioneu Plantilles de pàgina.

2. A la pantalla Plantilles de pàgina actives , seleccioneu Crea.

3. Emplena els camps:

   Camp	Valor
   Nom	Escriviu un nom.
   Lloc web	Seleccioneu el lloc web al qual s'aplica el tema. Per mostrar una llista d'opcions disponibles, poseu el cursor al camp i premeu Retorn al teclat.
   Type	Trieu Plantilla web
   Plantilla web	Seleccioneu Navegació esquerra dels enllaços (o com voleu nomenar la plantilla web).
   Utilitza capçalera i peu de pàgina de lloc web	Marcat.
   Per defecte	Desmarcat.
   Nom de la taula	No hi ha res seleccionat.
   Descripció	Descripció de la plantilla de pàgina.

   

4. Seleccioneu Desa.

Pas 4: Crear una pàgina web per mostrar contingut

1. A l'estudi dedisseny, seleccioneu Sincronitza. Aquesta acció porta les actualitzacions fetes a l'aplicació Administració del portal a l'estudi de disseny.

2. A l'àrea de treball Pàgines, seleccioneu + Pàgina.

3. Al diàleg Afegeix una pàgina :

   1. Introduïu el nom de la pàgina.
   2. A les Disposicions personalitzades, seleccioneu la disposició de pàgina personalitzada.
   3. Seleccioneu Afegeix.

   

4. Afegiu més contingut a les seccions editables de la pàgina.

Configuració de pàgina addicional

En aquest exemple, enllaçeu el registre de navegació a la pàgina de contingut del codi personalitzat per representar el menú de la navegació esquerra.

1. A l'estudi de disseny, trieu ... i, a continuació, seleccioneu Administració del portal. Utilitzeu l'aplicació Administració del portal per afegir més configuracions a la vostra pàgina.

2. A l'aplicació Administració del portal, desplaceu-vos fins a la secció Contingut i seleccioneu Pàgines web.

3. Localitzeu i obriu la pàgina que heu creat anteriorment a l'espai de treball Pàgines. S'obre la pàgina web arrel. Feu canvis a la pàgina de contingut localitzat relacionat.

4. A la secció Contingut localitzat, seleccioneu la pàgina web de contingut localitzat.

   

   Nota

   Si teniu diversos idiomes proveïts, actualitzeu cada pàgina localitzada.

5. Aneu a la secció Miscel·lània i seleccioneu l'enllaç web que es mostrarà al camp de navegació .

   

6. Deseu els canvis i torneu a l'estudi dedisseny.

7. Seleccioneu Previsualització i després Escriptori per veure la pàgina personalitzada amb la navegació lateral.

   

Consulteu també

• Crear un disseny de pàgina personalitzat
• Visió general del líquid