Opetusohjelma: Mukautetun sivun asettelun lisääminen sivustoon

Kun luot uusia verkkosivuja Sivut-työtilan avulla, voit valita haluamasi sivuasettelut. Joissakin tapauksissa haluat ehkä luoda mukautetun sivuasettelun, joka näyttää tiedot tietyssä muodossa tai tarjoaa erikoistuneen käyttöliittymän.

Tässä opetusohjelmassa tutustutaan mukautetun sivuasettelun luomiseen Liquidin avulla.

Esimerkkiskenaariossa luodaan yksinkertainen kahden sarakkeen malli, jossa sivuston päävalikko on vasempana siirtymisruutuna ja sivun sisältöä oikealla.

Seuraavassa on seuraavat vaiheet ja resurssit, jotka luodaan mukautetun sivuasettelun luomiseksi:

• Luomme yhteisen perusverkkomallin mukautetulla koodilla sivun perusasettelun määrittämiseksi.
• Luodaan toinen verkkomalli, jossa on lisäkoodia, joka esittelee verkkomallien esimerkkiominaisuuksia.
• Luomme myös verkkomalliin viittaavan sivumallitietueen, joka määrittää, miten sivun asettelu hahmonnetaan sivustossa.
• Lopuksi luodaan verkkosivu mukautetun sivuasettelun avulla.

edellytykset

• Power Pages -tilaus tai -kokeiluversio. Hanki Power Pages -kokeiluversio täältä
• Power Pages-sivusto luotu. Power Pages -sivuston luominen
• HTML:n ja Liquidin perustietoja

Vaihe 1: Verkkomallin luominen ja Liquid-mallikoodin kirjoittaminen

Ensimmäiseksi luodaan verkkomalli ja kirjoitetaan Liquid-mallikoodi. Käytämme todennäköisesti joitakin mallin yleisiä osia tulevissa malleissa. Luomme siis yhteisen perusmallin, jota laajennetaan myöhemmin tietyllä mallilla. Perusmalli sisältää navigointipolun linkit ja sivun otsikon/ylätunnisteen sekä määrittää kahden sarakkeen asettelun.

1. Siirry kohteeseen Power Pages.

2. Valitse suunnitteluohjelmassa... ja valitse sitten portaalin hallinta. Luo verkkomallitietue portaalin hallintasovelluksella ja anna mukautettu koodi.

   

3. Vieritä portaalin hallintasovelluksessa osaan sisältö ja valitse Verkkomallit.

4. Valitse Aktiiviset WWW-mallit -näytössä Uusi.

5. Anna verkkomallille nimeksi Kaksisarakkeinen asettelu.

   

6. Liitä seuraava koodi Lähde-kenttään:

   <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. Valitse Tallenna.

Vaihe 2: Perusmallia laajentavan uuden verkkomallin luominen

Luomme verkkomallin, joka lukee siirtymistietueen liitetyltä verkkosivulta (lisätietoja on alla). Laajennamme myös edellisessä vaiheessa luotua perusmallia. WWW-malleja voidaan käyttää uudelleenkäytettävinä osina lisäsivustoja luotaessa.

1. Vieritä portaalin hallintasovelluksessa osaan sisältö ja valitse Verkkomallit.

2. Valitse Aktiiviset WWW-mallit -näytössä Uusi.

3. Anna verkkomallille nimeksi Verkkolinkkien vasen siirtymisruutu.

Verkkolinkkien vasemmanpuoleinen siirtymisosa (verkkomalli)

Huomaa, miten koodi liittyy perusasettelumalliin Liquidextends-avainsanan avulla.

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

Vaihe 3: Verkkomalliin perustuvan uuden verkkomallin sivunmallin luominen

Tässä vaiheessa luodaan uusi sivumalli, joka perustuu edellisessä vaiheessa luotuun verkkomalliin. Sivumallia tarvitaan, jotta mukautettu sivun asettelu on vaihtoehto, jonka voit valita uutta verkkosivua luotaessa.

1. Vieritä portaalin hallintasovelluksessa osaan Verkkosivu ja valitse Sivumallit.

2. Valitse Aktiiviset sivumallit -näytössä Uusi.

3. Täytä kentät:

   Field	Arvo
   Name	Kirjoita nimi.
   Verkkosivusto	Valitse verkkosivusto, jossa teemaa käytetään. Voit näyttää luettelon käytettävissä olevista vaihtoehdoista asettamalla kohdistimen kenttään ja painamalla näppäimistön Enter-näppäintä.
   Type	Valitse WWW-malli
   Verkkomalli	Valitse WWW-linkit, vasen siirtyminen (tai mikä tahansa www-mallin nimi).
   Käytä sivuston ylä- ja alatunnisteita	Merkitty valituksi.
   On oletusarvo	Valitsematon.
   Taulukon nimi	Ei valittuja.
   Description	Sivumallin kuvaus.

   

4. Valitse Tallenna.

Vaihe 4: Sisällön näyttävän verkkomallin luominen

1. Valitse suunnittelustudiossaSynkronoi. Tämä toiminto tuo Portal Management -sovelluksessa tehdyt päivitykset suunnittelustudioon.

2. Valitse Sivut-työtilassa + Sivu.

3. Lisää sivu -valintaikkunassa:

   1. Syötä Sivun nimi.
   2. Valitse mukautetuista asetteluista mukautettu sivun asettelu.
   3. Valitse Lisää.

   

4. Lisää lisää sisältöä sivun muokattavissa olevia osia varten.

Sivun lisämääritykset

Linkitä tässä esimerkissä siirtymistietue mukautetun koodin sisältösivulle, jotta vasemmanpuoleisen siirtymisruudun valikko hahmonnetaan.

1. Valitse suunnitteluohjelmassa... ja valitse sitten portaalin hallinta. Portaalin hallintasovelluksella voit lisätä sivulle määrityksiä.

2. Vieritä Portal Management -sovelluksessa osaan sisältö ja valitse verkkosivut.

3. Etsi ja avaa sivu, jonka loit aiemmin Sivut-työtilassa. Tämä avaa päätason verkkosivun. Tee muutoksia aiheeseen liittyvällä lokalisoidun sisällön sivulla.

4. Valitse Lokalisoitu sisältö -osassa lokalisoidun sisällön verkkosivu.

   

   Muistiinpano

   Jos käytössä on useita kieliä, päivitä kukin lokalisoitu sivu.

5. Siirry Muut-osaan ja valitse verkkolinkkijoukko, joka näytetään Siirtyminen-kentässä.

   

6. Tallenna tekemäsi muutokset ja palaa suunnittelustudioon.

7. Tarkastele mukautettua sivuasi reunan siirtymisruutuineen valitsemalla Esikatselu ja sitten Työpöytä.

   

Katso myös

• Mukautetun sivun asettelun luominen
• Liquid-yleiskatsaus