Stvaranje prilagođenog predloška stranice

U ovom primjeru, stvorit ćemo predložak prilagođene stranice uz pomoć platforme Liquid i predloška stranice temeljenom na web-predlošku. Dodatne informacije: Pohranjivanje izvornog sadržaja uz pomoć web-predložaka. Cilj nam je da izradimo jednostavan predložak s dva stupca koji koristi skup veza na web-mjesto kao navigacijsko područje slijeva, dok je sadržaj stranice zdesna.

Korak 1: Stvaranje web-predloška i pisanje koda za predložak na platformi Liquid

Prvo ćemo stvoriti web-predložak i zapisati kod predloška u jeziku Liquid. Vjerojatno ćemo ponovno upotrijebiti određene uobičajene elemente ovih predložaka u budućim predlošcima. Stoga ćemo stvoriti zajednički osnovni predložak koji ćemo zatim proširiti našim određenim predloškom. Naš osnovni predložak osigurava hijerarhijske veze i naslov/zaglavlje naše stranice te definira naš raspored u jednom stupcu:

Web-predložak za izgled s jednim stupcem.

Savjet

Pročitajte o nasljeđivanju predložaka uz pomoć blokova i proširenih oznaka: Oznake predložaka

Izgled s dva stupca (web-predložak)

<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>

Korak 2: Stvaranje novog web-predloška koji proširuje naš predložak osnovnog izgleda.

Uz pomoć navigacijskog skupa web-veza povezanih s trenutnom stranicom za naše navigacijske veze stvorite novi web-predložak koji proširuje naš predložak osnovnog izgleda.

Web-predložak za izgled s navigacijom web-veza s lijeve strane.

Savjet

Upoznajte se s učitavanjem skupa web-veza objekta web-veze.

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

Korak 3: Stvaranje novog predloška stranice temeljenog na web-predlošku

U ovom koraku ćemo stvoriti novi predložak stranice koji se temelji na web-predlošku koji smo stvorili u prethodnom koraku.

Predložak stranice za izgled s navigacijom web-veza s lijeve strane.

Korak 4: Stvaranje web-stranice za prikaz sadržaja

  1. Stvorite web-stranicu koja koristi naš predložak stranice.

    Web-stranica s navigacijom s lijeve strane.

  2. Idite na web-stranicu s lokaliziranim sadržajem.

    Stranica lokaliziranog sadržaja.

  3. Idite u odjeljak Razno i odaberite skup web-veza koji želite prikazati u polju Navigacija.

    Navigacijski pregled.

  4. Kada sada pregledavate stranicu, trebali biste vidjeti bočnu navigaciju.

    Lijeva navigacijska stranica.

Pogledajte

Stvaranje prilagođenog predloška stranice za renderiranje RSS sažetka sadržaja
Renderiranje popisa pridruženog trenutnoj stranici
Renderiranje zaglavlja web-mjesta i primarne navigacijske trake
Renderiranje do tri razine hijerarhije stranice uz pomoć hibridne navigacije