drucken :: thefox: 18.12.2010

Schritt für Schritt

Schritt 9 : Layout umbauen und mit SUBPARTS arbeiten

In diesem Schritt werden SUBPARTS im Template eingebaut. Die Einstellung config.disableAllHeaderCode=1 wird deaktivert, so das der CSS Code der Extension css_styled_content ebenfalls geladen und verwendet werden kann.

Grund für Umstellung auf SUBPARTS

Viele Extensions laden per eigenem typoscript CSS-Code in den Seiten Header (<head>). Mit der Einstellung config.disableAllHeaderCode = 1 wird jedoch verhindert, das dieser Code im Header eingebunden wird. Arbeitet man mit css_styled_content (was die meisten machen werden) ist dies im aktuellen Template ein Problem. Aus diesem Grund wird das Layout in diesem Artikel etwas umgebaut/erweitert.

HTML Template (bisher)

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-CH" lang="de-CH">
<head>
<!--
 Projekt Code: CSS und JavaScript
-->
</head>
	<body class="###BODY_CLASS###">
<!--
 Projekt Code: Seiten Template, HTML Code
-->
	</body>
</html>
HTML Template Aufbau (bisher) - vereinfacht

Ergänzung im Template

In der HTML Template Datei werden nun einige SUBPARTS eingebunden um später damit arbeiten zu können.


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-CH" lang="de-CH">
<head>
<!-- ###SUBPART_HEAD### -->
<!-- head start -->
<!--
 Projekt Code: CSS und JavaScript
-->
<!-- / head end -->
<!-- ###SUBPART_HEAD### -->
</head>
	<body class="###BODY_CLASS###">
<!-- ###SUBPART_BODY### --> 
<!--
 Projekt Code: Seiten Template, HTML Code
-->
<!-- ###SUBPART_BODY### -->
	</body>
</html>
HTML Template ergänzungen

Damit dies funktioniert mussten einge typoscript Schnipsel umgebaut werden.

  • Beim temp.htmlTemplate ( neu lib.htmlTemplate ) benötigt es nicht mehr alle ###MARKER###.
  • Der <head> Bereich muss neu eingebunden werden.
  • Die ###MARKER### im <body> Tag funktionieren nicht mehr.
  • Im Template muss angegeben werden in welchem Subpart (workOnSubpart) gearbeitet wird.
  • Die Drucktemplate Funktionalität muss ebenfalls angepasst werden.

# static/htmltemplate/setup.txt
lib.headTemplate {
  # hinzu fuegen, Subpart festlegen
  workOnSubpart = SUBPART_BODY

  # entfernen nicht mehr verwendeter Marker
  marks {
    METADATA < temp.metadata
    PRINT_MEDIA = TEXT
    PRINT_MEDIA.value = print

    METATITLE = COA
    METATITLE {

      10 = TEXT
      10.value = thefox
      10.noTrimWrap = || :: |

      20 = TEXT
      20.data = page:nav_title // register:pageTitle

      30 = TEXT
      30.data = register:pageSubtitle
      30.noTrimWrap = | :: ||
      30.if.isTrue.data = register:pageSubtitle

      wrap = |
    }
  }
}

# neues Template für head Bereich erstellen
lib.headTemplate = TEMPLATE
lib.headTemplate {

  # pfad anpassen damit es funktioniert!
  relPathPrefix = pfad-zur-datei/res/

  # template einbinden
  template = FILE
  template.file = pfad-zur-datei/res/index.html

  workOnSubpart = SUBPART_HEAD

  marks {
    METADATA < temp.metadata
    PRINT_MEDIA = TEXT
    PRINT_MEDIA.value = print

    METATITLE = COA
    METATITLE {

      10 = TEXT
      10.value = thefox
      10.noTrimWrap = || :: |

      20 = TEXT
      20.data = page:nav_title // register:pageTitle

      30 = TEXT
      30.data = register:pageSubtitle
      30.noTrimWrap = | :: ||
      30.if.isTrue.data = register:pageSubtitle

      wrap = |
    }
  }

}

# static/setup.txt
# PAGE anpassen
# entfernen von config.disableAllHeaderCode = 1
page = PAGE
page {
  # kein seitentitel ausgeben
  config.noPageTitle = 1

  # eigener body tag, nicht im cache
  bodyTagCObject = COA_INT
  bodyTagCObject {
    stdWrap.dataWrap = <body id="{register:body_id}" class="layout{page:layout} language{TSFE:sys_language_uid} type{TSFE:type} pid{TSFE:id} {field:alias}" {register:body_params}|>
  }

  headerData.100 < lib.headTemplate
  10 < lib.htmlTemplate
}
HTML Template ergänzungen

Drucken Funktionalität

Weil der Body HTML Tag nun vom TYPO3 (bodyTagCObject) ausgegeben wird, muss die Drucken Funktionalität angepasst werden. Als Beispiel wurde das bodyTagCObject als COA verwendet, dadurch ist es möglicht mit dem stdWrap.dataWrap beliebige Parameter am Ende des Body Tag's einzufügen.


# Layout Print
[globalVar = TSFE:type=98] || [globalVar = GP:print > 0]
page {
	config.no_cache = 1

	bodyTagCObject {
		10 = TEXT
		10 {
			value = window.print();
			noTrimWrap = | onload="|"|
		}
	}
}
[global]
print condition
 

Live Demo

Diesen Code Schnipsel kann man im Beispiel anschauen.