Modx-Schulung. MODX Revolution – Grundlegendes Tutorial. Bearbeiten einer Basisvorlage

Ich schreibe nicht darüber, warum MODx und wie ich dazu kam, so zu leben. Wenn jemand Interesse hat, herzlich willkommen bei mir. Wir gehen auch davon aus, dass Sie, wenn Sie zu dieser Lektion gekommen sind, nicht nur an der Erstellung von Websites, sondern auch an der Erstellung von Websites auf MODx interessiert sind. Nehmen wir an, dass Sie standardmäßig bereits über Folgendes verfügen:

• Computer (oder Laptop) mit installiertem Betriebssystem( , nicht wichtig)
• Maus zum Zeigen oder Klicken
• Tastatur zum Klicken oder Drücken
• Monitor
• Internet Zugang
• großer Wunsch, Websites zu erstellen

Das alles passt übrigens ganz gut in ein Gerät wie einen Laptop. Und wenn Sie planen, oft auf dem Land zu arbeiten, ist es besser, es zu kaufen. Machen Sie es sich bequem und wiederholen Sie, worüber ich als nächstes schreibe, und alles wird für Sie klappen!

Zunächst setzen wir alle Punkte und Kommas – ein Unterrichtsplan. Da Sie nicht sofort mit der Erstellung einer Website beginnen können, lernen wir Schritt für Schritt, wie das geht. Daher können Ihnen die ersten Lektionen etwas langweilig oder einfach erscheinen – mit zunehmendem Kompetenzerwerb werden die Aufgaben immer komplizierter.

MODx lernen Am besten beginnen Sie mit der Erstellung einer Visitenkarten-Website. Dies wird Ihnen nicht nur helfen, die Grundprinzipien des Systems zu verstehen, sondern auch zu lernen Unterscheidungsmerkmale, die erforderlich sind, um komplexere und interessantere Probleme zu stellen. Dies ist übrigens eine der drei Einnahmesäulen eines Webstudios, und auf ihnen kann man nicht nur Fuß fassen, sondern auch gutes Geld verdienen (wenn man es schnell macht und viele Kunden findet). ).

Was ist eine Visitenkarten-Website?

Eine Visitenkarten-Website ist eine kleine Website, die aus mehreren Webseiten besteht und grundlegende Informationen über die Organisation, Produkte oder Dienstleistungen, Preislisten und Kontaktinformationen enthält. (c) Wikipedia

Tatsächlich kann eine Visitenkarten-Website mit 4 Seiten mit reinem HTML erstellt werden, aber die Pflege einer solchen Website ist viel schwieriger – wenn Sie mindestens eine Seite hinzufügen, müssen Sie alles wiederholen. Also Content-Management-Systeme Machen Sie das Leben eines normalen Content-Managers oder Website-Betreibers viel einfacher.

So erstellen Sie eine Website auf Modex

Bevor wir mit der Entwicklung der Website beginnen, müssen wir einen Arbeitsplatz vorbereiten. Deshalb gehen wir mit der neuesten Version des MODx CMS/CMF-Systems auf die offizielle Website und laden sie herunter. Auf der offiziellen Website wird nur wenig Russisch gesprochen, was uns jedoch nicht davon abhält, die neueste Version herunterzuladen MODx-Version Evolution. Zum Zeitpunkt des Schreibens ist die neueste Version von MODx 1.0.8. (Buchstäblich am nächsten Tag nach der Veröffentlichung dieser Lektion wurde es bekannt gegeben eine neue Version MODx Evolution 1.0.9. Details zum Hub http://habrahabr.ru/post/173667/)

Sei vorsichtig: MODx 1.0.8 ist auch letzte Version, aber ein anderer Zweig des Steuerungssystems. Wenn Sie also gerade erst anfangen, sich mit MODx vertraut zu machen, sollten Sie Revolution 2 nicht überstürzen. Die Lektionen in diesem Kurs werden speziell für Evolution geschrieben.

Als nächstes müssen Sie entweder einen Webserver auf Ihrem Computer installieren oder sofort mit der Entwicklung einer Website auf Hosting-Basis beginnen. Ich bevorzuge die zweite Option, da bei einer Site-Übertragung von localhost manchmal unerwartete Fehler auftreten können. Das ist immer so.

In den vorherigen Lektionen haben wir modx installiert und konfiguriert sowie die Pakete installiert, die zum Erstellen einer Website erforderlich sind. In der heutigen Lektion geht es darum, reguläres HTML/CSS/JS-Design zu übertragen MODX Revo. Wo man das Design bekommen kann, das ich im Artikel geschrieben habe: MODX-Vorlagen – was sie sind, wo man sie bekommt (herunterladen, bestellen, kaufen). Für meine Website habe ich eine vorgefertigte kostenpflichtige Adaptive gewählt Bootstrap-Vorlage auf Themeforest für 17 US-Dollar namens Brightbox (klicken Sie auf den Namen, um die Demo und Beschreibung anzuzeigen). Sie können absolut jedes verwenden, es gibt viele davon und sie sind kostenlos – auf diese Weise werden Sie höchstwahrscheinlich das gesamte Spannungsprinzip besser verstehen.

HTML-Theme-Struktur

Fast jedes Theme verfügt über HTML-, CSS-, JS- und Bilddateien und viele auch PHP-Dateien- Formularverarbeiter.

In meinem Fall enthält der Ordner „Assets“ CSS- und JS-Dateien (in den entsprechenden Verzeichnissen), der Ordner „Bilder“ enthält Bilder und rote Dateien (Ihre sind möglicherweise nicht rot – alles hängt vom Standardbrowser ab) – das sind HTML-Dateien.

Übertragen einer Vorlage nach Modx

Am einfachsten ist es, einfach alle Dateien und Ordner (außer HTML) in das Stammverzeichnis der Website hochzuladen. Aber ich werde einen schwierigeren Weg gehen. Da mein Modx gehärtet ist und ich kein Assets-Verzeichnis habe, lade ich die Inhalte von Assets (CSS- und JS-Unterordner) in das Stammverzeichnis der Site und Bilder auch in das Stammverzeichnis hoch.

Zuvor habe ich ein Vorlagenverzeichnis erstellt und alle Dateien darin abgelegt – Sie können das Gleiche tun.

Bearbeiten einer Basisvorlage

Gehen Sie im Baum links auf die Registerkarte „Elemente“ und öffnen Sie sie erste Vorlage(Sie können einfach mit der linken oder rechten Maustaste klicken und Bearbeiten auswählen).

Wir löschen es und ersetzen es durch den Code aus index.html (den wir nicht zum Stammverzeichnis der Site hinzugefügt haben).

Sie können eine HTML-Datei mit einem normalen Editor öffnen, besser ist es jedoch beispielsweise, einen speziellen Editor zu verwenden.

Speichern Sie und gehen Sie zur Hauptseite der Website.

Hauptseite jetzt sieht es schief aus.

Dies geschah, weil sich die Pfade zu den Skripten und CSS geändert haben.

Pfade bearbeiten

Die Wege sehen jetzt so aus.

Das ist übrigens ein etwas seltsames Thema, normalerweise geht der Pfad durch einen Schrägstrich / und \, lasst uns das beheben.

Wenn Sie das ace-Paket bereits installiert haben, können Sie ganz einfach und unkompliziert eine Suche mit Ersetzen durchführen. Klicken Sie dazu auf den Code und drücken Sie dann die Tastenkombination Strg+H (funktioniert unter Linux und Windows). Geben Sie \ ein im oberen Feld und / im unteren Feld und drücken Sie alle.

Offizielle MODx-Website

http://modx.com/

Schulungsmaterialien zum Erstellen von Websites aufMODx

Snippet-Optionen

http://wiki.modxcms.com/index.php/Category:Snippets

Die neueste Version der Distribution kann unter http://modx.com/download/evolution/ heruntergeladen werden.

Reihenfolge der Website-Erstellung aufMODxEvolution

1. Erstellen Sie eine Datenbank und einen Benutzer mit einem vom Hoster festgelegten Präfix, um die Datei config.inc.php später nicht bearbeiten zu müssen.
2. Installieren Sie MODx. Nehmen Sie Einstellungen vor.
3. Kopieren Sie die Site-Vorlage in den Ordner „assets/templates“.
4. Kopieren Sie den Code der index.html-Vorlage in die Vorlage „Minimal Templates“.
5. Innen Registrieren Sie den Pfad

   .

6. Schreiben Sie Pfade zu Skripten, Bildern und Stilen (img, link, scrypts). Zum Beispiel,

7. Bestimmen Sie, wie viele Vorlagen auf der Website vorhanden sein werden.
8. Wählen Sie Teile aus, die allen Seiten gemeinsam sind; es handelt sich dabei um Blöcke. Chunks werden doppelt ausgegeben Geschweifte Klammern. Zum Beispiel ((KOPF))
9. Das Hauptmenü der Site kann in einem separaten Abschnitt platziert werden. .
10. Das Menü auf der Website und die Sitemap werden mithilfe des Wayfinder-Snippets angezeigt. Beschreibung des Wayfinder-Snippets.
11. Eine Liste von Ressourcen, einschließlich Beschreibungen, Bildern, Links ... wird als Ditto-Snippet angezeigt. Beschreibung und Beispiele des Ditto-Snippets.
12. Die Breadcrumb-Navigationskette wird mithilfe des Breadcrumbs-Snippets angezeigt. Beschreibung des Breadcrumbs-Snippets.
13. Die Suche auf der Website erfolgt mithilfe des AjaxSearch-Snippets. Beschreibung des AjaxSearch-Snippets.
14. Bilden Rückmeldung- eForm-Ausschnitt. Ein Beispiel für die Erstellung eines Feedback-Formulars mithilfe des eForm-Snippets.
15. Das Phx-Plugin dient dazu, das Fehlen eines Bildes in einem TV-Parameter zu überprüfen, die Elterneigenschaften zu bestimmen usw.
16. Es ist notwendig, zusätzlich mehrere Stile zu registrieren.
17. Nach der Übertragung der Site auf das Hosting:

Hallo zusammen, Freunde! Dies ist ein grundlegendes Tutorial zu CMF MODX Revolution, in dem wir uns mit dem MODX-System vertraut machen, die erforderlichen Plugins installieren und ausführen Grundeinstellung Rahmen.

Cool

Stammeln

Grundlegende MODX-Lektionsressourcen:

• pdoTools-Dokumentation: docs.modx.pro/components/pdotools/

MODx-Plugins installieren und konfigurieren

Installieren Fortschrittlich Version von MODx, während der Installation geben wir an, dass der Admin-Ordner aufgerufen wird super.

Unverzichtbare MODx-Plugins

Die beliebtesten und am häufigsten genutzten Addons für MODx:

1. As- MODx-Code-Editor;
2. Sammlungen- Anzeige und Verwaltung von Ressourcensammlungen;
3. pdoTools- eine Reihe grundlegender MODx-Tools;
4. FormIt- Arbeiten mit Formularen in MODx;
5. phpThumbOf- Arbeiten mit Bildern in MODx;
6. TinyMCE / CKEditor (optional)- Text-WYSIWYG-Editor für MODx;
7. translit- URL-Transliteration in MODx;
8. MIGX- Zusätzliche Felder zu MODx hinzugefügt;
9. AutoTemplate- „Intelligente“ automatische Zuordnung von Vorlagen zu Ressourcen.

MODx Revolution Grundeinstellungen

Gehe zu " Systemeinstellungen".

1. Abschnitt: Freundliche URLs

   • Transliteration von Pseudonymen: Russisch;
   • Verwenden Sie benutzerfreundliche URLs: Ja;
   • Strikter benutzerfreundlicher URL-Modus: Ja;
   • Suchen Sie in allen Kontexten nach doppelten URIs: Ja;
   • Verwenden Sie verschachtelte URLs: Ja;
   • Vergessen Sie nicht, auch umzubenennen ht.access V .htaccess im Stammverzeichnis der Website.

2. Abschnitt: Systemsteuerung

   • Beschreibung im oberen Menü anzeigen: Nein.

3. Abschnitt: Website

   • 404 Fehlerseite „Dokument nicht gefunden“: Ressourcen-ID 404;
   • Standardmäßig veröffentlichen: Ja;
   • Name der Website: Der Name Ihres Projekts.

4. Abschnitt: System und Server

   • X-Powered-By-Header senden: Nein.

5. Namensraum: Ace

   • Schriftgröße: 18px;
   • Soft-Tab: Nein;
   • Tab-Größe: 2;
   • Editor-Theme (optional): Ambiente, Chaos, Chrom, Wolken, Clouds_Midnight, Kobalt, Crimson_Editor, Dawn, Dreamweaver, Eclipse, Github, Idle_fingers, Katzenmilch, Kr, Kuroir, Merbivore, Merbivore_soft, Mono_Industrial, Monokai, Pastel_on_Dark, Solarized_Dark, Solarized_Light, Terminal, Textmate, Morgen, Tomorrow_night, Tomorrow_night_blue, Tomorrow_night_bright, Tomorrow_night_eighties, Twilight, Vibrant_ink, xcode;
   • Darüber hinaus können Sie ein Thema erstellen Material im Ace-Editor. Anweisungen:

     MODx Ace Material Theme 1. Systemeinstellungen > Namespace „ace“: Schriftgröße: 15px Höhe des Bearbeitungsbereichs: 560 Unsichtbare Zeichen: Ja Soft Tab: Nein Tab-Größe: 2 Editor-Theme: morgen_Nacht 2. Dateien: Dateisystem > Super > Vorlagen > Standard > css > index.css: (Am Ende hinzufügen) .ace_editor(line-height: 1.4!important;font-family: „Menlo“, „Ubuntu Mono“, „Consolas“, „source-code-pro“, monospace !important) .ace_gutter(color:#666E79!important) .ace_active-line,.ace_gutter-active-line(background-color:#2A2F38!important) .ace_scroller,.ace_gutter (background-color: #272B33!important) . ace_meta.ace_tag(color:#A6B2C0!important) .ace_meta.ace_tag.ace_tag-name(color:#DF6A73!important) .ace_entity.ace_other.ace_attribute-name(color:#D2945D!important) .ace_string(color:#90C378 !important) 3. Leeren Sie den Cache über das Menü.

Basisressourcen erstellt

1. Seite 404- Seite zur Einstellung „Dokument nicht gefunden“. Nicht im Menü anzeigen;
2. Seitenverzeichnis- Ressource für den Rückzug [] . Leere Vorlage. Nicht im Menü anzeigen. Inhaltstyp: XML. Nicht durchsuchbar. Benutzen Sie keinen HTML-Editor;
3. Roboter- Ressource für den Rückzug robots.txt. Leere Vorlage. Nicht im Menü anzeigen. Inhaltstyp: Text. Nicht durchsuchbar. Verwenden Sie keinen HTML-Editor.