Typo3

From Dietrich Blog (Strato)
Revision as of 13:20, 14 September 2008 by Dkracht (talk | contribs) (→‎Content sichtbar machen mit TypoScript und HTML)

Jump to: navigation, search

Typo3 ist ein Web-Content-Managemet-System (CMS); d.h. als Oberfläche dient der WebBrowser.

Typo3 ist relativ umfangreich und nicht so einfach in der Einarbeitung.

Das häufig anzutreffenede Problem, das die vorhandene Dokumentation nicht wirklich auf den blutigen Anfänger eingeht, weil sie doch implizit von anscheinenden "Selbstverständlichkeiten" ausgeht, ist bei Typo3 in besonderem Maße gegeben und hat schlimme Folgen, da die Ersteinrichtung von Typo3 dadurch extrem schwierig wird.

Installation

Erste Erfahrungen mit Typo3

Installation

  • Die Stable Version ist 4.2.1
  • Die dringend empfohlene Tutorial für Anfänger ist quickstart 3.8.1 vom 22.07.2004 17:55
  • Typo 3.8.1 ist sehr verschieden von Typo 4.2.1.
  • Es gibt also (zur Zeit) kein sinnvolles Totorial für Anfänger

Fatal Problem with MySQL 5

  • Login ins Backend hängt sich auf
  • Lösung: my.ini out-comment this line: "sql-mode=STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION"

Dokumentation

Vorteile

  • Vorteil von Typo3: Interne Links können mit dem Richtext-Editor durch Drop-downs unterstützt eingegeben werden (riesiger Vorteil gegenüber Joomla, wenn man daran gewohnt ist, interne Links so leicht wie in einem Wiki einzurichten.
  • Vorteil von Typo3: Multi-Site-Fähigkeit, das ist ganz wichtig, denn ich möchte ja mehere WebSites verwalten (z.B. beruflich, Privat, ggf. noch separate für einzelne Projekte...)
  • Konsequente Trennung von Content und Layout (die Contents werden nicht in HTML gespeichert).

Meine ersten Schritte

  • Die Installation läuft problemlos (Apache, PHP und MySQL habe ich nun oft genug benutzt. Das ist für mich kein Problem)
  • Zur Konfiguration muss man aber wissen, wie das schöne Typo3 denn eigentlich "tickt"
  • Wie bei Joomla: Frontend FE und Backend BE
  • Der Content besteht aus Pages, die in einem Page Tree angeordnet sind
  • Zum Anlegen einer Page legt man einen Container (Behälter) an. Ein Page Container kann dann null, ein oder mehrere Content Elements (Inhaltselemente) enthalten, wie z.B. "Nur Text", "Text mit Bild", "Tabelle" etc.
  • Benutzer anlegen (für das Back End)
  • Benutzergruppe anlegen
  • Root Page meines Web anlegen, d.h.
    • einen neuen Page Container anlegen direkt unter der Wurzel im Page Tree.
    • dann dieser Page eine Template zuordnen: Links Web -> List, Mitte (Page Tree) Page selektieren, Rechts "Create a new record" -> template
  • Template anlegen bzw. zuordnen (definiert das Layout auf Ebene der Root Page)
    • Primär muss man einen Template Record für die Root Page anlegen. Dieser Template Record enthält einige Angaben wie Title, Description etc. und ein sog. Setup-Script geschrieben in der propietären Sprache TypoScript Achtung: Damit Anfänger das auch bestimmt nicht verstehen, wird das als TS abgekürzt)
    • Dies Setup-Script kann dann auf eine HTML Template (HTML mit "Markers" und "Subparts") verweisen...
    • Solche HTML-Templates sind "normale" Dateien, die überlicherweise im Ordner \fileadmin\templates\main\... gespeichert werden
  • Menü-Navigation: Der Page Tree wird auch als Menü-Struktur genutzt...
  • ...

Was ich als Anfänger erst mühsam herausfinden musste

Navigation im Back End
Klicken im Page Tree auf eine Page führt zu unterschiedlicher Aktion, je nach dem, ob auf den Text oder auf das Symbol der Page geklickt wird...
Erweiterungen
Wie melde ich mich bei einem Typo3 Extension Repository (TER) an, um an Erweiterungen heranzu kommen???
Ich muss mich erst auf der Website topy3.org als User registrieren. Diese UserId mit Passwort muss ich dann in meinem Typo3 Back End unter "Admin Tools -> Ext Manager" -> Stettings -> User Settings" eintragen. Dann bekomme ich das TER in meinem Typo3 angezeigt, wenn ich oben im Drop-Down auswähle "Import extensions" und dann auf den Button "Lookup" klicke...
Web Sites
Das Wurzelelement des "Page Tree" sollte einen neutralen Namen haben z.B. "Typo3". Direkt unterhalb dieses Wurzelelements werden dann die Root-Pages der diversen Websites angelegt, zunächst als leere Container, die nur einen Namen (Titel) haben. Der Trick ist dann, dass durch Zuweisung einer Template zu einer Page aus der "normalen Page" eine "Root Page" wird (wenn man dabei einige Kleinigkeiten beachtet).
Templates
Begriffswirrwarr: html-Temp, Haupt-TS, ext-Temp
PHP
Für meine PHP-Installation muss die Datei PHP.INI angepasst werden...

Content sichtbar machen nur mit TypoScript

Mit einem "Standard-Template" "NEW SITE" wird keine HTML-Template verwendet, sondern nur mit einen ganz einfachen TypoScript im Setup "Hello World" für jede Seite angezeigt: 

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Wenn man den Inhalt seiner Seiten tatsächlich sehen will, muss man das Setup-Script ändern in: 

page = PAGE
page.typeNum = 0
page.10 < styles.content.get

Dazu muss man dem Template noch zwei "Static Includes" zuordnen:

  • Include static: content(default)
  • Include static (from extensions): CSS Styled Content (css_styled_content)

Content sichtbar machen mit TypoScript und HTML

  • Wir entwerfen eine HTML-Seite template.html, die als Template für unsere Website dienen soll. Dazu benötigen wir natürlich auch ein CSS-Style-Sheet site.css

Das Layout der Website soll so aussehen:
Website01.png

Zur Realisierung eines solchen Layouts mit Typo3 benötigt man grundsätzlich folgende drei Bestandteile:

  1. Ein HTML Template
  2. Ein dazu passendes CSS Stylesheet
  3. Ein TypoScript, das das HTML-Template lädt und mit dem dynamischen Inhalt beschickt

Das HTML Template laden wir in den Ordner: fileadmin/templates/main.
Das CSS Style Sheet laden wir in den Ordner: fileadmin/template/main/res
Das TypoScript tragen wir im Typo3 Template Record in das Feld "Setup" ein.

HTML-Template mit DIVs

Dieses Layout sollte mit dem untenstehenden HTML-Template erzeugt werden. Leider stellt der MozillaFirefox zwei DIVs nicht richtig nebeneinander dar, so dass ich als Alternative HTML-Tables nehmen muss. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <link rel="stylesheet" href="./res/site.css" media="screen,projection">
 <title></title>
 </head>
 <body>
 <!-- ###DOKUMENT### start -->
 <div id="komplett">
	<div id="header">###LOGO###</div>
	<div id="menuline">###TOPMENU###</div>
	<div id="left">###MENU###</div>
	<div id="content">###INHALT###</div>
	<div id="footer">###FOOTER###</div>
 </div>
 <!-- ###DOKUMENT### end -->
 </body>
 </html>

Dies HTML-Template ist eine normale HTML-Datei mit einem sog. Subpart namnes DOCUMENT (HTLM-Kommentare mit start/end) und sog. Markern namens LOGO, TOPMENU, INHALT und FOOTER.

Es wird folgedes Style-Sheet benutzt: 

body {
	text-align:center;
	background:#ffffff;
}

#komplett {
	margin:30px auto;
	width:788px;
	text-align:left;
}
 
#header {
	height:70px;
	background: green;
}
#menuline {
	height:18px;
	color: #fff;
	background: blue;;
}
#left {
	width:140px;
	float:left;
	background:#ffffcc;
}
#content {
    width:280px
	float:left;
	background: #99CCFF;
}
#footer {
    height:18px;
	clear:left;
	background: blue;
	color:#ffffff;
}


Das HTML-Template laden wir in den Ordner: fileadmin/templates/main.
Das Style Sheet laden wir in den Ordner: fileadmin/template/main/res.

Im Typo3 Template Record tragen wir in das Feld "Setup" dann folgendes kleines TypoScript ein: 

page = PAGE
page.typeNum = 0
page.config.doctype = xhtml_trans
page {
       bodyTag = <body>
       includeCSS {
       file1 = fileadmin/template/main/res/site.css
       }
       10 = TEMPLATE
       10 {
          template = FILE
          template.file = fileadmin/template/main/template.html
          workOnSubpart = DOKUMENT
            marks {
            INHALT < styles.content.get
            TOPMENU = TEXT
            TOPMENU.value = Hier soll eine Menüleiste hin
            MENU =TEXT
            MENU.value = Hier das Menü<br /><br />
            FOOTER = TEXT
            FOOTER.value = Dietrich Kracht Consulting Wiki
            LOGO = TEXT
            LOGO.value = Hier soll ein Logo-Bild hin
            }
          }
       }

Damit wird das HTML-Template geholt und die Marker mit etwas Text beschickt.

HTML-Template mit TABLE

Da das HTML-Template mit DIVs bei mir nicht funktioniert hat, hier mein erfolgreicher Versuch mit einem HTML-Template auf der Basis von TABLE: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="./res/site.css" media="screen,projection">
<title></title>
</head>
<body>
<!-- ###DOKUMENT### start -->
<div id="komplett">
	<table border="0" cellpadding="0" cellspacing="0" width="635">
	<tr>
	   <td id="header" colspan="2">###LOGO###</td>
	</tr>
	<tr>
	   <td id="menueline" colspan="2" style="color:#ffffff; background: rgb(54,40,27);">###TOPMENU###</td>
	</tr>
	<tr height="400">
	   <td id="left" valign="top" style="background: rgb(203,187,151);">###MENU###</td>
	   <td id="content" valign="top" style="background: rgb(244,233,203);">###INHALT###</td>
	</tr>
	<tr>
	   <td id="footer" colspan="2">###FOOTER###</td>
	</tr>
	</table>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>

Menüs

xyxyx

-- Dkracht 08:27, 4 September 2008 (CEST)

Retrieved from "http://wiki.kr8.de/index.php?title=Typo3&oldid=5258"