FYI. This blog is translated by machine. Please ignore any spelling and grammar errors; sorry for such inconvenience. We appreciate your understanding and support.
Willkommen TYPO3-Einsteiger, In diesem Artikel finden Sie alles über das Was/Warum/Wie TypoScript. Mein letztendliches Ziel ist es, Sie Schritt für Schritt in TYPO3 TypoScript einzuführen und sich sicher zu fühlen. Ich bin sicher, dass Sie die Grundlagen und die Architektur lernen werden, um die Leistungsfähigkeit von TypoScript kennen zu lernen.
Als ich vor mehr als 10 Jahren mit TYPO3 begann, hatte ich das gleiche Gefühl wie jeder TYPO3-Anfänger. Oh, TypoScript scheint sehr kompliziert und schwer zu erlernen zu sein. Aber ehrlich gesagt muss ich sagen: "TypoScript ist das Herzstück von TYPO3 CMS".
"TypoScript gibt es seit 20 Jahren im TYPO3 CMS. Das bedeutet, dass TYPO3-Entwickler TypoScript lieben.
Die lustige Tatsache ist, dass TYPO3-Anfänger sich so fühlen: "Ich kenne PHP, JavaScript, usw., Oh, um TYPO3 CMS zu lernen, muss ich eine andere TypoScript-Skriptsprache erforschen". Nun, mit TYPO3 zu beginnen wird missverstanden.
"TypoScript ist keine Skriptsprache, es ist nur Konfiguration".
Kasper (Gründer von TYPO3), entwickelte geschickt solch eine intermediäre coole Konfigurationssprache und nannte sie "TypoScript" aus dem Namen des CMS wie TYPO3Script.
Warum hat er TypoScript in TYPO3 CMS entwickelt? Sein Gedanke war aus meiner Sicht, dass TYPO3 ohne Programmierkenntnisse wie PHP einfach installiert, konfiguriert und Webseiten erstellt werden können.
Soweit ich weiß, ist TYPO3 nur OpenSource, wo Entwickler nicht einmal grundlegende PHP-Sprachkenntnisse benötigen. Und das ist wahr. Ohne eine einzige Zeile PHP zu schreiben, können Sie mit TYPO3 großartige Websites erstellen.
Wie auch immer, Nehmen Sie eine gute Tasse Kaffee, ich möchte TypoScript so gut wie möglich erklären, einfache Sprache und Tutorial.
Was ist TypoScript in TYPO3?
Nach der offiziellen Dokumentation von TYPO3 ist hier die Definition von TypoScript (TS).
"TypoScript ist eine Syntax zur Definition von Informationen in einer hierarchischen Struktur mit einfachem ASCII-Textinhalt.
Nun, das ist etwas unklar, aber was bedeutet das?
- Eines ist klar, TypoScript ist keine Programmiersprache.
- TypoScript selbst "tut" gar nichts - es enthält nur Informationen.
- TypoScript ist einfach nur lang-PHP-arrangierte Konfiguration des TYPO3 CMS
- Es ist einfach "wie eine Anleitung", um TYPO3 Frontend und Backend einfach zu konfigurieren und zu rendern.
TYPO3-Installation mit wenig Aware mit Backend
Bevor wir mit einem praktischen TYPO3 TypoScript-Tutorial beginnen, sollten Sie sich im Folgenden damit vertraut machen.
- TYPO3 herunterladen von https://get.typo3.org/
- Installieren Sie TYPO3 v10 auf Ihrem Server
- Machen Sie sich mit dem TYPO3-Backend wenig vertraut. Versuchen Sie, einige TYPO3-Tutorials zu lesen und anzusehen.
Wenn Sie Probleme bei der Installation und Konfiguration von TYPO3 haben, dann schreiben Sie bitte unter dem Kommentarfeld, und ich werde Ihnen gerne helfen.
Tipps: Um den Einstieg in TYPO3 zu erleichtern, empfehle ich die Verwendung von kostenlosen TYPO3 Templates aus unserem allerersten TYPO3 Marketplace. Sie können unsere bekannteste T3 Agency Free TYPO3 Template herunterladen, indem Sie unserer Schritt-für-Schritt-Installationsanleitung für TYPO3 Templates folgen.
"TYPO3 TypoScript-Tutorial "Hallo Welt
Sind Sie aufgeregt, Ihr "Hallo TYPO3"-TypoScript-Programm zu schreiben? Hier sind die Schritte.
Schritt 1. Gehen Sie zu Web > Seite > Seitenaufruf "Hallo TypoScript" erstellen
Schritt 2. Stellen Sie sicher, dass "Als Stammseite verwenden" auf der Seite Bearbeiten > Registerkarte Verhalten eingestellt ist. (Und klicken Sie natürlich auf die Schaltfläche "Speichern").
Schritt 4. Jetzt Schaltfläche "Den gesamten Vorlagendatensatz bearbeiten".
Schritt 5. Gehen Sie zum "Setup"-Feld, Sie können schon unten einfachen TypoScript-Template-Code erhalten, um "Hallo TYPO3" zu drucken.
# TypoScript Page Template
page = PAGE
page.10 = TEXT
page.10.value = Hello TYPO3!
Warum solch kompliziertes TypoScript lernen?
Ich weiß, was in Ihrem Kopf vorgeht wie "Hey Leute, TypoScript scheint zu kompliziert zu sein, Ach komm schon, um einfach 'Hallo TYPO3'-Text zu schreiben, ich muss so viele Schritte befolgen und oh schreibe irgendeine Art von kompliziertem Code".
Aber mein Freund, Vertrauen Sie mir, so ist es nicht. Ich erinnere mich an meine ersten Tage mit TYPO3, ich habe mich genauso gefühlt. Und derzeit kann ich gut verstehen, warum TypoScript das Herzstück von TYPO3 ist. Natürlich braucht es Zeit und Geduld.
TypoScript ist eine gut entworfene moderne Architektur von vor 20 Jahren von Kasper (Gründer von TYPO3). Grundsätzlich sollte das grundlegende Ziel eines jeden CMS die Trennung von Inhalt und Design sein. Mit Hilfe von TypoScript hat TYPO3 seit der Gründung des CMS ein solches Prinzip.
Mit Hilfe von TypoScript können Sie viele Änderungen an TYPO3 Backend-Modulen steuern und Ihre Frontend-TYPO3-Website intelligent steuern und rendern.
Aber im Moment, keine Sorge, Sie sollten versuchen, TypoScript sehr grundlegend zu lernen und zunächst benötigen Dinge z.B., um eine Seite einzurichten. Und erfahrungsgemäß können Sie die Schönheit von TypoScript in die Tiefe gehen.
Häufigster TypoScript-Fehler
#1 Seite nicht gefunden!
Entfernen Sie aus dem obigen Beispiel TypoScript-Code.
Page Not Found
The page did not exist or was inaccessible. Reason: The page is not configured! [type=0][].
#2 Keine TypoScript-Vorlage gefunden!
Gehen Sie zu Liste > Klicken Sie auf Seite > Vorlagendatensatz löschen.
Service Unavailable (503)
No TypoScript template found!
Wie funktioniert TypoScript?
Das ist sehr einfach, TYPO3 wird im Grunde genommen gespeichert und TypoScript in ein einfaches mehrdimensionales PHP-Array umgewandelt.
Ich bin sicher, Sie werden feststellen, dass das Schreiben von TypoScript viel besser ist als das Schreiben von PHP ;) Überprüfen Sie sorgfältig das TypoScript-Beispiel.
// TypoScript Page Example
page = PAGE
page.10 = TEXT
page.10.value = Hello TYPO3
page.10.stdWrap.wrap = <h1>|</h1>
// By d way, You can write TypoScript in more beatuiful way with {}
page = PAGE
page {
10 = TEXT
10 {
value = Hello TYPO3
stdWrap.wrap = <h1>|</h1>
}
}
// TypoScript Converted to PHP Array
$data['page'] = 'PAGE';
$data['page.']['10'] = 'TEXT';
$data['page.']['10.']['value'] = 'Hello TYPO3';
$data['page.']['10.']['stdWrap.']['wrap'] = '<h1>|</h1>';
Zaubern wir ein bisschen mit TypoScript
Es ist ein Tutorial auf etwas fortgeschrittenem Niveau, aber Sie werden überrascht sein - wie mächtig TypoScript in TYPO3 ist ;) Ohne eine einzige Zeile PHP-Code werden Sie in der Lage sein, die Datenbank zu verbinden, Datensätze abzurufen und nach Ihren Bedürfnissen im Frontend zu rendern.
Tipp: In der TYPO3-Datenbank sollten Sie zwei große Datenbanktabellen namens "pages" und "tt_content" untersuchen. Als TYPO3-Integrator werden Ihnen diese Tabellen eine große Hilfe sein. Wenn Sie die MySQL-Datenbank haben, dann öffnen Sie Ihren phpMyAdmin und lernen Sie die Datenstruktur von "pages" und "tt_content table" kennen.
Schritt 1. Gehen Sie zu Web > Seite > Reguläres Inhaltselement mit der Schaltfläche "Inhalt" hinzufügen.
// TypoScript Page Setup
page = PAGE
page {
typeNum = 0
10 = CONTENT
10 {
table = tt_content
select.orderBy = sorting
select.where = {#colPos}=0
renderObj = COA
renderObj {
10 = TEXT
10.stdWrap.field = header
10.stdWrap.wrap = <h1>|</h1>
20 = TEXT
20.stdWrap.field = bodytext
20.stdWrap.wrap = <p>|</p>
}
}
}
Schritt 3. Hurra, Sie haben das TYPO3-Inhaltselement aus einer Datenbank gerendert, Überprüfen Sie Ihre Frontend-Site.
Stellen Sie sich vor, wenn Sie mit einem anderen CMS gearbeitet haben, wie viele Zeilen PHP-Code benötigt werden, um solche benutzerdefinierten Dinge darzustellen.
Das nenne ich TYPO3 = State-of-the-Art-Lösung durch Trennung von Inhalt und Design.
Im obigen Beispiel haben wir das TYPO3-Inhaltselement aus dem Backend hinzugefügt und sowohl "Überschrift" als auch "Text" im Frontend dargestellt. Das ist nicht cool, was?
Wie können Sie auf einfache Weise ein TypoScript-Menü erstellen?
Ja, das Menü ist die Grundvoraussetzung für jede TYPO3-Website. Lassen Sie uns das Menü mit TYPO3 TypoScript rendern.
Schritt 1. Seite > Fügen Sie einige Seiten in Ihren Seitenbaum ein
Schritt 2. Vorlage > Einstellung, folgenden TypoScript-Menücode hinzufügen.
// HMenu TypoScript
menu.header = HMENU
menu.header {
1 = TMENU
1.NO = 1
1.NO.allWrap = <li>|</li>
1.wrap = <ul class="level1">|</ul>
# copy and change the wrap
2 < .1
2.wrap = <ul class="level2">|</ul>
}
// Assign HMENU to PAGE TYPO3 TypoScript
page.5 < menu.header
Meet Fluid - Ein enger Freund von TypoScript
Y
ie mag man bei solch grundlegendem TypoScript denken: Wie können wir eine strukturierte und professionelle TYPO3-Website erstellen?
Natürlich können Sie nur mit TYPO3 TypoScript das gesamte TYPO3-Frontend rendern, z.B. können Sie Schritt für Schritt eine Kopfzeile, ein Menü, ein Inhaltselement, eine Fußzeile usw. erstellen, aber das scheint etwas unpraktisch in der Entwicklung und Pflege - wirklich komplex! Heutzutage entwickelt kein TYPO3-Entwickler die gesamte Site ausschließlich mit TypoScript.
Keine Sorge, Meet Fluid - die Templating Engine von TYPO3! Zum Rendern von Frontend-Templates, Inhaltselementen usw. verfügt TYPO3 über eine sehr eigene Fluid-Templating-Methode.
Jedes moderne Frontend-Templating-Framework bietet eine ordentliche und saubere Struktur mit Layouts, Templates und Partials.
Für Fluid wird ein separater dedizierter Blog erforderlich sein, also werde ich ihn in einigen Tagen schreiben, für den Moment schauen wir uns die Grundstruktur von Fluid an, wie untenstehendes Beispiel zeigt.
Grundlegendes Beispiel für Typoscript + Fluid
// The TypoScript-only version
page = PAGE
page.1 = TEXT
page.1.value = Hello, world.
// The TYPO3 Fluid version
page = PAGE
page.1 = FLUIDTEMPLATE
page.1.file = fileadmin/templates/Index.html //Create this file and write “Hello, world”.
// TypoSript + Fluid
page = PAGE
page {
typeNum = 0
// Initialize your TYPO3 Frontend Templates
10 = FLUIDTEMPLATE
10 {
templateName = TEXT
templateName.value = Default
templateRootPaths {
0 = EXT:yourextension/Resources/Private/Templates/
}
partialRootPaths {
0 = EXT:yourextension/Resources/Private/Partials/
}
layoutRootPaths {
0 = EXT:yourextension/Resources/Private/Layouts/
}
}
}
Ich bin sicher, wenn Sie gute Kenntnisse in TYPO3 TypoScript + Fluid haben, dann können Sie leicht ein TYPO3 Integrator werden, der leicht eine TYPO3 Website erstellen kann :)
Erfahren Sie mehr über FLUIDTEMPLATE
Unterschied zwischen TypoScript-Konstanten und Setup
Nun, das ist sehr leicht zu bestimmen. Kennen Sie die PHP-Variable und -Konstante? Es ist einfach so;
Was ist eine TypoScript-Konstante?
In den obigen Beispielen kennen Sie sich gut mit "TypoScript Setup" aus. Und "TypoScript-Konstanten" sind genau wie einfache PHP-Variablen, die definiert werden können und denen einige Werte zugewiesen werden können und die einfach mit {$name} in das Setup übernommen werden können.
// TypoScript Constatnt Textarea
myConstant = TypoScript Constant is like PHP-Variable
// TypoScript Setup Textarea
page = PAGE
page {
typeNum = 0
10 = TEXT
10 {
value = {$myConstant}
wrap = <h1>|</h1>
}
}
Konstanten sind Werte, die im Feld "Konstanten" der Struktur charakterisiert sind. Sie folgen der Syntax von Standard-TypoScript und sind in Bezug auf Groß- und Kleinschreibung heikel! Sie werden verwendet, um an einer einzigen Stelle einen Wert zu überwachen, der später an einigen wenigen Stellen verwendet wird.
Anders als Konstanten in der Programmierung kann der Wert von Konstanten in TypoScript überschrieben werden. Konstanten in TypoScript könnten eher als eine Variable in Programmierdialekten angesehen werden.
// TypoScript Constant variable
bgCol = red
file {
toplogo = fileadmin/logo.gif
}
// TypoScript Setup
page = PAGE
page {
typeNum = 0
bodyTag = <body bgColor="{$bgCol}">
10 = IMAGE
10.file = {$file.toplogo}
}
Schritt 1. Gehen Sie zu Web > Vorlage > Klicken Sie auf die Stammseite
Schritt 2. Wählen Sie "TypoScript Template Analyzer" und wählen Sie "Setup" aus der Dropdown-Liste "Durchsuchen".
Der ständige Herausgeber
Es ist erlaubt, Kommentare oder Anmerkungen in TypoScript einzufügen. Kommentare werden vom Parser bei der Vorbereitung des Templates ständig ignoriert.
Wie dem auch sei, das Backend-Modul WEB > Template kann Kommentare im Konstanten-Editor verwenden, um grundlegende Konfigurationen einer Vorlage wesentlich einfacher zu gestalten als Konstanten, die sie ab sofort selbst erstellen.
Backend TSConfig vs. Frontend TypoScript
Wir sprachen ein wenig über Frontend TypoScript mit all den obigen Beispielen. Manchmal sind die Leute ein wenig verwirrt über TypoScript zwischen "Backend und Frontend".
Weil TypoScript eine große Fähigkeit hat, viele Dinge im TYPO3 Backend mit "TSConfig" zu verwalten.
Tipps:
TSConfig (TypoScriptConfig) = Für das TypoScript des TYPO3-Backends
TypoScript = Für TYPO3-Frontend
Nehmen wir einen praktischen Fall, um die Leistungsfähigkeit von TSConfig TypoScript zu sehen.
Standardmäßig bietet TYPO3 die Möglichkeit, viele Datensätze hinzuzufügen (siehe untenstehender Screenshot), beschränken wir uns darauf, nur einige wenige Dinge hinzuzufügen.
Schritt 1. Gehen Sie zu Web > Seite > Stammseite bearbeiten
Schritt 2. Fügen Sie den folgenden TSConfig-Code zu Ressourcen > Seite TSConfig
mod.web_list {
# Only pages and sys_category table elements will be linked to in the new record wizard
allowedNewTables = pages, sys_category
}
Im obigen Beispiel können Sie die Leistungsfähigkeit von TSConfig TypoScript spüren. Sie können das gesamte Backend nach Ihren Bedürfnissen anpassen ;)
Erfahren Sie mehr über TypoScript TSConfig
Fortgeschrittene TypoScript-Grundlagen
Lassen Sie uns etwas tiefer in die Bit-Tiefe über TypoScript-Bedingungen, Datentypen, Funktionen usw. gehen,
Wie verwendet man TypoScript-Bedingungen?
Ja! TypoScript ist keine Skriptsprache, bietet aber dennoch Bedingungen, z. B. die "IF"-Bedingung.
Syntax von TypoScript-Bedingungen
[condition 1][condition 2]
// If condition true, then write some of your TypoScript
[GLOBAL]
// or
[END]
page = PAGE
page.10 = TEXT
[loginUser = *]
page.10.value = Logged in
[ELSE]
page.10.value = Not logged in
[END]
page.10.stdWrap.wrap = <strong>|</strong>
page = PAGE
page.10 = TEXT
page.10.value = Welcome to T3Planet
[IP = 127.0.0.01]
page.20 = TEXT
page.20 {
value = Yeah, Got the IP Address
}
[GLOBAL]
page.30 = TEXT
page.30.value = <hr>
TypoScript-Bedingung weiter lernen
Was sind die TypoScript-Datentypen?
Wie in jeder Programmiersprache gibt es auch in TypeScript Datentypen. Wie Sie in all den obigen Beispielen sehen, hat jedes TypoScript Eigenschaften, die es reichhaltiger machen.
Nehmen wir ein kurzes Beispiel: Konvertieren wir einen String-Datentyp in Großbuchstaben.
// TypoScript Setup
10 = TEXT
10.value = Hello world!
10.case = upper
// Result
HELLO WORLD!
Ein weiteres gutes Beispiel ist der Datentyp TypoScript getText, Get data from GET/POST variables, from registers, values from the page tree, items in the page menus, records from any database table, etc.
// TypoScript Setup
page = PAGE
page.10 = TEXT
page.10 = TSFE:fe_user|user|username
// Output “current logged-in username”
page.20 = TEXT
page.20 = page:title
// Output “current page title
Es sind viele Datentypen verfügbar, Checkout TypoScript-Datentypen
Was sind die Funktionen in TypoScript?
TypoScript hat auch einige Funktionen, die nützlich sein können. Lassen Sie uns ein kurzes Beispiel für die "Ersetzen"-Funktion geben.
// TypoScript Replace Function - To replace “T3Planet to TYPO3”
page = PAGE
page.10 = TEXT
page.10 {
value = Hello T3Planet Marketplace
stdWrap.replacement {
20 {
search = T3Planet
replace = TYPO3
}
}
}
// Output
Hello TYPO3 Marketplace
Was sind Top-Level-Objekte in TypoScript?
Und was sind Objekte in TypoScript? In all den obigen Beispielen lernen Sie bereits gut, "Seite" wird Objekt genannt ;)
Meiner Meinung nach sind unten die wichtigsten TypoScript-Objekte aufgeführt.
- Seite
- Konfiguration
- Konstanten
- Plugin
- Modul
Wir haben bereits einige praktische Beispiele für PAGE-Objekte. Lassen Sie uns ein wenig über CONFIG-Objekte sprechen, die ein wenig nützlich sind.
// Let’s Enable TYPO3’s page cache (your frontend will super fast with this one line configuration)
config.no_cache = 0
// Enable Admin debugging at your Frontend
config.admPanel = 1
Ich würde empfehlen, nacheinander von TypoScripts Top-Level-Objekten zu lernen
Wie debuggt man TypoScript?
Das Gute daran ist, dass Sie TypoScript innerhalb des TYPO3-Backends leicht debuggen können.
TypoScript-Objekt-Browser
Schritt 1. Gehen Sie zu Web > Vorlage > Klicken Sie auf die Stammseite
Schritt 2. Wählen Sie "TypoScript-Objekt-Browser".
TypoScript-Vorlagen-Analysator
Wenn Sie sich über Syntaxfehler und die endgültige Generierung von TYPO3 TypoScript vergewissern wollen, können Sie es mit dem TypoScript Template Analyzer testen
Ist ein TypoScript-Buch verfügbar?
Ja! Sie sollten eines der beliebtesten Mastering TypoScript-Bücher seit Jahren ausprobieren.
IDE TypoScript Plugins
Es sind einige coole TypoScript-Plugins für Ihre bevorzugte PHP-IDE verfügbar. Es wird sehr hilfreich sein, die TypoScript-Syntax weiter zu lernen und zu erforschen und sie im Projekt praktisch anzuwenden.
- TypoScript-Plugin für PHPStorm
- TypoScript-Plugin für VS (Visual Studio-Code)
- TypoScript-Plugin für Netbeans
Welches ist die beste Dokumentation TypoScript lernen?
Wenn Sie einfach googeln, finden Sie meist nur die offizielle TYPO3-Dokumentation wie unten.
- TypoScript Syntax Teil in "TYPO3 Explained" für einen Prolog zur TypoScript-Syntax
- Templating im "Einsteiger-Tutorial" für eine Präsentation in der Regel.
- TypoScript in 45 Minuten für einen Prolog zum TypoScript-Templating
- Der Teil TypoScript verwenden und einstellen beschreibt, wie TypoScript verwendet, eingestellt und erweitert wird.
- Flüssige Layouts: Konfigurieren Sie TYPO3 für die Verwendung von Fluid für Templating. Dies erlaubt die Verwendung äußerer externer HTML-Layouts, jedoch mit flüssigen Stilvariablen mit geschweiften Klammern. Auf einen Inhaltsobjekttyp FLUIDTEMPLATE kann zugegriffen werden, der Fluid von innerhalb von TypoScript verwendet.
Schlussfolgerung
Danke für die Lektüre!
Nun zum Schluss: Dieser Artikel soll Sie nur darauf aufmerksam machen und Ihre Beziehung zu TypoScript einleiten. Mein anderes Anliegen war es, mich in das mächtige TypoScript von TYPO3 zu verlieben, da TYPO3-Einsteiger in der Regel etwas ängstlich und voreingenommen gegenüber TypoScript sind, wenn sie beginnen, das CMS TYPO3 zu erlernen.
In diesem Artikel habe ich nur ein paar grundlegende TypoScript-Beispiele und Tutorials gegeben. Sie müssen TypoScript-Setup, Konstante, TSConfig usw. erforschen und weiter üben. Die vertrauenswürdigste Ressource ist die offizielle TYPO3-Dokumentation zu TypoScript.
Möchten Sie, dass ich mehr Blog-Artikel zu bestimmten TypoScript-Themen schreibe? Oder haben Sie irgendwelche Probleme mit Ihrem TypoScript? Schreiben Sie den untenstehenden Kommentar auf, ich helfe Ihnen gerne weiter.
Viel Spaß beim TypoScript-Lernen!
Post a Comment
- Your articles are very deep and detailed yet very easy to get along with. Thanks for an amazing blog on TypoScript.
- Dear Angelika Frankfurter, Thanks for your appreciation. Makes us happy to keep doing our best
Sanjay Chauhan
CTO - T3Planet & NITSANSanjay Chauhan, Mitbegründer von NITSAN (Preisgekrönte TYPO3 Agentur) und Pionier von T3Planet, dem ersten TYPO3 Shop weltweit.
Ein wahrer TYPO3-Fanatiker seit 2010.
Mit meinem umfangreichen technischen Wissen und…
More From Author