Hvordan lage et nettsted med TYPO3 - fra start til mål. Etappe 2 - lage sider og kort om ferdige design.

I den andre etappen skal vi fordype oss i hvordan TYPO3 faktisk lager nettsidene (render). I den sammenheng vil vi se på sider (pages), innhold (tt_content) og TypoScript. TypoScript er her nøkkelen. TypoScript er også grunnen til at mange faktisk detter av, dvs den bratte læringskurven. Men jeg skal vis at det ikke er så komplisert. Til slutt skal vi se litt på muligheten knyttet til ferdige design.

TYPO3 baserer seg i stor grad på innholdselementer som er knyttet til en spesifikk side. Tekst, bilde, tabeller, video osv lages som poster i tt_content (databasetabell). Hver post har en knytning til en side (tabellen pages). Den sterke knyttinga til sider gjelder i realieten alle typer innhold i TYPO3.

Så når man henter opp et TYPO3 nettsted i nettleseren, så hentes i realiteten en side, med det tilknytta innholdet. Og hvordan det blir henta og presentert bestemmer vi ved hjelp av TypoScript.

TypoScript på 5 minutter

TypoScript er et konfigurasjonsspråk, ikke et programmeringspråk. Med TypoScript kan vi definere hvordan innholdet vises, navigasjonen ser ut og virker osv. TypoScripft er limet som binder sammen innhold og design i TYPO3. Ja, TYPO3 skiller innhold og design i meget stor grad. TypoScript leser innhold i databasen, forbereder innholdet for visning og så lager nettsiden (TYPO3 frontend).

For å vise en nettside trenger vi kun å definer hvilket innhold som skal vises og hvordan det vil vises.

  • Hvilket innhold kontroller av backend - hvor sider og innhold lages
  • Hvordan er kontorllert av TypoScript

Med TypoScript definer vi hvordan innholdselementer vises på nettsidene. For eksemple så kan vi bruke TypoScript for å legge en <div>-tag til et element eller <h1>-tag til en overskrift, eller <header> rundt en topptekst.

Main "template" (rotmal)

Alle nettsider med TYPO3 må ha et såkalt "Main template" (rotmal). Denne malen vil være på hjemmesida eller "rotsida", og har avkrysset for "Rotnivå". Når en side vises så søker TYPO3 opp sidetreet for å finne denne denne "malen" og så lages sida på bakgrunn av denne - samt de endringer/tillegg som er gjort i maler på undersider.

TypoScript er bare et array

Internt, behandles TypoScript og lagres som PHP-array.

 

page = PAGE
page.10 = TEXT
page.10.value = Hello World
page.10.stdWrap.wrap = <h2>|</h2>

 

vil konverteres til dette

 

$data['page'] = 'PAGE';
$data['page.']['10'] = 'TEXT';
$data['page.']['10.']['value'] = 'Hello World';
$data['page.']['10.']['stdWrap.']['wrap'] = '<h2>|</h2>';

De første stegene

Den grunleggende gjengivelsen (rendering) defineres i "Setup" i "Main template". PAGE objektet er ansvarlig for gjengivelsen av en nettside. I vår nye hjemmeside som vi har satt opp så er "Setup" dette. Du får fram dette ved å klikke på Template i venstre meny, deretter på rotsiden i sidetreet og så på Setup.

 

page = PAGE
page.10 = TEXT
page.10.value (
   <div style="width: 800px; margin: 15% auto;">
      <div style="width: 300px;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 42"><path d="M60.2 14.4v27h-3.8v-27h-6.7v-3.3h17.1v3.3h-6.6zm20.2 12.9v14h-3.9v-14l-7.7-16.2h4.1l5.7 12.2 5.7-12.2h3.9l-7.8 16.2zm19.5 2.6h-3.6v11.4h-3.8V11.1s3.7-.3 7.3-.3c6.6 0 8.5 4.1 8.5 9.4 0 6.5-2.3 9.7-8.4 9.7m.4-16c-2.4 0-4.1.3-4.1.3v12.6h4.1c2.4 0 4.1-1.6 4.1-6.3 0-4.4-1-6.6-4.1-6.6m21.5 27.7c-7.1 0-9-5.2-9-15.8 0-10.2 1.9-15.1 9-15.1s9 4.9 9 15.1c.1 10.6-1.8 15.8-9 15.8m0-27.7c-3.9 0-5.2 2.6-5.2 12.1 0 9.3 1.3 12.4 5.2 12.4 3.9 0 5.2-3.1 5.2-12.4 0-9.4-1.3-12.1-5.2-12.1m19.9 27.7c-2.1 0-5.3-.6-5.7-.7v-3.1c1 .2 3.7.7 5.6.7 2.2 0 3.6-1.9 3.6-5.2 0-3.9-.6-6-3.7-6H138V24h3.1c3.5 0 3.7-3.6 3.7-5.3 0-3.4-1.1-4.8-3.2-4.8-1.9 0-4.1.5-5.3.7v-3.2c.5-.1 3-.7 5.2-.7 4.4 0 7 1.9 7 8.3 0 2.9-1 5.5-3.3 6.3 2.6.2 3.8 3.1 3.8 7.3 0 6.6-2.5 9-7.3 9"/><path fill="#FF8700" d="M31.7 28.8c-.6.2-1.1.2-1.7.2-5.2 0-12.9-18.2-12.9-24.3 0-2.2.5-3 1.3-3.6C12 1.9 4.3 4.2 1.9 7.2 1.3 8 1 9.1 1 10.6c0 9.5 10.1 31 17.3 31 3.3 0 8.8-5.4 13.4-12.8M28.4.5c6.6 0 13.2 1.1 13.2 4.8 0 7.6-4.8 16.7-7.2 16.7-4.4 0-9.9-12.1-9.9-18.2C24.5 1 25.6.5 28.4.5"/></svg>
      </div>
      <h4 style="font-family: sans-serif;">Welcome to a default website made with <a href="https://typo3.org">TYPO3</a></h4>
   </div>
)

page.100 =< styles.content.get

 

page = PAGE forteller at nå lage vi side. page.10 forteller at først kommer det vi har lagt inn under value, og så kommer page.100. page.100 bruker funksjonen styles.content.get. styles.content get er det samme som å be databasen liste ut de poster i tabellen tt_content som har pid lik denne siden.

Når det gjelder page.100 =< styles.content.get så legg merke til =<. Bruk av =, =<, og <. = betyr tilordne verdi, < betyr kopier og =< lage en referanse (link objektet).

Resultate vi se slik ut på selve nettsiden.

De neste stegene - legge til design, script osv

Med TypoScript kan vi også legge inn nødvendig CSS i header og nødvendige filer med JavaScript. Vi tenkte nå å ta i bruk Bootstrap til å lage en header, innhold og footer.

Både CSS og Javascript kan inkluderes fra eksterne kilder samt lagret på egen server, og man kan skrive CSS i selve setup om nødvendig. Jeg gjør det enkelt og inkluderer CSS og JS fra Bootstrap. TypoScript variablene som brukes er:

page.includeCSS, page.includeCSSLibs, page.includeJS, page.includeJSFooter osv

 

page = PAGE
page {
    includeCSSLibs.bootstrap = stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css
    includeCSSLibs.bootstrap.external = 1
    includeJSFooterlibs {
        jquery = code.jquery.com/jquery-3.3.1.slim.min.js
        jquery.external = 1
        jquery.forceOnTop = 1
        jquery.integrity = sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo
        popper = cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
        popper.external = 1
        popper.integrity = sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ
        bootstrap = stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js
        bootstrap.external = 1
        bootstrap.integrity = sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm
    }
}

 

Med denne koden vil vi få CSS i head og Javascript til slutt i body-taggen. Jquery, popper og bootstrap er bare intern navngivning - vi kunne like gjerne brukt 1, 2 og 3. external = 1 forteller at kilden er ekstern og integrity = 1 gir sikkerhet. forceOnTop = 1 medfører at jQuery koden blir tvunget til toppen.

 

Legge til menyer og innhold

Når vi så har klargjort for å å bruke Bootstrap så gjenstår bare å legge inn kode for å genere header/nav, innholdsområde og bunntekst (footer)

Vi fjerner den siste hakeparantesen i forrige kodebit og så legger vi inn følgende:

 

    # Vi lager en enkel header med nav 
    10 = COA
    10 {    
        # wrapper hele header
        wrap = <nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"> | </div></nav>
        # logo og navn
        10 = TEXT
        10.value = EriksVerden
        10.wrap = <a class="navbar-brand" href="#"> | </a> 
        # Her kunne vi også brukt
        # Lage hamburgemeny
        20 = TEXT
        20.value = <span class="navbar-toggler-icon"></span>
        20.wrap = <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | </button>
          # Så lager vi en
          30 = HMENU
          30 {
              wrap = <div class="collapse navbar-collapse" id="navbarSupportedContent"> | </div>
              1 = TMENU
                1 {
                    wrap = <ul class="navbar-nav mr-auto"> | </ul>
                        expAll = 1
                        noBlur = 1
                        NO = 1
                        NO {
                            wrapItemAndSub = <li class="nav-item"> | </li>
                            ATagParams = class="nav-link"
                        }
                        ACT < .NO
                        ACT {
                            wrapItemAndSub = <li class="nav-item active">|</li>
                        }
                        CUR < .ACT
                    }
                }
      }
      # Område for innhold
      20 = COA
      20 {
          wrap = <div class="container my-5"> | </div>
          10 =< styles.content.get
    }
    # Footer
    30 = COA
    30 {
        wrap = <footer class="text-muted bg-dark py-4"><div class="container"> | </div></footer>
        10 = TEXT
        10.value ( 
            <div style="width: 120px;">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 42"><path d="M60.2 14.4v27h-3.8v-27h-6.7v-3.3h17.1v3.3h-6.6zm20.2 12.9v14h-3.9v-14l-7.7-16.2h4.1l5.7 12.2 5.7-12.2h3.9l-7.8 16.2zm19.5 2.6h-3.6v11.4h-3.8V11.1s3.7-.3 7.3-.3c6.6 0 8.5 4.1 8.5 9.4 0 6.5-2.3 9.7-8.4 9.7m.4-16c-2.4 0-4.1.3-4.1.3v12.6h4.1c2.4 0 4.1-1.6 4.1-6.3 0-4.4-1-6.6-4.1-6.6m21.5 27.7c-7.1 0-9-5.2-9-15.8 0-10.2 1.9-15.1 9-15.1s9 4.9 9 15.1c.1 10.6-1.8 15.8-9 15.8m0-27.7c-3.9 0-5.2 2.6-5.2 12.1 0 9.3 1.3 12.4 5.2 12.4 3.9 0 5.2-3.1 5.2-12.4 0-9.4-1.3-12.1-5.2-12.1m19.9 27.7c-2.1 0-5.3-.6-5.7-.7v-3.1c1 .2 3.7.7 5.6.7 2.2 0 3.6-1.9 3.6-5.2 0-3.9-.6-6-3.7-6H138V24h3.1c3.5 0 3.7-3.6 3.7-5.3 0-3.4-1.1-4.8-3.2-4.8-1.9 0-4.1.5-5.3.7v-3.2c.5-.1 3-.7 5.2-.7 4.4 0 7 1.9 7 8.3 0 2.9-1 5.5-3.3 6.3 2.6.2 3.8 3.1 3.8 7.3 0 6.6-2.5 9-7.3 9"/><path fill="#FF8700" d="M31.7 28.8c-.6.2-1.1.2-1.7.2-5.2 0-12.9-18.2-12.9-24.3 0-2.2.5-3 1.3-3.6C12 1.9 4.3 4.2 1.9 7.2 1.3 8 1 9.1 1 10.6c0 9.5 10.1 31 17.3 31 3.3 0 8.8-5.4 13.4-12.8M28.4.5c6.6 0 13.2 1.1 13.2 4.8 0 7.6-4.8 16.7-7.2 16.7-4.4 0-9.9-12.1-9.9-18.2C24.5 1 25.6.5 28.4.5"/></svg>
                  </div>
                  <h4 class="text-white">Welcome to a default website made with <a href="https://typo3.org">TYPO3</a></h4>
        )
    }
}

 

Og resultatet vil se ut som dette.

Kort forklart

TypoScript er et omfattende område - og uten tvil noe av det som har gjort at TYPO3 oppfattes å ha en bratt læringskurve. Men forstår man at det primært er et "konfigurasjonsspråk" med muligheter, så blir det ofte litt enklere. Det er heller ikke alt man trenger å kunne.

Men det jeg har gjort er som følger;

  • Jeg har definert et "Page object" -> page = PAGE. Dette er ansvarlig for å "lage" sidene.
  • Til "Page object" har jeg lagt til "link" til CSS og JS (include)
  • Så har jeg lagt til et tre stk innholdsobject (Content Object) i form av COA - som står for content object arrays. 10, 20 og 30 forteller i hvilken rekkefølge de kommer. 10 er da topptekst, 20 innhold og 30 bunntekst.
  • I COA-et som danner header har jeg brukt 2 stk elemnter av typen TEXT og 1 stk av typen HMENY. Det siste lager en meny
  • I COA-et som danner innhold  har jeg koblet opp en innebygd funksjon som heter styles.content.get, og som lager side av alle innholdslementer på siden
  • I COA-et som danner bunntekst har jeg brukt et TEXT objekt.

Mer omfattende forklaring får man i TypoScript in 45 minutes.

Ferdige design

Wordpress m.fl. sin store styrke er ferdige design. I TYPO3-verdene er det ikke så mange, men noen finnes faktisk.

Grunnen til at det ikke finnes mange er nok at de fleste TYPO3 nettsider er basert på spesifikke design for den nettsida. Også at det er lite gevinst i mange tilfeller på å bruke "ferdig"-design.

Men for en oversikt - http://typo3-themes.org/

Men jg har faktisk tenkt å bruke neste artikkel til å se på to stk ferdige design - mest fordi de begge er glimrende utgangspunkt for egen tilpasning.