Mens du har arbejdet dig gennem dette lange dokument kan det være du har spekuleret igen og igen - hvordan kan jeg ændre den grønne baggrundsfarve? Eller hvordan kan jeg sætte mit eget logo ind. Og skrifttyperne - jeg vil have Times, ikke Arial og Verdana.
Før vi ser på disse emner skal du have forståelse for noget helt fundamentalt i forhold til måden de fleste CMS'er virker: de adskiller indholdet fra præsentationen. Det betyder at sider og indhold gemmes i databasen uden at være knyttet sammen med farver, skriftttyper eller baggrunde. De informationer placeres i stedet i skabelonen og stilark som normalt gælder for hele webstedet når siderne vises. Derfor vil en enkelt ændring i skabelonen påvirke det generelle udseende for alle webstedets sider. Dette er en storartet og meget vigtig egenskab ved et CMS! Prøv bare at spørge folk der har prøvet at have et HTML-baseret websted med over 100 sider som skulle have et nyt design...
Statisk og dynamisk indhold
Kig på "FC Bigfeet"-webstedet:
Dynamiske dele: På dette websted er menuen (#1), sideoverskrifterne (#2) og "Last update"-delen (#4) indirekte dynamiske dele af siden. Det betyder at de skifter automatisk fra side til side. Vi kan ikke direkte påvirke disse objekter pr side. De er dynamisk programmerede dele af skabelonen.
Indholdsområdet (#3) er derimod en direkte dynamisk del af siden, da det er der det sidespecifikke indhold indsættes. Vi kan styre dette ved at tilføje, fjerne og omarrangere sideindholdselementer! Dette område er på ingen måde en del af skabelonen (bortset fra formatteringen med farver og skrifttyper) da vi kontrollerer det direkte med indholdselementer.
Statiske dele: Udover de dynamiske dele indeholder skabelonen altid det samme logo (#5), det samme baggrundsbillede (#6) og den samme baggrundsfarve (#7). Disse ting er også en del af skabelonen (ligesom de indirekte dynamiske dele), men de ændres ikke ved nogen handling. Hele tiden det samme på hver side.
Skabelonposter?
Hvordan implementerer TYPO3 så dette princip? Du kan læse information der går i dybden med den anbefalede tilgang til professionelle websteder i gennemgangen Modern Template Building. Dette er dog skrevet til folk der arbejder professionelt med webdesign sammen med udviklere, designere osv. Niveauet er altså lidt højere end det denne gennemgang prøver at ramme.
Hovedpointen er - skabelonposten. Dette er et kontrolelement som fortæller TYPO3 hvordan bestemte dele af sidetræet skal håndteres. Hvis du umiddelbart synes det lyder som en mærkværdig tilgang så er der jo ikke noget at gøre ved det - det er faktisk meget konsistent med hvad du allerede har lært og desuden giver det fin mening når du senere vil lave mange steder i samme sidetræ inklusive flere forskellige skabeloner osv.
Hvis du ser vores enkle FC Bigfeet-websted, så bemærk at rod-siden indeholder sådan en skabelonpost:
Lad os prøve at ændre nogle få ting i skabelonen, "NEW SITE, based on standard". Du skal blot redigere den:
Når det drejer sig om standardskabeloner er "Constants"-feltet ofte stedet hvor der skal ændres værdier. Constants indsættes bagefter i Setup-feltet og kan anvendes mange steder. En ændring i en constant kan altså betyde ændringer mange forskellige steder i skabelonens endelige TypoScript konfigurationskode.
Lad os prøve at tilføje en rød baggrundsfarve i menurammen (se overfor).
Efter at have gemt skabelonen, klik på "Tøm hele cachen" i "Admin Functions"-menuen:
Det skal du altid gøre hvis du redigerer direkte i skabeloner (men er ikke nødvendigt når du bruger Skabelon-modulet).
Resulatet bliver:
Du kan også lege med andre værdier!
Constant editor'en
En bedre måde at håndtere disse ændringer er at bruge Skabelon-modulet i visningen "Constant Editor":
Du har adgang til en masse muligheder her, der er visuelle forklaringer til de fleste og du kan vælge fra forskellige kategorier. Du kan også finde menubaggrundsfarverne listet her (kategorien "Basic"):
Bemærk hvordan dette egentlig blot er en guide som redigerer i constant'en "menu.bgCol" fra før!
På samme måde kan du let ændre og uploade billeder som skal bruges som logoer eller baggrunde:
Her kan vi ændre det nuværende baggrundsbillede til at være logo istedet (#1) og med "Gennemse"-knappen kan du hente et billede fra din harddisk og bruge det som nyt logo - og pludselig vil du have et websted for dit firma og ikke en fodboldklub!
Nå, der er ingen grund til at fortælle dig mere om disse faciliteter da de er ret indlysende og den eneste måde du kan blive fortrolig med dem er at bruge dem, lege med dem, se hvad der sker. Tag og gør det!
Konfiguration af mappen med frontend-brugere?
Kan du huske bemærkningen om den ændring i skabelonen der kræves for at frontend-brugerlogins kommer til at virke? Dette er stedet at tale om det.
Ser du, når login-formularen renderes skal den vide på hvilken side (sysFolder) den skal kigge efter brugere der kan logge ind. Det gør man ved at sætte en constant - "styles.content.loginform.pid" - til uid-værdien for sysFolder'en "Users".
Uid'en for sysFolder'en er "14":
Så vi behøver altså blot at sætte tallet "14" ind i dette felt:
Dette felt findes blandt de 64 værdier i CONTENT-kategorien i Constant Editor. Du kan selvfølgelig også sætte værdien manuelt i "Constants"-feltet.
Den bedste metode til redigering af en skabelons Setup- eller Constants-felt er egentlig at bruge visningen "Info/Modify". Her får du direkte adgang til felterne fra skabelon-databaseposten. Dette er en hjælp for udviklere som vil komme til at bruge dette meget:
(Bemærk at der er et link (#1) under menu-blokken som sender dig direkte til redigering af den samlede skabelonpost hvis du har brug for det).
I setup-feltet finder du nogle få linier:
Dette er naturligvis underlig kode for dig og det kræver da også en manual og noget baggrundsviden at få dem rigtig på plads! Så bare rolig.
Den første linie (#1) indsætter et andet oversigtskort end standard'en (som er ret kedelig), derefter konfigureres siden til at bruge et stilark (#2). Dette bruges af "mininews"-plugin'et som formateres v.hj.a. CSS (i modsætning til andre dele af denne standardskabelon som er fra dengang man primært brugte <font>-tags). Til sidst finder vi konfigurationen til newsletter-plugin'et. (#3). Dette er nødvendigt for at folk ikke behøvede at modtage en mail med et link før de kunne oprette et abonnement. Så sætter vi skabelonen op til dansk (#4) og Brugersporingen slås til (#5).
Dette var kun en kort beskrivelse. Husk at disse muligheder ikke taler for sig selv. Du får brug for mere viden fra forskellige kilder (som TSref) før du forstår dem helt. Indtil videre kan du blot konkludere at Setup-feltet tilsyneladende er stedet hvor man skal tilføje noget. Og det noget kaldes TypoScript!
Som en sidste bemærkning om Setup-feltet (for nu) vil jeg introducere Object Browser'en:
Dette værktøj viser objekt-træet af TypoScript fra Setup-feltet visuelt. Hvis du lagde mærke til TypoScript-linien til dansk sprogopsætning ("page.config.language = dk") kan du tydeligt se logikken i denne trævisning.
Bemærk at TypoScript ikke er et egentligt scripting sprog med kontrolstrukturer men snarere et deklarativt konfigurationssprog som laver et informationshierarki der bruges internt til at instruere skabelon-motoren i hvad den skal gøre og i hvilken rækkefølge - lidt på samme måde som registreringsdatabasen i Windows. Hvis TYPO3 har et scriptsprog er det PHP selv! Derfor er TypoScript ikke en ny proprietær teknologi som burde have været XSLT eller sådan noget i stedet - TypoScript er snarere et uundgåeligt - og i det tilfælde fremragende - konfigurationssprog der binder eksterne dele sammen (som indhold, skabeloner, PHP og XML eller hvad man kan forestille sig). Men OK, du bliver selvfølgelig nødt til at lære det. Der er bare ikke rigtig noget alternativ og det er til dels op til dig hvor meget du vil bruge TypoScript. Du kommer til at lære mere om dette gennem andre dokumenter.
Tilbage til arbejdet: Hvis du "Enable'r Object Links" (i bunden af siden) kan du endda ændre i værdierne fra denne storartede visning:
Klik på den egenskab du vil redigere:
Ændr værdien og gem:
Så let er det!
Men hvordan kunne du vide hvad denne mulighed betyder? Jo, du behøver stadig lidt mere baggrundsviden, men TS-guiden hjælper dig med syntaksen når du ved hvad du leder efter:
For "page.config"-objektet er der egenskaber som kan vises med TSreference-guiden:
I popup-vinduet kan du nu søge efter objektet som du har brug for referencen til. Det er her du skal vide hvad der hører til din specifikke objektside (i vores tilfælde "page.config"):
Og det næste billede viser dig meget belejligt egenskaberne.
Faktisk hentes informationerne direkte fra online-manualerne og kunne altså have været hentet på typo3.org. Kig blot på CONFIG-objektet i TSref.
TSref
TypoScript reference (TSref) er et meget brugt dokument fra samlingen af dokumenter som er en del af TYPO3. Den indeholder beskrivelserne af alle de TypoScript-objekter du kan bruge til at lave skabeloner i TYPO3. Det er den manual der fortæller dig, hvilket indhold du kan indtaste i Setup-feltet i skabelonposter.
Før du dykker ned i TSref så vær opmærksom på at det kun giver mening hvis du allerede ved hvad du leder efter! Det er en referenceliste over alle egenskaber. Hvis du ved hvilken egenskab du leder efter er den meget nyttig - ja, uerstattelig!
TypoScript by Example
En bedre måde at komme i gang på egen hånd er TypoScript by Example. Dette dokument indeholder en masse eksempler fremstillet som mini-gennemgange vedrørende TypoScript-relaterede emner.
I vores tilfælde er FC Bigfeet-skabelonen baseret på standardskabelonen "BUSINESS". Det er der alt det andet opsætning i object browser'en kommer fra!
Du kan denne struktur med "Template Analyzer"-visningen i Skabelon-modulet:
Alle "elementerne" i dette træ repræsenterer præfremstillet TypoScript-indhold til skabelonen! Når du ser på Setup- eller Constant-feltet i hovedskabelon-posten "NEW SITE, based on standard" (#1) og spekulerer over hvor alt det egentlige kommer fra - så har du svaret her. Det er blevet inkluderet på forhånd fra statiske skabeloner i fortolkeren.
Hvis du vil se indholdet af hvert element kan du blot klikke på titlen.
Statiske skabeloner (en: static templates)
Den statiske skabelon "styles.sitemap.gs" blev inkluderet for at få et pænt forgrenet oversigtskort på webstedet. Den statiske skabelon fil "Ext:da_newsletter_subscript..." blev inkluderet for at få opsætningen af nyhedsbrevstilmeldingen rigtigt på plads (se videoen). Slutteligt er den statiske skabelon "template; BUSINESS" (standardskabelon) det centrale element i udseendet af vores websted.
Alt dette kan redigeres i skabelonen. Gå til Liste-modulet og rediger det:
Tydeligvis indeholder "Include static"-feltet de statiske skabeloner som jeg fortalte om (#1 and #2) og "Include static (from extensions)" har en reference til den statiske skabelonsfil fra Nyhedsbrev-extension'en (#3). Afkrydsningsfelterne "Clear" og "Rootlevel" skal normalt kun være udfyldt (#4) i hovedskabeloner.
Statiske skabeloner bruges generelt ikke så meget i professionelle TYPO3-websteder. Det skyldes at sådanne websteder normalt er specialfremstillede og kræver særlig TypoScript kode. Statiske skabeloner indeholder generel TypoScript og det er meget brugbart men til en vis grad også begrænsende.
I faktisk alle skabeloner - også specielle designs - inkluderes der dog en statisk skabelon til rendering af sideindholdselementer. Den fremgangsmåde vælges fordi arbejdet med at lave skabeloner og renderingskode for alle de forskellige typer af indholdselementer er kæmpestort og derfor giver det virkelig mening at genbruge kode til det!
Skifte skabelon
Lad os prøve en anden standardskabelon end den der hedder "BUSINESS". Fjern BUSINESS-skabelonen fra "Include static"-feltet og tilføj CANDIDATE-skabelon i stedet:
Gem resultatet, klik på "Ryd hele cachen" og tjek webstedet:
Som du kan er indholdselementerne de samme, baggrundsfarven er den samme, stilarket til nyhedsteaserne er det samme - men skabelonen er anderledes! Det er det skabelonerne gør! De ændrer webstedets overordnede struktur. Så let er det at ændre designet for et 10-, 100- eller 1000-siders websted i TYPO3 - en enkelt ændring i en skabelon påvirker alle sider!
I den nye skabelon ser der ud til at være en ny facilitet som vi ikke havde før. Det er margin-kolonnen. Her kan der lægges indhold ind.
Side TSconfig
Først skal vi ændre "Side Tsconfig" indstillingen som afholder TYPO3 fra at vise end bare "Normal"-indholdskolonnen i sidemodulet. Rediger sidehovedet for rodsiden "FC Bigfeet":
Tilføj ",3" i listen som vist:
Dette fortæller Side-modulet at det skal vise både Normal (0) og Margin (3) indholdskolonnerne. Hvis du vil vide mere om mulige indstillinger, klik på "TS"-knappen til højre. I popup-vinduet skal du finde "mod.SHARED":
Dette viser dig egenskaben "colPos_list" inklusive en beskrivelse af hvad den gør. Det lader dig endda klikke på egenskaben og den bliver overført til Tsconfig-feltet.
Gem sidehovedet og gå til Side-modulet - nu ser du yderligere en indholdskolonne:
Prøv nu at tilføje et indholdselement her. Bare klik på "Nyt"-ikonet:
Vælg så et normalt "Tekst"-element og indtast noget indhold:
Bemærk indholdet i feltet "Kolonner" i de sekundære muligheder for "Type"-feltet - det har værdien "Margin". Det er lige præcist den indstilling der får dette indhold til at blive vist i Margin-kolonnen og ikke i Normal-kolonnen! Dette felt blev udfyldt før formularen blev genereret.
Tryk på "Gem og luk dokument"-knappen. Tilbage i Side-modulet kan du nu se det nye indhold nydeligt præsenteret i den højre kolonne som forventet:
Men det skulle også blive vist i højre position på webstedet, så tjek lige frontend'en også:
Og det var også tilfældet!
Forstå "Side TSconfig"
Nå, den lille ændring vi lavede i "TSConfig"-feltet for rodsiden var ret interessant. Det var en konfigurationskode der havde indflydelse på backenden's funktionalitet - i det særlige område af sidetræet. "Side TSConfig" er dermed et stærkt koncept som tillader dig at finjustere opførslen af moduler, Rich Text Editor'en og andre elementer. Syntaksen for koderne du indtaster er TypoScript-syntaks - den samme som bruges til skabelonerne. Den har dog ingenting at gøre med skabelonerne i frontend'en - kun konfigurationen af de interne faciliteter. Som du lige så - aktivering af en ekstra kolonne til indhold i Side-modulet!
Hvis du vil vide mere om egenskaberne for TSconfig kan du finde referencen for det på typo3.org. Den aktuelle valgmulighed er dokumenteret på denne side (se efter overskriften "Shared options for modules (mod.SHARED)").
Gennemse Side TSconfig
For at se side TSConfig-indstillingerne for en given position i sidetræet kan du bruge Info-modulet med visningen "Side TSConfig":
Som du kan se - samme slags træstruktur som i Object Browser'en.
Fortryd skabelonændringer
Før vi fortsætter vil vi lige sætte skabelonen til typen BUSINESS igen. Hvis du ikke har lavet nogen ændringer i skabelonen i mellemtiden kan vi let gøre dette blot ved at klikke på Fortryd-knappen - det vil gendanne postens forrige indhold i databasen. Vælg "Rediger" for skabelonen:
Tjek resultatet efter at skærmbilledet er blevet opdateret. Den forrige indstilling i "Include Static" skulle blive vist igen:
(Hvis det ikke er tilfældet for dig skal du blot lave ændringen manuelt).
Du kunne også lige ændre constant'en for baggrundsfarven i menuen (menu.bgCol) tilbage til #007000.
Mere info om Fortryd/Historik-faciliteten i TYPO3 er tilgængelig her.
TYPO3 giver mulighed for at lave ikke blot et websted men et ubegrænset antal af websteder i den samme database! Dette er en stærk mulighed der kaldes "multisite". Princippet er at et nyt websted kan starte fra enhver side i sidetræet. Startsiden (rodsiden) for et nyt websted indikeres overfor TYPO3 ved at indsætte en skabelon-post!
Hvis du syntes at skabelonposter var en underlig fremgangsmåde til fremstilling af skabeloner så skulle du tage og se hvorfor de er en meget effektivt løsning på dette problem - fordi skabelon-posten bliver et kontrolelement som du indsætter på en side for at starte nye websteder. Derfor, når du får brug for mere end et enkelt websted i sidetræet får du brug for et koncept som dette til at klare sagen!
Lad os prøve det i praksis:
Oprette et nyt område
Først skal du lave en ny side under den nuværende, tilføj så nogle få undersider. Dette skal være starten på et fanklub-websted:
"Fan club" er din nye rodside for dette sted. Prøv at se den:
Ikke så godt:
Hvorfor? Jo, svaret ligger i det princip jeg fortalte dig om før - vi har endnu ikke lavet en skabelon-post på rodsiden så TYPO3 kan vide at dette er rodsiden! Den letteste måde at klare dette på er at få gang i Skabelon-modulet, vælge "Info/Modify"-visningen og bruge guiden der:
Find en standardskabelon som du vil bruge som basis til dit nye websted:
Bekræft oprettelsen af den nye skabelon og gå til Liste-modulet for at tjekke at den nye skabelon eksisterer:
Nu kommer det interesante øjeblik - løste det problemet? Hop ud i frontend'en igen:
Det gjorde det! Siderne er selvfølgelig tomme da der ikke eksisterer noget indhold endnu. Skabelonen skal jo også konfigureres med "Constant Editor"'en med andre farver osv. Det bliver vores næste skridt.
Det er formentlig ikke en overraskelse for dig at side-id'en som vi sendte til browseren var "34" - id'en for siden fra webstedet. Hvilket af de to websteder vil så blive vist, hvis vi ikke sender en id? Svaret er den første - "FC Bigfeet"-sitet.
Hvis det er tilfældet, hvordan kan folk så nogensinde komme til at besøge vores nye sted? Læs videre...
Når du vil administrere flere websteder indeni din TYPO3-database skal du simpelthen sikre dig at de har hver deres domæne. Fx kunne "FC Bigfeet"-webstedet have domænet "www.fc-bigfeet.com" og fanklubbens websted kunne være "fanclub.fc-bigfeet.com" og også "www.fanclub.fc-bigfeet.com". Udfordringen nu er så at sikre at folk får det rigtige at se når de går ind på det rigtige domæne!
Dette er en proces med tre skridt:
Sikr dig at DNS'en for alle domænerne peger på din webserver (trivielt, non-TYPO3-relateret emne)
Konfigurer din webserver så den dirigerer alle forespørgsler for de tre domæner til mappen med TYPO3-webstedet (.../quickstart/) - nu vil et besøg til ethvert af de tre domæner ende på "FC Bigfeet"-webstedet.
Til sidst skal du lave en domæne-post for hvert domæne som skal ende på "Fan Club"-webstedet.
Dette gøres ved at tilføje et nyt element til rodsiden "Fan Club":
Indtast så hoveddomænenavnet:
Gem posten.
Lav endnu en. Denne gang med det alternative domæne "www.fanclub.fc-bigfeet.com". Da det grundlæggende er et domæne vi bruger for en "sikkerheds skyld" vil vi have det til at omdirigere til "fanclub.fc-bigfeet.com"-domænet. Dette gøres sådan her:
Gem og se siden i Liste-modulet:
De to poster dukker nydeligt op i Liste-modulsvisningen af "Fan club"-sideelementerne. Hvis du havde sat det hele rigtigt op ville et hit på "http://fanclub.fc-bigfeet.com" vise det nye websted og "http://www.fc-bigfeet.com" URL'en ville vise det gamle (oprindelige). Selvfølgelig virkede det ikke - hvis du da ikke har skyndt dig at registrere disse domæner for nylig!
Bag ved scenen sker der dette: TYPO3 aflæser domænenavnet. Så prøver den at se efter en domænepost. Hvis sådan en findes (som "fanclub.fc-bigfeet.com") så låser TYPO3 sig selv til den side som rodside! Det betyder at enhver forespørgsel til side-id'er skal være indenfor det område hvori domæneposten blev fundet! Hvis en side-id fra "FC Bigfeet" forespørges på domænet "fanclub.fc-bigfeet.com" så viser TYPO3 blot forsiden fra "Fan Club"-webstedet!
Brug af Ny skabelon-guiden
Faciliteten "Create template for a new site" i visningen "Info/Modify" er praktisk at bruge til starten på nye websteder.
Hvis du blot klikker på knappen uden at vælge en standardskabelon vil du stadig få en nye skabelonpost - men uden nogen standardskabelon og med nogle få linier "dummy" TypoScript-indhold til at komme i gang med. Det er den måde, som prof'erne normalt starter på nye speciallavede sites og så tager de det derfra med deres kendskab til TypoScript osv. Det er nøjagtig den proces der foreslås i gennemgangen "Modern Template Building, Part 1".
Framework til nye projekter?
Når du vil starte dine egne websteder vil du normalt gøre det med en ren database. Hvis du ønsker det - en fuldstændig ren database uden sider og indhold og med kun en "admin"-bruger - så hent "Dummy"-pakken fra typo3.org. Den er designet som et start-framework til nye projekter.
Da du stadig er "newbee" med TYPO3 - eller hvis du blot er meget doven - kunne du også starte nye projekter med "QuickStart"-pakken - den vi bruger her! Grunden er at den allerede indeholder brugere, en skabelon, noget indhold osv. Du ville kun skulle fjerne skabelonen, lave en ny, omarrangere sider og tilføje nyt indhold og fjerne de ting du ikke behøver. Det er nok en god ide hvis du har brug for at komme hurtigt i gang.
Da "skabelonen" er det afgørende punkt i implementationsmulighederne med et CMS er det meget vigtigt at understrege at denne gennemgang ikke på nogen måde illustrerer dybden af mulighederne med skabeloner i TYPO3. Jeg har med vilje brugt en meget kedelig standardskabelon som har et "touch" af amatørudseende over sig. Det er helt efter hensigten så vi ikke fortaber os i de ting. Husk at pointen med denne gennemgang var at lære dig om principperne bag TYPO3. De principper gælder også for professionel brug af produktet. Implementationen af skabeloner vil dog være meget anderledes.
Så bemærk venligst: Denne gennemgang er baseret på et fuldt fungerende websted hvor skabelonen allerede er lavet! Du har ikke (ihvertfald ikke detaljeret) lært at implementere dit eget specielle design. Det er hvad alle de øvrige gennemgange handler om (næsten) - så "FC Bigfeet"-sitet er kun ment som en hands-on introduktion - tilretning af skabeloner er den store videnskab og er ikke dækket her!
Fakta om skabeloner og muligheder
For at lige være sikker på at det er slået helt fast, her er nogle fakta om skabeloner i TYPO3:
Du kan implementere hvilketsomhelst design du vil have, på den måde du vil have det.
Du kan have et vilkårligt antal menu-niveauer.
Du have flere websteder og flere skabeloner.
Du kan have sider på et vilkårligt antal sprog.
Du kan have flere indholdsområder (kolonner) på en side.
Du kan integrere alle mulige slags eksterne data gennem plugins skrevet i PHP.
Du kan tilføje et vilkårligt antal webapplikationer på forskellige sider i TYPO3.
Du kan udvide alt med PHP (helt bagudkompatibelt!).
Du kan gøre alt - nogle ting er bare mere ligetil (de mest typiske ting), andre ting er mere tricky (mindre typiske ting).
Hvis du har brug for at se listen over faciliteter i TYPO3 kan du finde den her på typo3.com.
Udvikle professionelle websteder med TYPO3?
Gennemgangen "Modern Template Building, Part 1" er det dokument du skal læse hvis du vil fordybe dig i skabelonudvikling da det anbefales til newbees på professionelt niveau. Det dokument er "to'eren" til dette så når du er færdig med denne gennemgang så bare fortsæt med den!
