Eine 15-minütige surreale CMS-Integration

Sie haben Ihre Website bereits erstellt, aber wie wollen Sie sie pflegen? In diesem Lernprogramm erfahren Sie, wie Sie Ihre Website in weniger als 15 Minuten in Surreal CMS integrieren können. Wir werden einige der "gotchas" durchgehen und Sie können praktisch jede statische Website in kürzester Zeit bearbeiten.

Überblick

Sie fragen sich wahrscheinlich, wie Sie Ihre gesamte Website in nur 15 Minuten in ein CMS integrieren könnten. Aufgrund des jüngsten Trends der "leichten" Content-Management-Systeme wird es immer einfacher, kleine bis mittelgroße statische Websites in Betrieb zu nehmen.

Was ist ein leichtes CMS? Für dieses Tutorial definiere ich es als ein einfach zu verwendendes, unauffälliges Content-Management-System, das Sie nicht installieren müssen. Das Schöne an diesen Systemen ist, dass Sie sie nicht einmal selbst hosten müssen, weshalb die Integration sehr wenig Zeit in Anspruch nimmt.

Es gibt tatsächlich eine Handvoll dieser CMS-Produkte, einschließlich CushyCMS, Pagelime und SimpleCMS. Die meisten dieser Systeme arbeiten nach dem gleichen Prinzip - Sie fügen hinzu class = "etwas" Mit fast jedem HTML-Element verknüpfen Sie Ihre Website mit ihrem System, und Sie sind fertig. Das Beste ist, dass jedes dieser Systeme eine kostenlose Version bietet.

Obwohl jedes leichte CMS-Produkt seine Vor- und Nachteile hat, entschied ich mich aufgrund der umfangreichen Funktionen und der einfachen Benutzeroberfläche für Surreal CMS. Sie werden genau sehen, was ich in einem Moment meine, aber in der Zwischenzeit ist hier der allgemeine Prozess der Integration mit einem Light-CMS:

Erstellen Sie Ihre Website
Verbinden Sie es mit dem CMS
Webseiten aktivieren
Fügen Sie einen oder mehrere Editoren hinzu
Beginnen Sie mit der Bearbeitung

Um Sie mit dem Tool, mit dem wir arbeiten werden, vertraut zu machen, erhalten Sie hier einen kurzen Einblick in den Bearbeitungsbildschirm von Surreal CMS:

Entwurfsüberlegungen

Bevor Sie mit einem leichten CMS arbeiten, sollten Sie immer über Dinge wie die Zeichencodierung und die Art und Weise, wie Sie mit Bildern und anderen Ressourcen verknüpfen, nachdenken. Surreal CMS bevorzugt, dass Sie die UTF-8-Zeichenkodierung verwenden. Dies ist so einfach wie das Hinzufügen des folgenden Meta-Tags zum Abschnitt jeder Webseite:

Es ist auch wichtig, dass Sie mit Dokumenten, Bildern und anderen Ressourcen auf eine Weise verknüpfen, die der CMS verstehen kann. Surreal CMS funktioniert am besten, wenn Sie root-relative oder absolute Links verwenden:

 ……

Das Letzte, aber wahrscheinlich Wichtigste, bevor Sie Ihre Website mit Surreal CMS verknüpfen, ist die Platzierung Ihrer Inhaltsbereiche. Hier ist ein hervorragendes Beispiel für eine sehr einfache Webseite, die über ein Navigationsmenü, eine Seitenleiste und einen Hauptinhaltsbereich verfügt:

    Beispiel-Webseite        Example.com
 
   
   Inhalt der Seitenleiste hier
 
  Ihr Inhalt hier
 
 
  © Beispiel.com

Sie haben vielleicht bemerkt, dass ich hinzugefügt habe bearbeitbar Klassen in die Seitenleiste und den Hauptinhaltsbereich. So weiß der CMS, welche Abschnitte Ihrer Seite Sie bearbeiten dürfen. Sie können das hinzufügen bearbeitbar Sie können fast jedes HTML-Tag klassifizieren, und Sie können auf jeder Seite beliebig viele davon haben.

Vielleicht haben Sie auch bemerkt, dass die Navigation aus einer separaten Datei über PHP eingefügt wird. Mit Surreal CMS können Sie mit solchen Dateien arbeiten, sodass Sie die Navigation Ihrer gesamten Website aktualisieren können, ohne jede Seite einzeln bearbeiten zu müssen.

Sobald Sie Ihre Seiten vorbereitet und bearbeitbare Regionen eingerichtet haben, können Sie Ihre Website in Surreal CMS integrieren.

Hinzufügen Ihrer Website zum CMS

Surreal CMS bietet sowohl kostenlose als auch kostenpflichtige Konten an. Das kostenlose Konto hat sehr wenige Einschränkungen und ist für dieses Tutorial mehr als ausreichend. Gehen Sie einfach auf ihre Website und erstellen Sie ein kostenloses Konto.

Wenn Sie Ihr Konto erstellt haben, melden Sie sich unter http://edit-content.com/ beim CMS an. Dies ist der Zugang zur Surreal CMS-Anwendung.

Jetzt, wo Sie sich befinden, wählen Sie die Schaltfläche aus Fügen Sie eine Website hinzu. Hier ist das Formular, das Sie sehen werden:

Geben Sie die URL, den Server (normalerweise ftp.ihr-domain.com), den FTP-Benutzernamen und das FTP-Passwort Ihrer Website ein. Sie können überprüfen, ob Sie alles richtig eingegeben haben, indem Sie auf klicken Testverbindung.

Für das Website-Stammverzeichnis klicken Sie am besten auf Durchsuche und verwenden Sie das Browsing-Tool. Im Wesentlichen ist Ihr Website-Stamm der Ordner, der Ihre Startseite enthält. Es ist wichtig, dass es sich bei diesem Ordner um den Ordner handelt, der Ihre Startseite enthält, damit der CMS URLs ordnungsgemäß Bildern und anderen Dateien zuordnen kann.

Wenn Sie benutzerdefinierte Pfade für Dokumente, Bilder und Mediendateien angeben möchten, wählen Sie die Option Erweitert Möglichkeit. Wenn Sie benutzerdefinierte Pfade festlegen, wird dem CMS mitgeteilt, wo andere Personen, die Ihre Website bearbeiten, Dateien hochladen dürfen. Für jetzt können Sie diese Felder leer lassen.

Aktivieren Ihrer Webseiten

Nachdem Ihre Website zum CMS hinzugefügt wurde, müssen Sie als Nächstes Ihre Webseiten aktivieren. Bei anderen leichten CMS-Produkten kann dies Ihre Zeit ein wenig beanspruchen, aber Surreal CMS verfügt über eine schöne Scan-Funktion, mit der Webseiten mit einem Klick automatisch aktiviert werden.

Um mit der Aktivierung von Seiten zu beginnen, wählen Sie Ihre Website aus der Liste aus:

Als nächstes auswählen Webseiten aktivieren. Der folgende Dialog erscheint:

Wählen Sie die Seite (n) aus, die Sie im CMS bearbeiten möchten. Wenn Sie sie auswählen, werden sie einzeln im Hintergrund angezeigt. Als Verknüpfung können Sie zu einem beliebigen Verzeichnis auf Ihrer Website navigieren und auf klicken Scannen Sie nach bearbeitbaren Seiten. Dadurch wird der CMS angewiesen, jede Seite im aktuellen Verzeichnis zu aktivieren, die über eine class = "editierbar" Attribut in ihm. Wenn Sie fertig sind, wählen Sie Erledigt.

Standardmäßig verwendet jede Seite, die Sie aktivieren, die der Seite als Etikett. Sie können dies einfach in etwas CMS-freundlicher umwandeln, indem Sie auf klicken <b>Label bearbeiten</b>. Beispielsweise können Sie die Bezeichnung für ändern <b>index.php</b> "Homepage" und das Etikett für <b>nav.php</b> "Navigation" lesen.</p> <hr> <h2>Aktualisieren Sie Ihre Inhalte</h2> <p> Ob Sie es glauben oder nicht, der schwierige Teil ist vorbei. Jetzt ist es nur noch eine Frage des Einstiegs und der Bearbeitung von Inhalten. Ein Grund, warum ich Surreal CMS so mag, ist, dass es die meisten Einstellungen optimiert. Lassen Sie uns nun mit dem Bearbeiten von Inhalten fortfahren.</p> <p> Nachdem Sie eine oder mehrere Webseiten aktiviert haben, beginnen Sie mit der Bearbeitung. Wählen Sie einfach eine der von Ihnen aktivierten Seiten aus, indem Sie auf das entsprechende Seitenetikett klicken. Dadurch gelangen Sie in den Webseiten-Editor, in dem Sie die meiste Zeit mit diesem großartigen CMS verbringen.</p> <p> Im Webseiten-Editor sehen Sie vier Registerkarten:</p> <ul> <li> <b>Inhalt</b> - Hier finden Sie alle Ihre Inhaltsbereiche.</li> <li> <b>Eigenschaften</b> - Sie können den Seitentitel, die Schlüsselwörter und die Beschreibung hier bearbeiten.</li> <li> <b>Geschichte</b> - Sehen Sie sich jede Version dieser Seite an, die bis zu 90 Tage lang veröffentlicht wird.</li> <li> <b>Redakteure</b> - Liste aller Editoren anzeigen, die Zugriff auf die Seite haben.</li> </ul> <p> Innerhalb der <b>Inhalt</b> Wenn auf Ihrer Seite mindestens ein bearbeitbarer Bereich vorhanden ist, wird Folgendes angezeigt:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_6.jpg"> <p> Dieses spezielle Beispiel hat die zwei bearbeitbaren Regionen, über die wir zuvor gesprochen haben: <b>Seitenleiste</b> und <b>Hauptinhalt</b>. Sie werden feststellen, dass der CMS die durch Kleinbuchstaben getrennten, durch Unterstriche getrennten IDs in aus Platzgründen getrennte Camel Case-Etiketten für die Ästhetik konvertierte. Wenn Sie mehr als einen bearbeitbaren Bereich auf einer Seite haben, können Sie zwischen diesen wechseln, indem Sie auf die entsprechende Schaltfläche klicken.</p> <p> An diesem Punkt funktioniert das Bearbeiten genauso wie in vielen anderen Content-Management-Systemen und Textverarbeitungsanwendungen. Sie können Text formatieren, die Ausrichtung ändern, Bilder einfügen, Listen usw. einfügen. Surreal CMS verfügt sogar über einen integrierten Dateimanager, mit dem Sie Dateien und Ordner anzeigen, hochladen, umbenennen und löschen können. Um das Ganze abzurunden, gibt es auch einen Bild-Editor, mit dem Sie die Größe von Bildern ändern, zuschneiden, drehen und kippen können.</p> <p> Abhängig von der Art des Elements, das Sie hinzufügen <b>class = "editierbar"</b> Um dies zu tun, wird Surreal CMS ein geeignetes Bearbeitungswerkzeug zur Verfügung stellen. Als Beispiel ist hier was ein editierbares <img> sieht aus wie:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_7.jpg"> <p> Das <b>Bild bearbeiten</b> Die Schaltfläche startet den Bildeditor, über den ich zuvor gesprochen habe. Es ist sehr einfach zu bedienen, Sie sollten also keinerlei Probleme damit haben, Ihre Fotos zu bearbeiten. So sieht es aus:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_8.jpg"> <p> Wenn Sie mit der Bearbeitung fertig sind, können Sie eine Vorschau Ihrer Änderungen anzeigen, indem Sie auf klicken <b>Vorschau</b>. Ein neues Fenster wird geöffnet und Sie sehen Ihre Seite <i>genau</i> wie es erscheint, wenn es veröffentlicht wird. Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie auf <b>Veröffentlichen</b> speichert sie auf Ihrer Website.</p> <hr> <h2>Zulassen, dass andere Personen Ihre Website bearbeiten</h2> <p> Nun, da Sie wissen, wie Sie Ihre Website einrichten und selbst bearbeiten, wäre es nicht schön, auch anderen Personen Zugriff zu gewähren? Dies ist besonders nützlich für Designer, die Kunden einen eingeschränkten Zugriff auf die Bearbeitung ihrer eigenen Websites gewähren möchten. Die Einrichtung ist einfach.</p> <p> Wählen Sie zuerst das <b>Redakteure</b> Klicken Sie an einer beliebigen Stelle im CMS auf <b>Einen Editor hinzufügen</b>. Das folgende Formular wird angezeigt:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_9.jpg"> <p> Geben Sie einfach den Namen und die E-Mail-Adresse der Person ein, um zu beginnen. Wählen Sie dann die Website (s) aus, der / denen er zugewiesen werden soll. Wenn Sie möchten, können Sie das öffnen <b>Erweitert</b> und erlauben Sie dem Editor, Seiten zu klonen, Seiten zu löschen und Seiteneigenschaften zu bearbeiten. Sie können von hier aus auch jede Option in der Symbolleiste des Rich-Text-Editors aktivieren oder deaktivieren.</p> <p> Wenn Sie alle erforderlichen Informationen eingegeben haben, wählen Sie <b>Editor hinzufügen</b> und der Benutzer wird zum CMS hinzugefügt. Standardmäßig wird eine E-Mail mit ihrem Benutzernamen und Kennwort an sie gesendet. Sie können dies jedoch deaktivieren, und der CMS zeigt Ihnen das temporäre Kennwort, mit dem Sie es manuell angeben können.</p> <p> Es gibt ein paar Dinge, die Sie über Editor-Konten wissen müssen. Erstens haben sie keinen Zugriff auf <i>alles</i> als Designer - Redakteure haben nur Zugriff auf die Websites und Berechtigungen, die Sie ihnen zuweisen. Zweitens haben Redakteure keinen Zugriff auf Dinge wie die Bearbeitung von vollständigem Quellcode und das Tidy-Tool, über das wir in Kürze sprechen werden. Der beste Weg, um herauszufinden, worin der Unterschied zwischen einem Designer- und einem Editor-Konto besteht, besteht darin, sich einen Test-Editor mit einer alternativen E-Mail-Adresse anzulegen.</p> <p> Bevor wir fortfahren, gibt es eine weitere Funktion, die Sie über Editoren kennen sollten. Sie können verhindern, dass bestimmte Seiten pro Benutzer bearbeitet werden. Öffnen Sie einfach eine beliebige Seite zum Bearbeiten und wählen Sie die <b>Redakteure</b> Tab. Neben Ihrem Editor wird eine Option angezeigt <b>Deaktivieren</b> Bearbeitung. Durch Klicken auf diese Option wird verhindert, dass der Benutzer die aktuelle Seite bearbeitet.</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_10.jpg"> <hr> <h2>Andere nützliche Funktionen</h2> <p> Bisher haben wir alles von der Integration von Surreal CMS in Ihre Website bis zur Bearbeitung von Seiten abgedeckt. Der Spaß hört hier jedoch nicht auf. Hier finden Sie eine Liste mit Funktionen, die Sie nutzen können, wenn Sie sich näher mit den Funktionen von Surreal CMS beschäftigen:</p> <h3>Klonen von Webseiten</h3> <p> Sie können neue Seiten erstellen, indem Sie vorhandene Seiten duplizieren. Dies ist besonders hilfreich, da Sie eine oder mehrere leere Vorlagenseiten einrichten können und Ihre Benutzer die Seiten nach Bedarf erstellen lassen. Sie können dies auch für jeden Benutzer aktivieren oder deaktivieren, sodass erfahrene Redakteure die Site besser steuern können.</p> <h3>Gestalten des Rich-Text-Editors</h3> <p> Wenden Sie Stile von Ihrer Website an den Rich-Text-Editor an, um Benutzern ein ähnliches Aussehen und ein ähnliches Erscheinungsbild wie die Website zu geben. Um auf diese Funktion zuzugreifen, wählen Sie <b>Websites</b> Klicken Sie auf eine beliebige Stelle im CMS und wählen Sie eine Website aus. Sie sehen eine Schaltfläche mit der Bezeichnung <b>Editierstile ändern</b>.</p> <h3>Bearbeiten von CSS-, JavaScript- und XML-Dateien</h3> <p> Sie können Stylesheets, Skripts und XML-Dateien wie jede andere Webseite aktivieren. Natürlich bearbeiten Sie rohen Quellcode. Daher möchten Sie möglicherweise unerfahrenen Benutzern den Zugriff auf diese Dateitypen sperren, wenn Sie sie aktivieren.</p> <h3>Bearbeiten des vollständigen HTML-Quellcodes</h3> <p> Beim Bearbeiten einer Webseite wird eine Schaltfläche mit der Bezeichnung "Inhaltsbereiche bearbeiten" angezeigt. Auf diese Weise können Sie auf den vollständigen Quellcode der Seite zugreifen. Redakteure haben keinen Zugriff auf dieses Tool.</p> <h3>Unordentlichen HTML-Code mit Tidy reparieren</h3> <p> Surreal CMS verfügt über ein integriertes Tool, das die beliebte HTML Tidy-Bibliothek verwendet. Dies ist nützlich, um verschachtelte Tags oder ungültigen HTML-Code zu korrigieren, der Probleme beim Bearbeiten verursachen kann. Sie können auf dieses Tool von der vollständigen Seite zum Bearbeiten des Quellcodes aus zugreifen.</p> <h3>Editor-Aktivität anzeigen</h3> <p> Sie können sehen, was Ihre Redakteure geplant haben! Dies beinhaltet, auf welche Seiten sie zugegriffen haben, wann sie bearbeitet wurden, und sogar die Zeiten, zu denen sie sich beim CMS angemeldet haben. Um diese Informationen anzuzeigen, wählen Sie <b>Redakteure</b> Registerkarte im CMS und wählen Sie einen Editor. Klicken Sie auf den Namen der Editoren, um die zuletzt durchgeführten Aktivitäten anzuzeigen.</p> <h3>Pro-Funktionen</h3> <p> Surreal CMS kann kostenlos für bis zu drei Websites verwendet werden. Danach werden Sie gebeten, für den bezahlten Service 25 US-Dollar pro Monat zu zahlen, aber für Pro-Konten gibt es auch ein paar andere nette Funktionen. Sie können zum Beispiel von Ihrer eigenen Domäne oder Subdomain (d. H. Cms.ihr-domain.com) auf das CMS zugreifen..</p> <p> Mit einem Pro-Konto können Sie auch Ihr eigenes Logo hochladen und das Design anpassen. Dies ist ideal für Designer, die das CMS als Lösung für ihre Kunden verwenden möchten. Hier ein Beispiel, was Sie erwarten können, wenn Sie das CMS als Ihr eigenes kennzeichnen:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_11.jpg"> <hr> <h2>Zusätzliche Ressourcen</h2> <p> Nachdem Sie nun alle Grundlagen (und einige fortgeschrittene Tipps!) Kennen, finden Sie hier einige nützliche Ressourcen für die Arbeit mit Surreal CMS:</p> <ul> <li>Surreale CMS-Homepage</li> <li>Anmeldeseite</li> <li>CMS-Dokumentation</li> <li>Häufig gestellte Fragen</li> <li>Surreales CMS-Partnerprogramm</li> </ul> <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/design/a-20-minute-intro-to-typography-basics.html">Eine 20-minütige Einführung in die Grundlagen der Typografie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_6/a-20-minute-intro-to-typography-basics_8.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/a-12-step-beginners-guide-to-iphoneography.html">Ein 12-Schritte-Einsteigerhandbuch zur iPhoneographie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/a-12-step-beginners-guide-to-iphoneography_13.jpg');"></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>