Deli z drugimi prek

Vadnica: Dodajanje postavitve strani po meri na spletno mesto

  • Članek

Ko ustvarite nove spletne strani z delovnim prostorom strani, imate na izbiro ponujene postavitve strani. V nekaterih primerih boste morda želeli ustvariti postavitev strani po meri za prikaz informacij v določeni obliki ali za zagotavljanje posebnega uporabniškega vmesnika.

V tej vadnici se boste naučili, kako ustvariti postavitev strani po meri z Liquid.

Naš vzorčni scenraij je ustvariti preprosto predlogo z dvema stolpcema, ki uporablja glavni meni spletnega mesta za krmarjenje na levi strani z vsebino strani na desni strani.

Tukaj so naslednji koraki in sredstva, ki bodo ustvarjena za zagotavljanje postavitve strani po meri:

  • Ustvarili bomo skupno osnovno spletno predlogo s kodo po meri za vzpostavitev osnovne postavitve strani.
  • Ustvarili bomo drugo spletno predlogo z dodatno kodo za predstavitev modularnih funkcij spletnih predlog.
  • Ustvarili bomo tudi zapis predloge strani, ki se bo skliceval na spletno predlogo, ki bo konfigurirala, kako bo postavitev strani upodobljena na spletnem mestu.
  • Nazadnje bomo ustvarili spletno stran s postavitvijo strani po meri.

Zahteve

1. korak: ustvarjanje spletne predloge in pisanje kode predloge Liquid

Najprej bomo ustvarili spletno predlogo in napisali kodo predloge »Liquid«. Nekatere skupne elemente te predloge bomo najverjetneje ponovno uporabili v prihodnjih predlogah. Ustvarili bomo torej skupno osnovno predlogo, ki jo bomo razširili z določeno predlogo. Naša osnovna predloga bo zagotavljala sledenje povezavam, naslov/glavo strani in določala postavitev z dvema stolpcema.

  1. Obiščite spletno mesto Power Pages.

  2. V oblikovalskem studiu izberite ... in nato izberite Upravljanje portala. Za ustvarjanje zapisa spletne predloge in vnos kode po meri boste morali uporabiti aplikacijo za upravljanje portala.

    Izbira elipse vas usmeri v meni, kjer lahko izberete aplikacijo za upravljanje portala.

  3. V aplikaciji za upravljanje portala se pomaknite na razdelek Vsebina in izberite možnost Spletne predloge.

  4. Na zaslonu Aktivne spletne predloge izberite Novo.

  5. Poimenujte spletno predlogo v Postavitev z dvema stolpcema.

    Spletna predloga po meri za postavitev z dvema stolpcema.

  6. V polje Vir prilepite naslednjo kodo.

    Postavitev v dva stolpca (spletna predloga)

    <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. Izberite možnost Shrani.

2. korak: ustvarjanje nove spletne predloge, ki razširja predlogo z osnovno postavitvijo

Ustvarili bomo spletno predlogo, ki bo prebrala zapis krmarjenja s povezane spletne strani (glejte spodaj). Prav tako bomo razširili osnovno predlogo, ki smo jo ustvarili v prejšnjem koraku. Spletne predloge lahko uporabite kot komponente za večkratno uporabo pri ustvarjanju naprednih spletnih mest.

  1. V aplikaciji za upravljanje portala se pomaknite na razdelek Vsebina in izberite možnost Spletne predloge.

  2. Na zaslonu Aktivne spletne predloge izberite Novo.

  3. Poimenujte spletno predlogo v Spletne povezave za krmarjenje na levi.

    Spletna predloga po meri s krmarjenjem in vsebino.

    Upoštevajte, kako koda uporablja ključno besedo Liquid extends za vključitev predloge z osnovno postavitvijo.

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

3. korak: ustvarjanje nove predloge strani, ki temelji na spletni predlogi

V tem koraku bomo ustvarili novo predlogo strani, ki temelji na spletni predlogi, ki smo jo ustvarili pri prejšnjem koraku. Predloga strani je potrebna, da bo naša postavitev strani po meri možnost, ki jo lahko izberete pri ustvarjanju nove spletne strani.

  1. V aplikaciji za upravljanje portala se pomaknite na razdelek Spletno mesto in izberite možnost Predloge strani.

  2. Na zaslonu Aktivne predloge strani izberite Novo.

  3. Izpolnite polja.

    Polje Vrednost
    Imenu Vnesite ime.
    Spletno mesto Izberite spletno mesto, za katero bo uporabljena tema. Kazalec postavite v polje in na tipkovnici pritisnite Enter, da se prikaže seznam razpoložljivih možnosti.
    Vnesi Izberite možnost Spletna predloga
    Spletna predloga Izberite Spletne povezave za krmarjenje na levi (ali kakor koli ste poimenovali svojo spletno predlogo).
    Uporabi glavo in nogo spletnega mesta Potrjeno.
    – privzeto Nepotrjeno.
    Ime tabele Nič ni izbrano.
    Opis Opis vaše predloge strani.

    Postavitev spletnih povezav predloge strani z levim krmarjenjem.

  4. Izberite možnost Shrani.

4. korak: ustvarjanje spletne strani za prikaz vsebine

  1. V oblikovalskem studiu izberite Sinhronizacija. To bo oblikovalskemu studiu prineslo posodobitve v aplikaciji za upravljanje portala.

  2. V delovnem prostoru strani izberite + stran.

  3. V dialogu Dodajanje strani:

    1. Vnesite ime strani
    2. S seznama Postavitev po meri izberite svojo postavitev strani po meri.
    3. Izberite Dodaj.

    Ko ustvarjate novo spletno stran, izberite postavitev strani po meri.

  4. Dodajte več vsebine v razdelke strani, ki jih je mogoče urejati.

Dodatna konfiguracija strani

V tem primeru bomo morali zapis krmarjenja povezati s stranjo z vsebino, da bo naša koda po meri upodobila meni krmarjenja na levi.

  1. V oblikovalskem studiu izberite ... in nato izberite Upravljanje portala. Za dodajanje dodatne konfiguracije svoji strani boste uporabili aplikacijo za upravljanje portala.

  2. V aplikaciji za upravljanje portala se pomaknite na razdelek Vsebina in izberite možnost Spletne strani.

  3. Poiščite in odprite stran, ki ste jo prej ustvarili v delovnem prostoru strani. Tako boste odprli korensko spletno stran. Spremembe bomo morali narediti na povezani strani z lokalizirano vsebino.

  4. Pomaknite se navzdol in v razdelku Lokalizirana vsebina izberite spletno stran z lokalizirano vsebino.

    Izberite stran z lokalizirano vsebino.

    opomba,

    Če imate na voljo več jezikov, boste morali posodobiti vsako lokalizirano stran.

  5. Pojdite v razdelek Razno in izberite nabor spletnih povezav, ki jih želite prikazati v polju Krmarjenje.

    Iskanje krmarjenja

  6. Shranite spremembe in se vrnite na oblikovalski studio.

  7. Izberite Predogled in potem Namizje za ogled strani po meri z implementiranim krmarjenjem ob strani.

    Spletna stran s postavitvijo po meri.

Glejte tudi