Anzeige
Anzeige
Software & Entwicklung
Artikel merken

Schritt für Schritt schnell zum eigenen Webauftritt: TYPO3-Website in einer Stunde

Viele Menschen halten das Erstellen einer Website mit TYPO3 für ein kompliziertes Unterfangen. Dabei kann es viel einfacher sein, als oft angenommen wird. Dieser Artikel zeigt Ihnen, welche Schritte nötig sind, um eine vorhandene HTML-Vorlage in nur einer Stunde in TYPO3 zu integrieren und so die Grundlage für die Arbeit eines Redakteurs zu schaffen.

5 Min. Lesezeit
Anzeige
Anzeige

Es wird empfohlen, diesem Tutorial Schritt für Schritt zu folgen. Durch direktes Anwenden wird es sehr viel leichter fallen, das Vorgehen zu verstehen. Alles, was Sie zum Mitmachen benötigen, sind eine frische Installation von TYPO3 [1] und eine HTML-Vorlage inklusive Styles, die das spätere Aussehen der Website bestimmt. Diese HTML-Vorlage benötigen Sie zum Erstellen eines Templates, der Basis für jede Seite in TYPO3, die nichts anderes ist als eine Vorlage. Alle in diesem Artikel verwendeten Dateien sowie eine HTML-Vorlage mit Styles und Bildern finden Sie in einem ZIP-Archiv auf der beiliegenden Heft-CD.

Die Vorarbeit

Anzeige
Anzeige

Bevor Sie mit der eigentlichen Arbeit beginnen, sollten Sie Ihre HTML-Vorlage inklusive der Styles und Images auf einem Server ablegen. Ein guter Ort dafür ist das Verzeichnis „fileadmin/“. Alternativ können Sie auch das Verzeichnis „Template“ aus dem ZIP-Archiv auf der Heft-CD in dieses Verzeichnis kopieren.

Wenn Sie in TYPO3 ein Template erstellen möchten, benötigen Sie zunächst eine HTML-Vorlage. In dieser HTML-Vorlage definiert man mit Hilfe von „Subparts“ und „Markern“ jene Bereiche, die später durch TYPO3 befüllt werden sollen. Es gibt zwei wesentliche Unterschiede zwischen Subparts und Markern. Subparts definieren in der Regel komplette Bereiche und werden in der HTML-Vorlage durch HTML-Kommentare eingeschlossen, wobei ein Subpart immer durch einen Start- und einen End-Marker definiert wird. Hier ein Beispiel, um dies zu verdeutlichen:

Anzeige
Anzeige
HTML-Vorlage (Subpart)
...
<!-- ###SUBPART_NAV### begin -->
<ul id=“navigation“>
	<li><a xhref=“#“>Home</a></li>
	...
</ul>
<!-- ###SUBPART_NAV### end -->
...

Listing 1

Zu beachten ist hierbei, dass der Name des Subpart-Markers eindeutig ist und von drei Rauten (###) am Anfang und am Ende eingeschlossen wird. Ein Marker dagegen wird ohne HTML-Kommentare eingefügt und definiert eine Stelle in der HTML-Vorlage. Dazu wieder ein Beispiel:

Anzeige
Anzeige
HTML-Vorlage (Marker)
...
<div id=“lastchange“>
	Letzte Änderung dieser Seite: ###LAST_CHANGE###
</div>
...

Listing 2

Sobald alle Bereiche mit Subparts definiert und auch alle Marker gesetzt sind, kann damit begonnen werden, das Template in TYPO3 anzulegen.

Jetzt geht’s los

Zunächst benötigen wir im TYPO3 eine Grundstruktur innerhalb des Seitenbaums. Es empfiehlt sich, in der ersten Ebene eine Seite einzurichten, an der später auch das Template angelegt wird und Einstellungen vorgenommen werden können. Da TYPO3 ein Template vererbt, sollten die eigentlichen Webseiten unterhalb dieser Seite angelegt werden. Sehen Sie sich den Seitenbaum in der Abbildung an. Sie erkennen dort auch die IDs der Seiten, auf die ich später noch zu sprechen komme.

Anzeige
Anzeige

Nachdem nun die Grundstruktur angelegt wurde, können Sie das Template erstellen. Klicken Sie dazu als erstes im linken Frame das Modul „Template“ an und wählen Sie im Seitenbaum die Seite aus, an der das Template hinterlegt werden soll (die erste Seite mit der ID 1). Im rechten Frame sollten Sie jetzt zwei Buttons sehen, wovon Sie den oberen mit der Bezeichnung „Create template for a new site“ anklicken. Nachdem die Seite neu geladen wurde, sehen Sie Ihr neu angelegtes Template. Die Eigenschaften dieses Templates sind Title, Sitetitle, Description, Resources, Constants und Setup. Für den Anfang ist nur die Eigenschaft Setup von Interesse. Klicken Sie auf das Edit-Icon vor Setup, um mit der Konfiguration Ihres ersten Templates zu beginnen.

TYPO3 hat bereits ein paar Zeilen TypoScript-Code erzeugt:

TypoScript
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Listing 3

Damit TYPO3 die HTML-Vorlage verwendet, müssen Sie die TypoScript-Konfiguration anpassen. Ändern Sie dazu das Template:

Anzeige
Anzeige
TypoScript
page = PAGE
page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/Template/template.html
	workOnSubpart = DOCUMENT_BODY
}

Listing 4

Nun kennt TYPO3 die HTML-Vorlage und kann diese verwenden. Die HTML-Vorlage der Heft-CD beinhaltet einen Subpart-Marker mit dem Namen „DOCUMENT_BODY“, der über die Eigenschaft „workOnSubpart“ definiert wird. Der Subpart-Marker bestimmt den Bereich, der als Grundlage für jede Seite dienen soll.

In der HTML-Vorlage befinden sich im <head> die Referenzen auf die CSS- sowie eine JavaScript-Datei. TYPO3 übernimmt diese nicht automatisch, deshalb muss die Konfiguration erweitert werden:

TypoScript
page = PAGE
page {
	includeCSS.file001 = fileadmin/Template/css/basic.css
	includeJS.file001 = fileadmin/Template/scripts/basic.js
}
page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/Template/template.html
	workOnSubpart = DOCUMENT_BODY
}

Listing 5

Jetzt kann TYPO3 auch die CSS- und JavaScript-Dateien auf jeder Seite einbinden. Als letztes fehlen nur noch die in der HTML-Vorlage definierten Subparts und Marker. Wurden diese im Template konfiguriert, kann das Template bereits verwendet werden und die redaktionelle Pflege der Inhalte beginnen.

Anzeige
Anzeige
TypoScript
page = PAGE
page {
	includeCSS.file001 = fileadmin/Template/css/basic.css
	includeJS.file001 = fileadmin/Template/scripts/basic.js
}
page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/Template/template.html
	workOnSubpart = DOCUMENT_BODY

	subparts {
		CONTENT < styles.content.get
		SUBPART_NAV < temp.mainnav
	}

	marks {
		LAST_CHANGE < temp.lastchange
	}
}

Listing 6

Wie Sie sehen, werden im TypoScript mit dem Operator „<“ den Subparts und Markern verschiedene Dinge zugewiesen. Die Definition von „styles.content.get“ wird durch die Extension „CSS Styled Content“ bereitgestellt. Damit diese auch zur Verfügung steht, müssen Sie noch das „static template“ hinzufügen. Klicken Sie dazu auf das Modul „Template“, wählen Sie im Seitenbaum die Seite mit Ihrem Template aus und klicken Sie anschließend auf den Link „Click here to edit whole template record“. Scrollen Sie jetzt nach unten bis zu der Box „Include static (from extensions):“, wählen Sie in der rechten Box das „static template“ „CSS styled Content“ aus und speichern Sie Ihre Änderungen.

Die beiden anderen Definitionen „temp.mainnav“ und „temp.lastchange“ sind temporäre TypoScript-Definitionen, die noch erstellt werden müssen:

TypoScript
temp.lastchange = TEXT
temp.lastchange {
  data = page:tstamp
  date = d.m.Y H:i
}

page = PAGE
...

Listing 7

Um den Umfang dieses Artikels nicht zu sprengen, finden Sie die fehlende Definition von „temp.mainnav“ sowie das vollständige TypoScript-Template noch einmal in der Datei „TypoScript.txt“ auf der beiliegenden Heft-CD. Die Datei enthält noch ein paar weitere Konfigurationen für die spätere Ausgabe. Alle in dieser Datei vorhandenen Einstellungen können Sie in der TypoScript-Referenz nachlesen. Das Script wurde außerdem mit Kommentaren versehen, die es Ihnen erleichtern, die Einstellungen nachzuvollziehen.

Anzeige
Anzeige

Fazit

Mit ein wenig Übung gelingt es jedem, in einer Stunde oder sogar schneller, eine Website mit TYPO3 umzusetzen. Wie bei jeder Software gehört natürlich auch etwas Fleißarbeit sowie das Interesse, sich auf etwas Neues einzulassen, dazu. Sie finden auf der Website von TYPO3 weitere Hilfe in Form von Tutorials [2] sowie einer vollständigen Dokumentation zu TypoScript.

Auf der privaten Website des Autors [3] finden Sie im Bereich TYPO3 noch ein paar TypoScript-Snippets, die Sie immer wieder benötigen werden, wenn Sie sich über diesen Artikel hinaus mit TYPO3 beschäftigen möchten.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige