Condividi tramite

Esercitazione: Aggiungere un layout di pagina personalizzato al sito

  • Articolo

Quando crei nuove pagine Web utilizzando l'area di lavoro Pagine, puoi scegliere tra i layout di pagina forniti. In alcuni casi potresti voler creare un layout di pagina personalizzato per visualizzare le informazioni in un determinato formato o per fornire un'interfaccia utente specializzata.

In questo tutorial imparerai come creare un layout di pagina personalizzato utilizzando Liquid.

Il nostro scenario di esempio consiste nel creare un modello a due colonne con il menu del sito principale come navigazione a sinistra con i contenuti della pagina a destra.

Di seguito sono riportati i passaggi e le risorse che verranno creati per fornire un layout di pagina personalizzato:

  • Creeremo un modello Web di base comune con codice personalizzato per stabilire il layout di pagina di base.
  • Creeremo un secondo modello web con codice aggiuntivo per dimostrare le funzionalità modulari dei modelli web.
  • Creeremo anche un record del modello di pagina che farà riferimento al modello Web che configurerà il modo in cui verrà visualizzato il layout di pagina sul sito.
  • Infine, creeremo una pagina web utilizzando il layout di pagina personalizzato.

Prerequisiti

Passaggio 1 - Creazione di un modello Web e scrittura del codice del modello Liquid

Innanzitutto, verrà creato il modello Web e verrà scritto il codice del modello Liquid. Riutilizzeremo alcuni elementi comuni di questo modello in modelli successivi. Pertanto, creeremo un modello di base comune che si estenderà con il nostro modello specifico. Il nostro modello di base conterrà i collegamenti degli elementi di navigazione e il titolo/intestazione della pagina e verrà definito un layout a due colonne.

  1. Vai a Power Pages.

  2. Nello studio di progettazione, scegli ... e quindi seleziona Gestione del portale. Dovrai utilizzare l'app Gestione del portale per creare un record di modello Web e immettere il codice personalizzato.

    Selezionando i puntini di sospensione si accede a un menu in cui è possibile scegliere l'app di gestione del portale.

  3. Nell'app Gestione del portale, scorri fino alla sezione Contenuto e seleziona Modelli Web.

  4. Dalla schermata Modelli Web attivi, seleziona Nuovo.

  5. Assegna il nome al modello web Layout a due colonne.

    Modello Web personalizzato per il layout a due colonne.

  6. Incolla il codice seguente nel campo Origine.

    Layout a due colonne (modello 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. Seleziona Salva.

Passaggio 2 - Creazione di un nuovo modello Web che estende il nostro modello layout di base

Creeremo un modello web che leggerà il record di navigazione dalla pagina web associata (vedi sotto). Estenderemo anche il modello di base che abbiamo creato nel passaggio precedente. I modelli Web possono essere utilizzati come componenti riutilizzabili durante la creazione di siti avanzati.

  1. Nell'app Gestione del portale, scorri fino alla sezione Contenuto e seleziona Modelli Web.

  2. Dalla schermata Modelli Web attivi, seleziona Nuovo.

  3. Assegna il nome al modello Web Spostamento a sinistra con collegamenti Web.

    Modello web personalizzato con navigazione e contenuto.

    Nota come il codice usa la parola chiave Liquid extends per incorporare il modello di layout di 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 %}

Passaggio 3 - Creazione di un nuovo modello di pagina basato sul modello Web

In questo passaggio, creeremo un nuovo modello di pagina basato sul modello Web creato nel passaggio precedente. Il modello di pagina è necessario affinché il nostro layout di pagina personalizzato sia un'opzione che puoi selezionare durante la creazione di una nuova pagina web.

  1. Nell'app Gestione del portale, scorri fino alla sezione Sito Web e seleziona Modelli di pagina.

  2. Dalla schermata Modelli di pagina attivi, seleziona Nuovo.

  3. Compilare i campi.

    Campo valore
    Name Digita un nome.
    Sito Web Seleziona il sito Web a cui verrà applicato il tema. Posiziona il cursore nel campo e premi INVIO sulla tastiera per visualizzare un elenco di opzioni disponibili.
    Type Scegli Modello Web
    Modello Web Seleziona Spostamento a sinistra con collegamenti Web (o come hai chiamato il tuo modello web).
    Usa intestazione e piè di pagina sito Web Selezionato.
    È predefinito Deselezionato.
    Nome tabella Nessuna selezione.
    Description Descrizione del modello di pagina.

    Layout spostamento a sinistra con collegamenti Web del modello di pagina.

  4. Seleziona Salva.

Passaggio 4 - Creazione di una pagina Web per visualizzare il contenuto

  1. In studio di progettazione, seleziona Sincronizza. Questo porterà gli aggiornamenti effettuati nell'app Gestione del portale allo studio di progettazione.

  2. Nell'area di lavoro Pagine seleziona + Pagina.

  3. Nella finestra di dialogo Aggiungi una pagina;

    1. Immetti il nome della pagina
    2. Da Layout personalizzati, seleziona il layout di pagina personalizzato.
    3. Selezionare Aggiungi.

    Seleziona il layout di pagina personalizzato quando crei una nuova pagina web.

  4. Aggiungi altro contenuto alle sezioni modificabili della pagina.

Configurazione di pagina aggiuntiva

In questo esempio, dovremo collegare il record di navigazione alla pagina dei contenuti affinché il nostro codice personalizzato esegua il rendering del menu sulla navigazione a sinistra.

  1. Nello studio di progettazione, scegli ... e quindi seleziona Gestione del portale. Utilizzerai l'app Gestione portale per aggiungere la configurazione alla tua pagina.

  2. Nell'app Gestione del portale, scorri fino alla sezione Contenuto e seleziona Pagine Web.

  3. Individua e apri la pagina che hai creato in precedenza nell'area di lavoro Pagine. Verrà aperta la pagine Web radice. Dovremo apportare le nostre modifiche nella relativa pagina dei contenuti localizzati.

  4. Scorri verso il basso e nella sezione Contenuti localizzati seleziona la pagina Web con il contenuto localizzato.

    Seleziona la pagina web con i contenuti localizzati.

    Nota

    Se hai più lingue disponibili, dovrai aggiornare ogni pagina localizzata.

  5. Vai alla sezione Varie e seleziona il set di collegamenti Web che vuoi visualizzare nel campo Esplorazione.

    Ricerca di esplorazione.

  6. Salva le modifiche e torna allo studio di progettazione.

  7. Seleziona Anteprima poi Desktop per visualizzare la tua pagina personalizzata con la navigazione laterale implementata.

    Pagina Web con il layout personalizzato.

Vedi anche