Formazione rivoluzione Modx. MODX Revolution - Tutorial di base. Installazione e configurazione dei plugin MODx

Ciao a tutti, amici! Questo è un tutorial di base su CMF MODX Revolution, in cui faremo conoscenza con il sistema MODX, installeremo i plugin necessari ed eseguiremo la configurazione di base del framework.

Classe

Zapin

Risorse della lezione MODX di base:

• Documentazione pdoTools: docs.modx.pro/components/pdotools/

Installazione e configurazione dei plugin MODx

Installare Avanzate Versione MODx, durante l'installazione indichiamo che verrà chiamata la cartella admin super.

Plugin MODx indispensabili

Gli addon più popolari e più utilizzati per MODx sono:

1. Asso- Editor di codice MODx;
2. Collezioni- visualizzazione e gestione di raccolte di risorse;
3. pdoTools- un insieme di strumenti di base MODx;
4. FormIt- lavorare con moduli in MODx;
5. phpThumbOf- lavorare con le immagini in MODx;
6. TinyMCE / CKEditor (opzionale)- Editor di testo WYSIWYG per MODx;
7. translit- traslitterazione dell'URL in MODx;
8. MIGX- Aggiunti campi aggiuntivi in ​​MODx;
9. Modello automatico- Assegnazione automatica "intelligente" di modelli alle risorse.

Impostazioni di base di MODx Revolution

Vai a " Impostazioni di sistema".

1. Sezione: URL amichevoli

   • Traslitterazione degli alias: russo;
   • Usa URL amichevoli: Sì;
   • Modalità URL amichevole rigorosa: Sì;
   • Verifica la presenza di URI duplicati in tutti i contesti: Sì;
   • Usa URL nidificati: Sì;
   • Non dimenticare di rinominare anche tu ht.access v .htaccess alla radice del sito.

2. Sezione: Pannello di controllo

   • Mostra descrizione in menu in alto: No.

3. Sezione: Sito web

   • 404 Pagina di errore "Documento non trovato": ID risorsa 404;
   • Pubblica per impostazione predefinita: Sì;
   • Nome del sito: Il nome del tuo progetto.

4. Sezione: Sistema e Server

   • Spedire Intestazione X-Powered-By: No.

5. Spazio dei nomi: asso

   • Dimensione del font: 18 pixel;
   • Schede morbide: No;
   • Dimensione della linguetta: 2;
   • Tema dell'editor (opzionale): ambiance, caos, cromo, alba, cloud_midnight, cobalto, crimson_editor, eclipse, dreamweaver, github, idle_fingers, katzenmilch, kr, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, terminalized domani_night_bright, domani_notte, domani_notte crepuscolo, vibrant_ink, xcode;
   • Inoltre, puoi creare un tema Materiale nell'editor di Ace. Istruzioni:

     MODx Ace Material Tema 1. Preferenze di sistema > "ace" Spazio dei nomi: Dimensione carattere: 15 px Altezza area di modifica: 560 Caratteri invisibili: Sì Schede morbide: No Dimensioni schede: 2 Tema editor: domani_notte 2. File: Filesystem > super > modelli > predefinito > css> index.css: (Aggiungi alla fine) .ace_editor (line-height: 1.4! importante; font-family: "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace ! importante) .ace_gutter (colore: # 666E79! importante) .ace_active-line, .ace_gutter-active-line (colore di sfondo: # 2A2F38! importante) .ace_scroller, .ace_gutter (colore di sfondo: # 272B33! importante). ace_meta.ace_tag (colore: # A6B2C0! importante) .ace_meta.ace_tag.ace_tag-name (colore: # DF6A73! importante) .ace_entity.ace_other.ace_attribute-name (colore: # D2945D! importante) .ace_string (colore: # 90C378 importante) 3. Cancellare la cache tramite il menu.

Risorse di base create

1. 404 pagina- pagina per l'impostazione "Documento non trovato". Non mostrare nel menu;
2. Mappa del sito- risorsa per il ritiro [] ... Modello vuoto. Non mostrare nel menu. Tipo di contenuto: XML. Non ricercabile. Non utilizzare un editor HTML;
3. robot- risorsa per il ritiro robots.txt... Modello vuoto. Non mostrare nel menu. Tipo di contenuto: testo. Non ricercabile. Non utilizzare un editor HTML.

Sito ufficiale MODx

http://modx.com/

Tutorial per la creazione di siti web suMODx

Parametri snippet

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

L'ultima versione della distribuzione può essere scaricata da http://modx.com/download/evolution/

La sequenza di creazione di un sito suMODxEvoluzione

1. Crea un database e un utente con un prefisso determinato dall'host, in modo da non modificare in seguito il file config.inc.php.
2. Installa MODx. Effettua le impostazioni.
3. Copia il modello del sito nella cartella asset/modelli.
4. Copia il codice del modello index.html nel modello Modelli minimi.
5. Dentro registra il percorso

   .

6. Registra percorsi a script, immagini, stili (img, link, scrypts). Per esempio,

7. Determina quanti modelli saranno presenti sul sito.
8. Seleziona le parti comuni a tutte le pagine, saranno dei blocchi. I pezzi vengono visualizzati tra parentesi graffe doppie. Ad esempio, ((TESTA))
9. Il menu principale del sito può essere posizionato in un blocco separato. ...
10. Il menu del sito e la mappa del sito vengono visualizzati utilizzando lo snippet Wayfinder. Descrizione del frammento di Wayfinder.
11. Un elenco di risorse tra cui descrizioni, immagini, collegamenti ... viene visualizzato dallo snippet di Ditto. Idem descrizione snippet ed esempi.
12. La catena di navigazione breadcrumbs è resa dallo snippet Breadcrumbs. Descrizione del frammento di pangrattato.
13. Il sito viene cercato dallo snippet AjaxSearch. Descrizione dello snippet AjaxSearch.
14. Il modulo feedback- Frammento di modulo elettronico. Un esempio di creazione di un modulo di feedback utilizzando lo snippet eForm.
15. Il plug-in Phx è progettato per verificare l'assenza di un'immagine nel parametro TV, determinare le proprietà del genitore, ecc.
16. È necessario registrare anche diversi stili.
17. Dopo aver trasferito il sito in hosting:

Nei tutorial precedenti, abbiamo installato e configurato modx, nonché installato i pacchetti che saranno necessari per creare il sito. La lezione di oggi riguarda il trasferimento del normale design HTML / CSS / JS a MODX Revo. Dove posso trovare il design, ho scritto nell'articolo: Modelli MODX- che cos'è, dove trovarlo (scarica, ordina, acquista). Per il mio sito, ho scelto un adattivo a pagamento già pronto modello di bootstrap su themeforest per $ 17 chiamato brightbox (clicca sul nome per vedere la sua demo e descrizione). Puoi usarne assolutamente qualsiasi, sono pieni e gratuiti, quindi molto probabilmente capirai meglio l'intero principio dello stretching.

Struttura dei temi HTML

Quasi tutti i temi contengono file html, css, js e immagine + molti li hanno ancora file php- gestori di moduli.

Nel mio caso, la cartella asset contiene file css e js (nelle directory corrispondenti), nella cartella immagini - immagini e file rossi (potresti non avere quelli rossi - tutto dipende dal browser installato di default) - questi sono html File.

Trasferimento di un modello a Modx

Il modo più semplice è caricare semplicemente tutti i file con cartelle (eccetto html) nella radice del sito web. Ma andrò nella via più complicata. Poiché modx è temperato e non ho una directory di risorse, caricherò il contenuto dalle risorse (sottocartelle css e js) nella radice del sito e anche le immagini nella radice.

In precedenza ho creato la directory dei modelli e ci ho inserito tutti i file: puoi fare lo stesso.

Modifica del modello di base

Nell'albero a sinistra, vai alla scheda "Elementi" e apri il modello iniziale (puoi semplicemente fare clic su LMB o PKM e selezionare modifica).

Lo rimuoviamo e lo sostituiamo con il codice di index.html (che non abbiamo inserito nella root del sito).

Puoi aprire il file html usando un normale blocco note, ma è meglio usare un editor speciale, ad esempio.

Salva e vai alla pagina principale del sito.

La pagina principale sembra storta in questo momento.

Questo è successo perché i percorsi degli script e dei css sono cambiati.

Modifica dei percorsi

I percorsi ora assomigliano a questo.

A proposito, è un argomento un po' strano, di solito il percorso passa attraverso la barra / e \, risolviamolo.

Se hai già installato il pacchetto ace, allora puoi facilmente e facilmente fare una ricerca e sostituzione, per fare ciò, fai clic nel codice e quindi premi la combinazione di tasti Ctrl + H (funziona su Linux e Windows), inserisci \ nel campo superiore e in quello inferiore / e premere tutto.

Perché esattamente MODx e come sono arrivato a una vita del genere, non scrivo. Chi se ne frega - benvenuto nel mio. Supponiamo anche che se sei arrivato a questa lezione, allora sei interessato non solo alla creazione di siti, ma alla creazione di siti su MODx. Supponiamo che tu abbia già un valore predefinito:

• computer (o laptop) con installato sistema operativo( , non importa)
• mouse per colpire o fare clic
• tastiera per fare clic o premere
• tenere sotto controllo
• accesso a Internet
• tanta voglia di fare siti

A proposito, tutto questo si adatta abbastanza bene a un dispositivo come un laptop. E se hai intenzione di lavorare spesso nel paese, è meglio comprarlo. Siediti e ripeti ciò di cui scriverò dopo e avrai successo!

Per cominciare, mettiamo tutti i punti e le virgole: il piano della lezione. Poiché è impossibile prendere e realizzare immediatamente un sito Web, lo impareremo gradualmente. Pertanto, forse le prime lezioni ti sembreranno un po' noiose o semplici: man mano che acquisisci abilità, i compiti diventeranno più difficili.

Apprendimento MODx il miglior punto di partenza è creare un sito web per biglietti da visita. Questo ti aiuterà non solo a comprendere i principi di base del sistema, ma anche a scoprire le caratteristiche distintive necessarie per impostare problemi più complessi e interessanti. A proposito, questa è una delle tre balene di guadagnare uno studio web ed è su di loro che non solo puoi mettere le mani, ma anche guadagnare bei soldi (se lo fai rapidamente e trovi molti clienti).

Che cos'è un sito di biglietti da visita?

Un sito di biglietti da visita è un piccolo sito composto da diverse pagine Web e contenente informazioni di base su un'organizzazione, beni o servizi, listini prezzi e informazioni di contatto.(C) Wikipedia

In effetti, un sito di biglietti da visita di 4 pagine può essere realizzato su semplice html, ma è molto più difficile mantenere un sito del genere: se aggiungi almeno una pagina, dovrai rifare tutto. Così sistemi di gestione dei contenuti rendere la vita di un normale gestore di contenuti o proprietario di un sito Web molto più semplice.

Come creare un sito Web su Modex

Prima di iniziare a sviluppare il sito, dobbiamo prepararci posto di lavoro... Pertanto, andiamo al sito ufficiale con l'ultima versione del sistema MODx CMS / CMF e lo scarichiamo. Il sito ufficiale parla male il russo, ma questo non ci impedirà di prendere e scaricare l'ultima versione di MODx Evolution. Versione MODx 1.0.8. (Il giorno successivo al rilascio di questa lezione, è stata annunciata una nuova versione di MODx Evolution 1.0.9. I dettagli sono su habré http://habrahabr.ru/post/173667/)

Stai attento: MODx 1.0.8 è anche l'ultima versione, ma un ramo diverso del sistema di controllo, quindi se stai appena iniziando a familiarizzare con MODx, non avere fretta di installare Revolution 2. Le lezioni di questo corso saranno scritte appositamente per Evolution .

Quindi devi installare un server Web sul tuo computer o iniziare immediatamente a sviluppare un sito Web su un hosting. Preferisco la seconda opzione, perché a volte possono verificarsi errori imprevisti durante la migrazione di un sito da un host locale. È sempre così.