|
|
| (18 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{TOCright}}
| + | Has been moved to: http://blog.kr8.de/wiki-typo3/ |
| − | 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 ==
| |
| − | * Definitive Software Library ID: '''Typo3'''
| |
| − | * Name: Typo3
| |
| − | * Versionen
| |
| − | ** 4.2.1 auf [[ComputerT41]]
| |
| − | ** 4.1.7 auf [[ComputerGraumann]]
| |
| − | ** 3.8.1 '''Tutorial Quickstart''' auf [[ComputerGraumann]]
| |
| − | * Hersteller/Bezugsquelle: http://typo3.org/download/packages/
| |
| − | * Installations-Ordner: D:\var\www\htdocs\typo3
| |
| − | | |
| − | == Dokumentation ==
| |
| − | * http://typo3.org/documentation
| |
| − | * http://www.typo3forum.net
| |
| − | * http://wiki.typo3.org
| |
| − | * [[Typo3 Quickstart Tutorial]]: Typo3 Version 3.8.1 http://typo3.org/documentation/document-library/tutorials/doc_tut_quickstart/0.1.0/view/1/1/
| |
| − | * Modern Template Building: http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/0.1.0/view/
| |
| − | ** Ist viel zu kompliziert für den Anfänger, ist aber vollständig und funktioniert
| |
| − | * ftb tutorial: http://www.typo3forum.net/forum/templavoila/16139-templavoila-genau-funktionierts-beispiel-allen-templates.html
| |
| − | * Steffen Kamper: http://www.sk-typo3.de/Typo3-Workshop.15.0.html
| |
| − | ** Erklärt sehr schön die Installation von typo3 mit ImageMagick etc.
| |
| − | ** Die Teile über Templates und Menüs sind leider unvollständig
| |
| − | * ...
| |
| − | | |
| − | == Erste Erfahrungen mit Typo3 ==
| |
| − | === Tutorial Quickstart ===
| |
| − | * Die '''Stable Version''' ist 4.2.1
| |
| − | * Das 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 TYPO3 Version 4 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"
| |
| − | | |
| − | | |
| − | | |
| − | === 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"
| |
| − | ** Das Frontend '''FE''' zeigt die Website(s) und das Backend '''BE''' ist zum Administrieren (wie bei [[Joomla]])
| |
| − | ** Front End Aufruf: http://localhost/typo3
| |
| − | ** Back End Aufruf: http://localhost/typo3/typo3
| |
| − | ** Konfigurationsdatei: /typo3conf/localconf.php
| |
| − | ** Anzeige der Version beim Login: $TYPO3_CONF_VARS['SYS']['loginCopyrightShowVersion'] = 1;
| |
| − | * 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)
| |
| − | * Backend-Benutzergruppe "Redakteur" anlegen, d.h.
| |
| − | ** List Modul anklicken, im Page Tree die Root Page (Weltkugel) anklicken
| |
| − | ** New Record vom Typ "Backend Usergroup"
| |
| − | * '''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''' <i>Achtung: Damit Anfänger das auch bestimmt nicht verstehen, wird das als TS abgekürzt</i>)
| |
| − | ** 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???<br /> 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 aller oberste Wurzelelement des Typo3 "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:
| |
| − | <pre>
| |
| − | # Default PAGE object:
| |
| − | page = PAGE
| |
| − | page.10 = TEXT
| |
| − | page.10.value = HELLO WORLD!
| |
| − | </pre>
| |
| − |
| |
| − | Wenn man den Inhalt seiner Seiten tatsächlich sehen will, muss man das Setup-Script ändern in:
| |
| − | <pre>
| |
| − | page = PAGE
| |
| − | page.typeNum = 0
| |
| − | page.10 < styles.content.get
| |
| − | </pre>
| |
| − |
| |
| − | Dazu muss man dem Template noch zwei "Static Includes" zuordnen:
| |
| − | * Include static: content(default)
| |
| − | * Include static (from extensions): CSS Styled Content (css_styled_content)
| |
| − | | |
| − | === 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:<br />
| |
| − | [[Image:Website01.png]]<br />
| |
| − | | |
| − | Zur Realisierung eines solchen Layouts mit Typo3 benötigt man grundsätzlich folgende drei Bestandteile:
| |
| − | # Ein '''HTML Template'''
| |
| − | # Ein dazu passendes '''CSS Stylesheet'''
| |
| − | # 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'''.<br />
| |
| − | Das '''CSS Style Sheet''' laden wir als normals File in den Ordner: '''fileadmin/template/main/res'''<br />
| |
| − | 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.
| |
| − | <pre>
| |
| − | <!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>
| |
| − | </pre>
| |
| − | | |
| − | Es wird folgedes '''Style-Sheet''' benutzt:
| |
| − | <pre>
| |
| − | 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;
| |
| − | }
| |
| − | </pre>
| |
| − | | |
| − | | |
| − | Das HTML-Template laden wir in den Ordner: '''fileadmin/templates/main'''.<br />
| |
| − | 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:
| |
| − | <pre>
| |
| − | 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
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | </pre>
| |
| − | 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:
| |
| − | <pre>
| |
| − | <!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>
| |
| − | | |
| − | </pre>
| |
| − | | |
| − | == 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 die 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 Virtual Hosts 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 (ServerName) der jeweiligen Website angegeben, dann hat Typo3 die Information, auf welchen ''Page Tree'' es zugreifen soll.
| |
| − | | |
| − | == Export und Import ==
| |
| − | TYPO3 kann sehr schön Pages und Page Trees exportieren und importieren. Damit können also ganze Websites (Page Tree) oder auch gezielt Teile einer Website von einem TYPO3 auf eine anderes TYPO3 transportiert werden.
| |
| − | | |
| − | Siehe: http://wiki.typo3.org/index.php/De:faq/copy_parts_of_a_running_TYPO3_system_to_another_server
| |
| − | | |
| − | == 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'' anhaken
| |
| − | * 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:
| |
| − | <pre>
| |
| − | <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" />
| |
| − | </pre>
| |
| − | | |
| − | 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 :-)
| |
| − | | |
| − | == Frontend Editing ==
| |
| − | Damit das Editieren von Seiteninhalten so einfach wird, wie z.B. in einem [[Wiki]], gibt es auch bei Typo3 die Möglichkeit des sog. ''Frontend Editing''; d.h. man kann direkt beim Betrachten der Seiten einer Website mit einem Klick ins Editieren (Bearbeiten) wechseln, wenn das so konfiguriert ist und man dazu berechtigt ist...
| |
| − | | |
| − | Dazu sind folgende Schritte erforderlich:
| |
| − | * Im TYPO3 Backend, ganz linke Spalte: Tools > User Admin
| |
| − | * Beim gewünschten User auf "Bearbeiten" (Edit) klicken (Bleistift-Symbol)
| |
| − | * In den Daten dieses Users das Feld "TSconfig" suchen
| |
| − | * Dort eingeben:
| |
| − | <pre>
| |
| − | admPanel {
| |
| − | enable.edit = 1
| |
| − | override.edit.displayFieldIcons = 1
| |
| − | hide = 1
| |
| − | }
| |
| − | </pre>
| |
| − | | |
| − | == Menüs ==
| |
| − | Ich benötige ein mehrstufiges hierarchisches Menü mit variabler Tiefe.
| |
| − | | |
| − | Schön aussehen soll es auch noch...
| |
| − | | |
| − | | |
| − | | |
| − | -- [[User:Dkracht|Dkracht]] 08:27, 4 September 2008 (CEST)
| |
