In .NET a Masterpage ist eine Vorlage für Inhaltsseiten, auf denen eine Reihe von ASPX-Seiten verwendet wird, die alle dasselbe verwenden Masterpage können alle den gleichen Basiscode verwenden.
Auch in dieser Serie erhältlich:
Erste Schritte mit Umbraco: Teil 1
Erste Schritte mit Umbraco: Teil 2
Erste Schritte mit Umbraco: Teil 3
Erste Schritte mit Umbraco: Teil 4
Erste Schritte mit Umbraco: Teil 5
EIN Masterpage kann dann eine oder mehrere haben contentPlaceHolders definiert und jede ASPX-Seite, die das verwendet Masterpage muss nur den Code definieren, der in der contentPlaceHolder. Masterpages kann auch geschachtelt werden, so werden sie in unserer Beispielseite strukturiert.
Definieren des Codes in unserer Basisseitenvorlage
Das Basis Seite, denk dran, das ist das Vorlage und Dokumentenart von denen alle nachfolgenden Seiten erben werden, sollte nur die Elemente enthalten, die allen Seiten der Website gemeinsam sind. Öffne die BasePage.master Datei in Visual Web Developer Express (VWD). In der Datei ist bereits ein kleiner ASPX-Code mit einem Element. Dieses Element zeigt auf ein Element in einem von Umbraco Masterseiten.
Es ist möglich, den Code dem hinzuzufügen Masterseiten vollständig durch das Umbraco-Backend; wenn Sie einen der auswählen Vorlagen in dem die Einstellungen In diesem Bereich wird eine Kopie der Datei zur Bearbeitung in das rechte Bedienfeld des Back-End geladen. Diese Funktion eignet sich eher für kleine Änderungen und Aktualisierungen am Masterseiten, und zum Einfügen von Makros oder Artikeln. Wenn wir eine vollständige .NET-IDE verwenden, erhalten wir Intellisense und eine Reihe anderer Funktionen, die in Umbraco nicht vorhanden sind Masterseiten In der Regel ist in beiden Bereichen eine Bearbeitung erforderlich.
Speicher die Datei. Lassen Sie uns einen Blick darauf werfen, was wir haben. Es ist im HTML5-Format, wie wir direkt am Minimal erkennen können DOKTYP und Meta-Zeichensatz Element. Es ist nicht unbedingt notwendig, HTML5 zu verwenden, aber wir können es auch tun, richtig? In dem Von der Seite haben wir einen Link zu einem Stylesheet (das wir noch nicht erstellt haben, aber später noch erstellen werden) und einem </code> Element. Das <code><title></code> enthält unser erstes Umbraco-Tag und zeigt auf ein Makro. Machen Sie sich jetzt nicht zu viele Sorgen, wir haben noch keine Makros besprochen und diese werden in einem späteren Teil der Serie ausführlicher behandelt. Der Inhalt der Seite ist in a eingeschlossen <code><form></code> Element mit der <code>runat</code> Attribut auf gesetzt <code>Server</code>, Dies ist Standardpraxis für .Net-Sites. Wir haben auch einen Link zum <code>HTML5shiv</code> Datei in Google-Code, damit IE8 oder darunter unsere HTML5-Elemente korrekt anzeigen kann.</p> <p>Als nächstes haben wir eine <code></code> Element, das a enthält <code><hgroup></code> Element für die Überschrift und die Zeile der Hauptsite (bestehend aus <code><h1></code> und <code><h2></code> Tags) und a <code><nav></code> Element, das die Hauptnavigation für die Site enthält, die aus einer ungeordneten Standardliste erstellt wird. Der für die Hauptnavigation angezeigte HTML-Code wird in der endgültigen Form der Site nicht verwendet. Hier wird angegeben, wie der HTML-Code aussehen soll, wenn er automatisch mit einem anderen Makro erstellt wird. Es ist nützlich, die Grundstruktur für dynamisch erstellte Elemente hinzuzufügen, falls diese vor dem Hinzufügen der dynamischen Bits gestaltet werden müssen. Dies ist besonders wichtig, wenn Sie als Teil eines Teams arbeiten und eine andere Person mit dem (spaßigen) Back-End-Material umgehen wird.</p> <p>Wir haben dann eine <code><div></code> Element, das ein enthält <code><asp:ContentPlaceHolder></code>. Das <code><div></code> hat eine <code>Ich würde</code> für Styling-Zwecke und die <code><asp:ContentPlaceHolder></code> hat eine <code>Ich würde</code> Attribut, damit es mit anderen Seiten gefüllt werden kann (oder <code>Masterseiten</code>). Es hat auch die <code>runat = "server"</code> Attribut, da es sich um ein vom Server gehandhabtes ASPX-Element handelt. Beachten Sie, dass einige unserer Elemente Klassennamen erhalten, wenn wir die Site am Ende der Serie gestalten.</p> <p>Wir haben auch eine <code><footer></code> ein Element, das eine weitere Kopie der Navigation enthält (wiederum wird der HTML-Code in diesem Stadium hauptsächlich zum Zwecke der Gestaltung und als Beispiel dafür bereitgestellt, wie er beim Anzeigen der Seiten im Browser erscheinen wird) und eine Copyright-Erklärung. Die Copyright-Erklärung enthält einen kleinen Ausschnitt von <code>C #</code>; Dazu wird das aktuelle Jahr im 4-stelligen Standardformat ausgegeben, so dass immer das Jahr angezeigt wird, in dem die Seite angesehen wird. Schließlich führen wir einen Link zu der von Google-CDN gehosteten Version von jQuery, da wir dies benötigen, um unserer Website im letzten Teil der Serie etwas Verhalten hinzuzufügen.</p> <hr> <h2>Kodierung der Homepage</h2> <p>Als Nächstes können wir den Code hinzufügen, aus dem die Startseite besteht. Wenn wir das öffnen <code>HomePage.master</code> Datei in VWD können wir sehen, dass es bereits verschachtelt wurde <code>BasePage.master</code> (das <code>BasePage.master</code> Datei wird als gesetzt <code>MasterPageFile</code> in dem <code>Meister</code> Deklaration am Anfang der Datei), müssen wir nur die <code>ContentPlaceHolderID</code> des <code><asp:Content></code> Element so, dass es auf die zeigt <code><asp:ContentPlaceHolder></code> Element, das wir dem hinzugefügt haben <code>BasePage.master</code>:</p> <pre><asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Fügen Sie nun den folgenden Code hinzu <code><asp:Content></code> Element oben gezeigt:</p> <pre><p><umbraco:Item field="introText" runat="server" /></p> <umbraco:Item field="bannerImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia(0, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia(0, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> <div> <div> <div> <umbraco:Macro Alias="heroPanels" runat="server"></umbraco:Macro> </div> </div> <ul> <li>Bisherige</li> <li>Nächster</li> </ul> </div></pre> <p>Diese Masterseite enthält einen anderen Typ von Umbraco-Elementen - das <code>Artikel</code>. Das erste Element, das wir verwenden, legt den Einleitungstext auf der Seite fest. Denken Sie daran, wir haben dies als eine Eigenschaft der definiert <code>Startseite</code> Dokumenttyp in Teil 1 dieser Serie und legen Sie einen Datentyp von fest <code>Rich-Text-Editor</code>. Das <code><umbraco:Item></code> Dieses Element in der Vorlage zeigt den Inhalt dessen an, was in den Rich-Text-Editor eingegeben wird, wenn wir einen Inhaltsknoten für die Startseite im Back-End erstellen.</p> <p>Es sollte jetzt ein wenig klarer sein, wie sich die Eigenschaften in den Dokumenttypen auf die Elemente beziehen, die auf unseren Seiten enden, aber machen Sie sich keine Sorgen, wenn es zu diesem Zeitpunkt nicht 100% ig klar ist - wir haben noch keine erstellt tatsächliche Seiten noch nicht, aber wenn wir den letzten Teil des Puzzles machen, sollte es ordentlich einrasten.</p> <p>Als nächstes haben wir ein Bildelement; Da wir einen Media-Picker verwenden (ich erkläre genau, was ein Media-Picker ist, wenn wir die Seite erstellen), ist der Code dafür wesentlich komplexer als bisher. Einer der Abschnitte im Umbraco-Backend ist der <code>Medien</code> Abschnitt, in dem der gesamte Medieninhalt einer Website hochgeladen und gespeichert werden kann. Wie bei anderen Ressourcen für den Standort ist jedes Medienelement ein Knoten in der Knotenstruktur und erhält einen Namen, wenn das Medienelement dem CMS hinzugefügt wird.</p> <p>Wenn wir das hinzufügen <code><img></code>Element verwenden wir ein <code><umbraco:Item></code> ähnlich wie <code>Einführungstext</code>, Wir müssen jedoch einen Code-Inline-XSLT-Code und ein paar HTML-Snippets verwenden, um den Pfad des Bildes in der Medienbibliothek zu erhalten. Das XSLT-Snippet verwendet das <code>concat ()</code> Diese Methode akzeptiert ein durch Kommas getrenntes String-Array, das verkettet werden soll <code><img></code> Element. Innerhalb dieses Arrays verwenden wir die HTML-Entitäten und Markierungen, um das Element manuell zu erstellen, und verwenden auch eine Funktion von <code>umbraco.library</code> Klasse. Die Funktion ist <code>GetMedia</code> und ermöglicht es uns, den Pfad zum Magier in der Medienbibliothek abzurufen (es gibt einen passenden Ordner im Umbraco-Dateisystem, in dem alle Medienelemente gespeichert sind) <code>umbracoFile</code> Eigenschaft und den Namen des Knotens mit <code>@Knotenname</code>. Damit der obige Beispielcode korrekt angezeigt wird, musste ich \ Zeichen in die HTML-Entitäten einfügen. Entfernen Sie diese, wenn Sie sie kopieren und in Ihre eigenen Dateien einfügen.</p> <p>Schließlich fügen wir einige grundlegende Aufschläge für das Heldenpanel hinzu, einschließlich eines äußeren Containers (der <code><div></code> mit einem <code>Ich würde</code> von <code>Held</code>), ein <code><div></code> jeweils für die <code>#Zuschauer</code> und <code>#Schieberegler</code> Elemente und eine einfache Benutzeroberfläche, die die Navigation der verschiedenen Inhaltsbereiche ermöglicht. Das <code>#Schieberegler</code> Element enthält auch ein <code><umbraco:Macro></code> Element, also werden wir diesen Teil des Helden-Panels mit einem XSLT-Makro erstellen, das wir in einem späteren Teil der Serie erstellen werden. Das Heldenpanel wird anfangs aus XSLT und dem hier gezeigten Markup erstellt und dann mit Skript bearbeitet.</p> <hr> <h2>Erstellen der Inhaltsvorlage</h2> <p>Unsere Inhaltsseiten sind relativ einfach und werden unter Verwendung einer einzigen Eigenschaft von der erstellt <code>Inhalt</code> Dokumentenart. In der Masterpage-Datei ändern Sie die <code>ContentPlaceHolderID</code> des <code><asp:Content></code> Element zu <code>BaseContent</code> genau wie wir es für die Homepage getan haben:</p> <pre> <asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Fügen Sie dann den folgenden Code zum hinzu <code><asp:Content></code> Element:</p> <pre><div><umbraco:Item field="pageCopy" runat="server" /></div></pre> <p>Das ist alles, das ist alles, was wir in unserer Inhaltsseitenvorlage verwenden werden. In der Realität wäre eine Inhaltsseite wahrscheinlich viel komplexer, aber für unser einfaches Beispiel sollte sie ausreichen. Wir haben eine äußere Hülle verwendet <code><div></code> dafür <code><umbraco:Item></code> weil der Artikel mit einem verknüpft ist <code>Rich-Text-Editor</code> und könnte so viele verschiedene Arten von Inhalten enthalten.</p> <hr> <h2>Die Nachrichtenvorlagen</h2> <p>Unsere NewsList-Vorlage wird fast so grundlegend sein wie unsere <code>Inhalt</code> Template wie die Seite wird weitgehend dynamisch mit einem XSLT-Makro erstellt. Vergiss nicht, das zu aktualisieren <code>ContenPlaceHolderID</code> zu <code>BaseContent</code> wie wir es in unseren anderen Vorlagen haben und fügen Sie dem Platzhalter dann folgende Elemente hinzu:</p> <pre><section> <h1>Aktuelle Nachrichten aus dem Unternehmen</h1> <umbraco:Macro Alias="newsList" runat="server" /> </section></pre> <p>Auf dieser Seite haben wir eine <code><section></code> Element, das die Hauptseitenüberschrift und das Makro enthält, aus dem die Nachrichtenliste besteht. Dies ist alles, was wir in dieser Vorlage brauchen, also gehen wir zum nächsten und letzten über. das <code>Nachricht</code>. Ändern Sie erneut die <code>ContentPlaceHolderID</code> zu <code>BaseContent</code> Fügen Sie dem Platzhalter dann den folgenden Code hinzu: </p><pre><article> <h1><umbraco:Item field="headline" runat="server" /></h1> <ul> <li>Veröffentlicht am <umbraco:Item field="date" formatAsDate="true" runat="server" /></li> <li>Durch <umbraco:Item field="creatorName" runat="server" /></li> </ul> <div> <umbraco:Item field="storyImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia(0, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia(0, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> <div><umbraco:Item field="newsText" runat="server" /></div> </div> </article> <nav> <umbraco:Macro Alias="newsNav" runat="server" /> </nav></pre> <p>Unsere <code>Nachricht</code> template ist etwas komplexer als die meisten anderen. Der Hauptcontainer für die Nachricht ist ein <code><article></code>, die enthält a <code></code> für die Schlagzeile und einige Informationen über die Nachricht, wie z <code>Datum</code> und <code>Autor</code>. Das Datum, das im ersten angezeigt wird <code><li></code>, ist mit dem verbunden <code>Datumsauswahl</code> Dieses Feld wurde dem entsprechenden Dokumenttyp für diesen Seitentyp hinzugefügt. Wir setzen die <code>formatAsDate</code> Attribut auf true, das das Datum stattdessen ohne eine hinzugefügte Zeitzeichenfolge formatiert. Das <code>Autor</code> wird mit der erhalten <code>creatorName</code> Eigenschaft, die Knoten (Seiten) automatisch hinzugefügt wird, wenn sie im Backend erstellt werden.</p> <p>Der Artikelkörper ist ein äußerer Behälter <code><div></code> die verwendet die <code>newsImage</code> Feld (dies ist im Wesentlichen das gleiche wie das Bannerbild auf der Homepage, das auch eine Medienauswahl verwendet. Die HTML-Entitäten enthalten wiederum umgekehrte Schrägstriche, damit sie hier korrekt angezeigt werden) und a <code><div></code> das verwendet ein <code><umbraco:Item></code> verbunden mit dem <code>newsText</code> Feld. Wir schaffen auch eine sekundäre <code><nav></code> Element, mit dem der Besucher direkt von der aktuellen Nachrichtenseite zu anderen Nachrichtenseiten navigieren kann, ohne zur Nachrichtenliste zurückkehren zu müssen. Dies wird aus einem Makro erstellt, das wir uns im nächsten Teil dieser Serie ansehen werden.</p> <hr> <h2>Seiten hinzufügen</h2> <p>Wir haben also mindestens ein paar Stunden damit verbracht, Dinge zu konfigurieren (mehr, wenn Sie VWD + SQL Server installieren mussten), also fügen wir bereits einige Seiten hinzu! In einer Umbraco-Site gibt es eigentlich keine einzelnen "Seiten" als solche. Denken Sie nicht zu sich selbst - "Ich brauche diese Seite, um etwas Einzigartiges zu tun, damit ich das oder das der darunterliegenden Seite hinzufügen kann" - es funktioniert einfach nicht so, es gibt keine darunterliegenden Seiten. Anstelle von Seiten haben wir Inhaltsknoten in der Knotenstruktur (insbesondere Knoten in der <code>Inhalt</code> Abschnitt des CMS-Backends) und Daten in der Datenbank. In der Datenbank sind einzelne URLs gespeichert, und jeder Knoten ist einer URL zugeordnet. Wenn also ein Besucher die Adresse einer Seite eingibt oder auf der Website navigiert, überprüft der CMS, welche URL angefordert wurde, und erstellt die Seite "on the fly" , unter Verwendung des Dokumenttyps und der Vorlage.</p> <p>Um die Startseite der Site zu erstellen, wechseln Sie zum Inhaltsbereich des CMS, klicken Sie mit der rechten Maustaste auf den Ordner Inhalt im linken oberen Bereich und wählen Sie Erstellen. Geben Sie im daraufhin angezeigten Dialogfeld als Name Home ein und wählen Sie als Dokumenttyp Homepage.</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2.jpg"><br> <p>Sobald wir die getroffen haben <code>Erstellen</code> Durch Klicken auf die Schaltfläche im Dialog wird der neue Knoten erstellt und im oberen linken Bereich des CMS angezeigt. Rechts daneben wird ein kleiner orangefarbener Stern angezeigt. Dies zeigt an, dass der Knoten gespeichert, aber nicht veröffentlicht wurde. Im rechten Bereich des CMS sehen wir die Registerkarten und Felder, die wir im Dokumenttyp in Teil 1 definiert haben <code>Inhalt</code> Die Registerkarte wird standardmäßig angezeigt, da es sich um die erste Registerkarte handelt. Die erste von uns definierte Eigenschaft war die <code>Einführungstext</code> Eigenschaft, die direkt dem Textbereich am oberen Rand des Fensters zugeordnet wird <code>Inhalt</code> Tab. Wir haben auch die definiert <code>Bannerbild</code> Diese Eigenschaft wird direkt dem unter dem Textbereich angezeigten Steuerelement für die Medienauswahl zugeordnet.</p> <p>Der Homepage-Inhaltsknoten erbt auch eine Eigenschaft von <code>Basis Seite</code> Dokumenttyp -die <code>Domänenname</code> - was auf der gesehen werden kann <code>Eigenschaften</code> Tab. Gehe zum <code>Eigenschaften</code> Tab jetzt. Es gibt mehrere wichtige Eigenschaften, die automatisch von Umbraco erstellt werden, einschließlich des Namens des Knotens. Hierbei handelt es sich um ein bearbeitbares Feld, sodass der Knotenname an jeder beliebigen Stelle leicht geändert werden kann <code>Dokumentenart</code> und <code>Vorlage</code> in Benutzung. Es gibt weitere nützliche Eigenschaften wie den Ersteller des Knotens und das Veröffentlichungsdatum. Eingeben <code>Das Unternehmen</code> in dem <code>Domänenname</code> Feld (dies kann das Format annehmen <code>Das Unternehmen</code>, oder eine tatsächliche URL wie www.thecompany.com, es macht keinen Unterschied, da sie einfach für den Titel der Seite verwendet wird..</p> <p>Beide <code>Einführungstext</code> und das <code>Bannerbild</code> sind obligatorische Eigenschaften, daher müssen beide ausgefüllt werden, bevor wir die Seite veröffentlichen können. Das <code>Einführungstext</code> ist einfach; Wir fangen einfach an, den Textbereich einzugeben. Wir können einige grundlegende Formatierungen mit der <code>Rich-Text-Editor</code> Schaltflächen oben auf der Registerkarte, aber im Wesentlichen vervollständigen wir diese Eigenschaft oder dieses Feld einfach durch Eingabe. Das <code>Bannerbild</code> ist etwas (aber nicht viel mehr) komplex und um es abzuschließen, müssen wir kurz mit einem anderen Abschnitt des CMS arbeiten - der Medienbibliothek.</p> <hr> <h2>Die Medienbibliothek</h2> <p>Die Medienbibliothek ist ein Repository für alle Medienressourcen wie Bilder, Videos, Audiodateien oder andere eingebettete Dateien oder Dokumente. Unsere <code>Bannerbild</code> Feld für die <code>Startseite</code> verwendet a <code>Medienauswahl</code>, Steuerelement, das ein Dialogfeld öffnet, in dem die Medienbibliothek angezeigt wird, und dem Endadministrator der Website die visuelle Auswahl des gewünschten Bilds ermöglicht. Bevor dies jedoch geschehen kann, müssen Elemente in der Medienbibliothek ausgewählt werden, die ausgewählt werden können.</p> <p>Um ein Element zur Medienbibliothek hinzuzufügen, wählen Sie einfach das <code>Medien</code> Klicken Sie auf das Symbol in der unteren linken Leiste des Back-End und dann, wenn der Knoten des Medienabschnitts im oberen linken Abschnitt geladen wurde, klicken Sie mit der rechten Maustaste auf den Ordner Media und wählen Sie <code>Erstellen</code> aus dem menü. Im erscheinenden Dialog können wir einen Namen für das Bild festlegen (denken Sie daran, dass der Name, den wir dem Knoten geben, im verwendet wird <code>alt</code> Attribut des Bildes, wenn es auf der Startseite angezeigt wird), und wählen Sie die Option <code>Medientyp</code>. Es gibt drei vordefinierte Typen, aus denen wir auswählen können. Ein Ordner, der nützlich sein kann, wenn wir viele verschiedene Medienelemente haben, die wir ordentlich kategorisieren und speichern möchten <code>Datei</code> Typ oder <code>Bild</code>, die wir in diesem Fall verwenden werden. Andere Medientypen können auf einfache Weise erstellt werden <code>die Einstellungen</code> Sektion.</p> <p>Einmal die <code>Erstellen</code> Wenn Sie auf die Schaltfläche im Dialogfeld klicken, wird das neue Bildelement erstellt, und im rechten Bereich des Editors werden einige Eigenschaften angezeigt, darunter eine Schaltfläche zum Hochladen. Klicken Sie auf die Schaltfläche zum Hochladen, um die Datei von unserem Computer auszuwählen, die wir hochladen möchten (ich habe ein vorgefertigtes Bild auf meinem Desktop, das hochgeladen werden kann). Wenn Sie das hochzuladende Bild ausgewählt und auf das Symbol zum Speichern in der Symbolleiste oben im rechten Bereich geklickt haben, wird das Bild Teil der Medienbibliothek und wird als Knoten in der Medienknotenstruktur angezeigt. Eine Miniaturansicht für das Bild wird ebenfalls erstellt und im angezeigt <code>Eigenschaften</code> Fenster rechts neben einigen Bildattributen:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2_2.jpg"><br> <p>Nun kann das Bild aufgenommen werden. Gehen Sie zurück zum Bild <code>Inhalt</code> Abschnitt und wählen Sie die <code>Zuhause</code> Knoten, den wir zuvor erstellt haben. In dem <code>Bannerbild</code> Feld unter dem Textbereich klicken Sie auf das <code>wählen</code> Link, um die Auswahl zu öffnen, die in einem Dialog angezeigt wird. Drücke den <code>Das Unternehmen tut dies!</code> Knoten im Picker und es wird in der gesetzt <code>Banner imag</code>e Feld. Das <code>Zuhause</code> node kann nun veröffentlicht werden. Klicken Sie daher auf das Symbol der Welt mit einer Diskette, um die Seite zu speichern und zu veröffentlichen.</p> <p>Das ist es; Sie haben Ihre erste Umbraco-Seite erstellt! Sie können die neue Seite anzeigen, indem Sie auf das Vorschausymbol (die Seite mit der Lupe) klicken, um sie im Vorschaumodus anzuzeigen, oder Sie können einfach eine neue Registerkarte in Ihrem Browser öffnen, die URL des Back-End kopieren, Fügen Sie ihn in die neue Registerkarte ein und entfernen Sie alles nach der Portnummer.</p> <p>Die Seite ist an dieser Stelle völlig unstilisiert, aber Sie sollten feststellen, dass der Intro-Text und das Bild, die wir im Backend eingestellt haben, zusammen mit der Markierung von der Seite auf der Seite angezeigt werden <code>Home.master</code> und <code>Basis Seite</code> Vorlagen. Das <code><umbraco:Item></code> Alle Elemente wurden aufgefüllt, aber alle <code><umbraco:Macro></code> Elemente sind noch nicht gefüllt worden, da wir XSLT dafür schreiben müssen.</p> <hr> <h2>Zusammenfassung</h2> <p>In diesem Teil des Lernprogramms haben wir die Funktionsweise von Umbraco-Vorlagen (sie repräsentieren .Net-Masterseiten) und deren Verschachtelung für eine maximale Wiederverwendung von Code beschrieben. Nachdem wir nun eine Seite erstellt haben, haben wir gesehen, wie die Dokumenttypen, Vorlagen und Knoten zusammenarbeiten, um die Eigenschaften zu erstellen, die wir im Backend bearbeiten können, und die Seiten, die unseren Besuchern angezeigt werden.</p> <p>Im nächsten Teil dieser Serie werden wir den Rest der Seiten für die Site erstellen und dann mit dem Schreiben des XSLT beginnen, das unter anderem die obere und untere Navigation sowie das Heldenpanel erstellt.</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/getting-started-with-umbraco-part-3.html">Erste Schritte mit Umbraco Teil 3</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-3.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/getting-started-with-umbraco-part-1.html">Erste Schritte mit Umbraco Teil 1</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-1.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Suche...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua