Typo3

From Dietrich Blog (Strato)
Revision as of 15:02, 28 September 2008 by Dkracht (talk | contribs) (→‎Meine ersten Schritte)

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

Dokumentation

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 Tutorial 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"

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 Typo3-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 eines Webs)
    • Man muss einen Template Record für die Root Page eines Webs anlegen. Dieser Template Record enthält einige Angaben wie Title, Description, die Angabe Rootlevel etc. und - last but not least - 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

Ein HTML-Template ist eine normale HTML-Datei mit ein oder mehreren sog. Subparts (HTML-Kommentare mit start/end) und ein oder mehreren sog. Markern (Platzhalter der Form ###abcdefg###). Diese Subparts und Marker sollen dann mit den dynamischen Inhaltselementen unserer Web-Seiten beschickt werden.

Das HTML Template laden wir als normales File in den Ordner: fileadmin/templates/main.
Das CSS Style Sheet laden wir als normals File 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>

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

Ich benötige ein mehrstufiges hierarchisches Menü mit variabler Tiefe.

Schön aussehen soll es auch noch...

Export und Import

Siehe: http://wiki.typo3.org/index.php/De:faq/copy_parts_of_a_running_TYPO3_system_to_another_server

Mehrere Websites verwalten

Ein Super-Vorteil von Typo3 gegenüber MediaWiki und Joomla ist, dass man mit einer Typo3-Installation mehrere Websites verwalten kann.

Dazu muss man folgendes machen:

Page Trees
Jede Website wird im Typo3 als ein Page Tree angelegt. Normalweise liegt Startseite eines jeden solchen Page Trees (=Website) dann gleich auf der Ebene direkt unterhalb der Typo3-Wurzel. Die Startseiten von Websites müssen einen Template Record haben und die Checkbox Rootlevel muss im Template Record angehackt sein.
VirtualHosts
Im Apache-Webserver legt man für jede Website einen sog. Virtual Host mit einem externen Namen (ServerName) an. Dabei zeigen dann alle Virtuellen Hosts auf das gleiche DocumentRoot, nämlich das Typo3-Verzeichnis. Wie man die Apache-Konfiguration macht, beschreibe ich im Artikel über Apache
Namensauflösung
Damit der Apache-Server vom Client aus auch gefunden wird, müssen die ServerNames der Websites dann auf die IP-Adresse des einen Apache-Servers aufgelöst werden, etwa durch ensprechende DNS-Einträge oder lokal durch entsprechende Einträge in der Datei hosts - auch das wird im Einzelnen im Artikel Apache beschrieben.
Domain Records
Alle Requests auf unsere verschiedenen Websites landen so erst einmal auf unserer Typo3-Installation. Damit der Typo3 die einzelnen Websites dann wieder auseinander finden kann, müssen wir zu jeder Website einen sog. Domain Record zuordnen, und zwar auf der Startseite jeder Website (da wo schon der Template Record mit der Rootlevel-Angabe steht). In diesen Domain Records wird einfach der externe Name (DNS-Name) der jeweiligen Website angegeben, dann hat Typo3 die Information, auf welchen Page Tree es zugreifen soll.

Externe Pictures einbinden

Normalerweise will Typo3 die in Content-Elementen benutzen Bilder ebenfalls verwalten, was für ein gutes Content-Management-System auch sehr sinnvoll ist. Wenn man über diesen Weg aber nicht genau das hinbekommt, was man gerne machen möchte, muss man - notgedrungen - selber manuell IMG-Tags in seine Text-Inhaltselement einfügen.

Ich möchte Pictures von externen Websites verwenden und diese nicht zu mir herunter laden, wegen Copyright. Mit meinem momentanen Wissensstand über Typo3 bekomme ich das "normal" nicht hin und versuche es deshalb über ein manuelles IMG-Tag...

Den Rich-Text-Editor (RTE) muss man erst einmal so einstellen, dass er das überhaupt erlaubt. Dazu sind folgende Schritte nötig:

  • Extension Manager
  • Drop Down: "Loaded Extensions"
  • Klicken auf "htmlArea RTE" und warten...
  • Das Kästchen Enable Images in RTE anhacken
  • Klicken auf Update

Wenn das erledigt ist, kann man im RTE das gewünschte IMG-Tag eingeben, man muss aber aufpassen und den IMG-Tag nicht in der WYSIWYG-Ansicht, sondern in der HTML-Ansicht eingeben. Dann funktioniert's.

Beispiel: 

 <img src="http://a69.g.akamai.net/n/69/10688/v1/img5.allocine.fr/acmedia/rsz/434/x/x/x/medias/nmedia/18/36/22/67/18473826.jpg" />

Interessanterweise glaubt der RTE besonders schlau zu sein und lädt sich das externe Picture herunter in ein lokales Verzeichnis:

  • /typo3/uploads/RTEmagicC_d6791d53f5.jpg.jpg

Nun könnte ich das locale Picture auch auf dem "offiziellen" Typo3-Wege einbinden :-)


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

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