Crear un modelo de páxina personalizado

Artigo
03/02/2022
2 minutos de lectura

Neste exemplo, crearemos un modelo de páxina personalizada utilizando Liquid e un modelo de páxina que está baseado nin modelo web. Máis información: Almacenar contido de orixe utilizando modelos web. O noso obxectivo é crear un modelo simple de dúas columnas que utilice un conxunto de ligazóns web como navegación do lado esquerdo, co contido de páxinas á dereita.

Paso 1. Crear un modelo web e escribir o código de modelo de Liquid

En primeiro lugar, crearemos o noso modelo Web e escribiremos o código do modelo Liquid. Probablemente reutilicemos algúns elementos comúns deste modelo en modelos futuros. Logo, crearemos un modelo de base común que estenderemos co noso modelo específico. O noso modelo base fornecerá ligazóns de migas e o noso título ou cabeceira de páxina, e definirá o noso deseño dunha columna:

Deseño dunha columna de modelo web.

Suxestión

Obteña información acerca da herdanza de modelos utilizando as etiquetas de bloque e extensión: etiquetas de modelo

Deseño de dúas columnas (modelo 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>

Paso 2: Crear un novo modelo web que amplíe o noso modelo de deseño base

Utilice o conxunto de ligazóns web de navegación asociado á páxina actual para as nosas ligazóns de navegación para crear un novo modelo web que amplía o noso modelo de deseño base.

Deseño de navegación esquerda das ligazóns web do modelo web.

Suxestión

Familiarícese sobre como cargar conxuntos de ligazóns web utilizando o obxecto ligazóns web.

{% 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 class=page-copy>
    {{ page.adx_copy }}
  </div>
{% endblock %}

Paso 3: Crear un novo modelo de páxina baseado no modelo web

Neste paso, crearemos un novo modelo de páxina que estea baseado no modelo web que creamos no paso anterior.

Deseño de navegación esquerda das ligazóns web do modelo da páxina.

Paso 4: Crear unha páxina web para mostrar contido

Crea unha páxina web que utilice o noso modelo de páxina.
Vaia á páxina web de contidos localizados.
Vaia ao Varios e seleccione o conxunto de ligazóns web que quere mostrar na Navegación campo.
Cando vexas agora a túa páxina deberías ver a navegación lateral.