[Typo3-UG Dutch] Intro in templates en typoscript

Wed Sep 28 15:19:46 CEST 2005

On Wed, September 28, 2005 14:52, DJ Broerse said:
> Hallo Typo3ers,
>
> Wie is er bereid om in een verloren uurtje een keer mij een introductie
> te geven hoe ik in Typo3 templates bouwmet typoscript?

Het volgende is een "crash course" wat ik geschreven voor een
opdrachtnemer voor de conversie van een template naar hapbare broken voor
typo3.

Voor het maken van content raad ik aan om de videos te bekijken.

#### BEGIN ####
Installeer met de Ext Manager van de online repository de volgende
extentions:
 - css_styled_content
 - automaketemplate

Upload de template in de map
 - fileadmin/
Of maak een mapje genaamd "template" (wat redelijk standaard is lijkt mij)
en pleur daar alles in.

Maak een pagina aan.
Klik op Template (in de menu links) en klik op die ene pagina.
Maak dan een volledige template.

Doe dit in setup
--- BEGIN ---
# Configuring the Auto-Parser for main template:
plugin.tx_automaketemplate_pi1 {
    # Read the template file:
  content = FILE
  content.file = fileadmin/template.html

    # Here we define which elements in the HTML that
    # should be wrapped in subpart-comments:
  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    TD.all = 1
    DIV.all = 1
  }

    # Prefix all relative paths with this value:
  relPathPrefix = fileadmin/
}

# Menu 1 cObject
temp.menu = HMENU
  # First level menu-object, textual
temp.menu.1 = TMENU
temp.menu.1 {
    # Normal state properties
  NO.allWrap = <div class="menu1-level1-no"> | </div>
    # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
  # Second level menu-object, textual
temp.menu.2 = TMENU
temp.menu.2 {
    # Normal state properties
  NO.allWrap = <div class="menu1-level2-no"> | </div>
    # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <div class="menu1-level2-act"> | </div>
}
  # Third level menu-object, textual
temp.menu.3 = TMENU
temp.menu.3 {
  # Normal state properties
  NO.allWrap = <div class="menu1-level3-no"> | </div>
  # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <div class="menu1-level3-act"> | </div>
}

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY

    # Substitute the ###content### subpart with some example content:

    subparts.content < styles.content.get

    # Substitute the ###menu_1### subpart with dynamic menu:
    subparts.menu < temp.menu

}

# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <head>-tags
  workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate

# Copying the content from TEMPLATE for <head>-section:
page.headerData.10  < temp.headTemplate

# Deze regel is negeerbaar, laat de AdminPanel niet zien aan de voorkant
als je achter bent ingelogd.
config.admPanel = 0
--- EINDE ---

Er zijn een paar dingen waar je hierop moet letten.
De regel:   content.file = fileadmin/template.html
Dit is het pad van je template file.

Er is een serie van de volgende regels:
NO.allWrap = <div class="menu1-level1-no"> | </div>

de classen hebben een opbouw..
level 1 is de menu zoals je ze ziet.
level 2 is de menu daaronder.
level 3 is de menu daaronder.

In de CSS moet je hier rekening mee houden.
Zie ook http://www.ligthert.net/

de -no of -act aan het einde geeft aan dat de menu item actief is of niet.
Dit lijkt me verder vanzelf sprekend.

De HTML template is verder vrij simpel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>Homepage: Sacha Ligthert</title>
  <link rel="StyleSheet" href="site.css" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>
 <body>
  <div id="menu">&nbsp;</div>
  <div id="content">&nbsp;</div>
 </body>
</html>

(CSS voor deze HTML dien je te zoeken op m'n site of zelf te maken ;-))

Het gaat om de volgende twee regels.
  <div id="menu">&nbsp;</div>
  <div id="content">&nbsp;</div>

De id geeft aan waar typo3 de menu of content moet plaatsen.
&nbsp; plaats dit dus.

Tenzij je een config meegeeft is de HTML die typo3 uitspuuwd html401 ipv
xhtml.

#### EINDE ####

Het is wat grof, maar in grote lijnen klopt het wel.

> Dus, wie vind het leuk om mij daar eens door heen te lopen? Locatie
> maakt mij niet uit, eventueel kan het ook via skype.

Dit converteren naar een beknoptere handleiding niet conform typo3.org
standaarden zou wel goed zijn (geld ook voor vertalingen). Ik denk dat
Typo3 templating het grootste ramp in Typo3 is en een korte toelichting
zoals deze geen kwaad kan eigenlijk ;-)

Groet,

Sacha

-- 
 "Where fear is present, wisdom cannot be." -Lactantius