Opplæring: Legg til tilpasset sideoppsett på nettstedet

Når du oppretter nye websider ved hjelp av sidearbeidsområde, har du et utvalg av angitte sideoppsett. I noen tilfeller vil du kanskje opprette et egendefinert sideoppsett for å vise informasjon i et bestemt format eller for å gi et spesialisert brukergrensesnitt.

I denne opplæringen lærer du hvordan du oppretter et egendefinert sideoppsett ved hjelp av Liquid.

I dette eksempelscenarioet skal vi bygge en mal med to kolonner med menyen for hovednettsted som navigasjon på venstre side og sideinnholdet til høyre.

Her er følgende trinn og ressurser som opprettes for å gi et egendefinert sideoppsett:

• Vi oppretter en felles grunnleggende webmal med egendefinert kode for å etablere det grunnleggende sideoppsettet.
• Vi oppretter en ny webmal med tilleggskode for å demonstrere de modulære funksjonene i webmaler.
• Vi skal også opprette en sidemaloppføring som refererer til webmalen som konfigurerer hvordan sideoppsettet gjengis på nettstedet.
• Til slutt skal vi opprette en nettside ved hjelp av det egendefinerte sideoppsettet.

Forutsetning

• Et abonnement på eller en prøveversjon av Power Pages. Få en prøveversjon av Power Pages her.
• Et opprettet Power Pages-nettsted. Opprett et Power Pages-nettsted
• Grunnleggende kunnskaper om HTML og Liquid

Trinn 1: Opprett en webmal og skriv inn Liquid-malkoden

Opprett først nettmalen, og skriv koden for Liquid-mal. Du kommer sannsynligvis til å gjenbruke noen felleselementer i denne malen i fremtidige maler. Opprett derfor en felles basismal som du utvider med den spesifikke malen din. Basismalen din inneholder søkebanekoblinger og sidetittel/-topptekst og definerer oppsettet med to kolonner.

1. Gå til Power Pages.

2. Velg ... i utformingsstudioet, og velg deretter Portalbehandling. Bruk portalbehandlingsappen til å opprette en oppføring for nettmaler, og angi den egendefinerte koden.

   

3. I Portalbehandling-appen ruller du til Innhold-delen og velger Nettmaler.

4. Fra Aktive nettmaler-skjermen velger du Ny.

5. Gi nettmalen navnet Oppsett med to kolonner.

   

6. Lim inn følgende kode i Kilde-feltet:

   <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. Velg Lagre.

Trinn 2: Opprett en ny nettmal som utvider vår grunnleggende oppsettsmal

Vi oppretter en webmal som leser navigasjonsoppføringen fra den tilknyttede nettsiden (se nedenfor). Vi utvider også basismalen vi opprettet i forrige trinn. Webmaler kan brukes som komponenter som kan brukes om igjen når du oppretter avanserte områder.

1. I Portalbehandling-appen ruller du til Innhold-delen og velger Nettmaler.

2. Fra Aktive nettmaler-skjermen velger du Ny.

3. Gi nettmalen navnet Venstre navigasjon for nettkoblinger.

Venstre navigasjonsoppsett for webkoblinger (webmal)

Legg merke til hvordan koden bruker Liquid extends-nøkkelordetn til å inkorporere grunnleggende oppsettsmal.

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

Trinn 3: Opprett en ny sidemal basert på webmalen

I dette trinnet oppretter du en ny sidemal basert på nettmalen du opprettet i forrige trinn. Sidemalen er nødvendig for at det egendefinerte sideoppsettet skal være et alternativ du kan velge når du oppretter en ny webside.

1. I Portalbehandling-appen ruller du til Nettsted-delen og velger Sidemaler.

2. Velg Ny på skjermen Aktive sidemaler.

3. Fyll ut feltene:

   Felt	Verdi
   Name	Skriv inn et navn.
   Nettsted	Velg nettstedet som temaet brukes på. For å vise en liste over tilgjengelige alternativer, sett markøren i feltet og trykk enter på tastaturet.
   Type	Velg Nettmal
   Nettmal	Velg Venstre navigasjonsoppsett for webkoblinger (eller det du kalte webmalen).
   Bruk topptekst og bunntekst for nettsted	Avmerket.
   Er standard	Ikkke avmerket.
   Tabellnavn	Ingen er valgt.
   Bekrivelse	En beskrivelse av sidemalen.

   

4. Velg Lagre.

Trinn 4: Opprett webside for å vise innhold

1. Velg Synkroniser i utformingsstudioet. Denne handlingen sender oppdateringer som er gjort i Portalbehandling-appen, til utformingsstudioet.

2. Velg + Sider i Sider-arbeidsområdet.

3. I dialogboksen Legg til en side:

   1. Angi Sidenavn.
   2. Velg det egendefinerte sideoppsettet fra Egendefinert oppsett.
   3. Velg Legg til.

   

4. Legg til mer innhold i de redigerbare delene på siden.

Ekstra sidekonfigurasjon

I dette eksemplet kobler du navigasjonsoppføringen til innholdssiden for den egendefinerte koden for å gjengi menyen i venstre navigasjonsrute.

1. Velg ... i utformingsstudioet, og velg deretter Portalbehandling. Bruk portalbehandlingsappen til å legge til flere konfigurasjoner på siden.

2. I Portalbehandling-appen ruller du til Innhold-delen og velger Nettsider.

3. Finn og åpne siden du tidligere opprettet i arbeidsområdet Sider. Dette åpner rotwebsiden. Gjør endringer på den relaterte lokaliserte innholdssiden.

4. I delen Lokalisert innhold velger du nettsiden for lokalisert innhold.

   

   Notat

   Hvis du har klargjort flere språk, oppdaterer du hver lokaliserte side.

5. Gå til Diverse-delen, og velg nettkoblingssettet som skal vises, i Navigasjon-feltet.

   

6. Lagre endringene, og gå tilbake til utformingsstudioet.

7. Velg Forhåndsvisning og deretter Skrivebord for å vise den egendefinerte siden med sidenavigasjonen.

   

Se også

• Lage et egendefinert sideoppsett
• Oversikt over Liquid