Tutorial modx. Rivoluzione MODX - Tutorial di base. Creazione di risorse di base

Ciao a tutti, amici! Tse lezione di base da CMF MODXRevo lution, per quanto ne sappiamo con il sistema MODX, possiamo installare i plugin necessari e possiamo sistemare il framework di base.

Batti le mani

Zapiniti

Risorse per una lezione MODX di base:

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

Installazione e personalizzazione dei plugin MODx

Installabile Avanzate Versione MODx, al momento dell'installazione, viene indicato che la cartella sarà nominata per l'amministratore super.

Plugin indispensabile MODx

Le aggiunte più popolari e più spesso malvagie per MODx:

1. Asso- Editor di codice MODx;
2. Collezioni- visualizzazione e manutenzione di raccolte di risorse;
3. pdoTools- Set di strumenti di base MODx;
4. FormIt- robot con moduli in MODx;
5. phpThumbOf- robot con immagini in MODx;
6. TinyMCE / CKEditor (opzionale)- Editor di testo WYSIWYG per MODx;
7. traslato- Traslitterazione URL per MODX;
8. MIGX- Aggiunti campi da aggiungere in MODx;
9. modello automatico- Riconoscimento automatico "intelligente" dei modelli di risorsa.

Modifiche di base a MODx Revolution

Vai a " Adeguamento sistemico".

1. Condiviso: URL amichevole

   • Traslitterazione di pseudonimi: Russo;
   • URL intuitivo per frusta: COSÌ;
   • Suvory modalità URL amichevole: COSÌ;
   • Passa all'URI duplicato in tutti i contesti: COSÌ;
   • URL dei contributi in primo piano: COSÌ;
   • Non dimenticare di cambiare anche il nome ht.access v .htaccess alla radice del sito.

2. Razdіl: pannello keruvannya

   • Mostra la descrizione nel menu in alto: Ni.

3. Rozdil: sito web

   • Storinka perdono 404 "Documento non trovato": ID risorsa 404;
   • Per il blocco: COSÌ;
   • Nome del sito: Dai un nome al tuo progetto.

4. Rozdіl: sistema e server

   • Colpo di testa di Nadsilati X-Powered-By: Ni.

5. Spazio dei nomi: asso

   • Dimensione del font: 18px;
   • Tabulazione morbida: CIAO;
   • Tabulazione Rozmir: 2;
   • Tema dell'editor (facoltativo): atmosfera, caos, cromo, nuvole, clouds_midnight, cobalto, cremisi_editor, alba, dreamweaver, eclissi, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_indust, domani_notte, domani_notte_blu, domani_notte_bright, domani_notte_eighties, crepuscolo, vibrant_ink, xcode;
   • Inoltre, puoi cambiare argomento Materiale con l'editore Ace. Istruzione:

     MODx Ace Material Theme 1. Personalizzazione del sistema > Spazio dei nomi "ace": Dimensione carattere: 15px Altezza area di modifica: 560 Caratteri invisibili: So Soft Tab: N Dimensione tab: 2 Tema dell'editor: domani_notte 2. File: File default > css > index. css: (Aggiungi un suggerimento) !important) .ace_gutter(color:#666E79!important) .ace_active-line,.ace_gutter-active-line(background-color:#2A2F38!important) .ace_scroller,.ace_gutter (background -color : #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:# ! importante) 3. Svuota la cache tramite il menu.

Creazione di risorse di base

1. Storinka 404- il lato per fissare il documento non è stato trovato. Non mostrare al menu;
2. Mappa del sito- risorsa per la visione [] . Modello vuoto. Non visualizzare nel menu. Digita sul posto: XML. Non disponibile per scherzo. Non taggare l'editor HTML;
3. robot- risorsa per la visione robots.txt. Modello vuoto. Non visualizzare nel menu. Digita al posto: testo. Non disponibile per scherzo. Non taggare l'editor HTML.

Sito ufficiale di MODX

http://modx.com/

Materiali primari sulla creazione di siti suMODx

Parametri di frammenti

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

Il resto della distribuzione può essere scaricato da http://modx.com/download/evolution/

La sequenza di creazione del sito suMODxEvoluzione

1. Crea un database con lo stesso prefisso, designato dall'hoster, in modo da non modificare il file config.inc.php.
2. Installa MODx. Zrobiti nalashtuvannya.
3. Copia il modello del sito nella cartella risorse/modelli.
4. Copia il codice del modello index.html dal modello Minimal Templates.
5. Utile scrivi un modo

   .

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

7. Designare i modelli di collegamento sul sito.
8. Vedendo le camere da letto per tutti i lati della parte del fetore saranno pezzi. I pezzi appaiono sulle tempie ricce con ferretto. Ad esempio, ((TESTA))
9. Il menu smut del sito può essere incolpato di un pezzo okremy. .
10. Menu del sito Questa mappa del sito viene visualizzata con lo snippet di Wayfinder. Descrizione dello snippet di Wayfinder.
11. L'elenco delle risorse per quel numero con descrizioni, immagini, messaggi... viene visualizzato con lo snippet Ditto. Descrivi e allega lo snippet Ditto.
12. La lanterna di navigazione "Breadcrumbs" viene visualizzata nello snippet Breadcrumbs. Descrizione dello snippet Breadcrumb.
13. La ricerca nel sito viene eseguita con lo snippet AjaxSearch. Descrizione dello snippet di AjaxSearch.
14. Modulo zvorotny zv'azku- Modulo elettronico frammento. Il calcio della forma pieghevole dello zv'yazku con l'aiuto dello snippet eForm.
15. Plug-in Assegnazioni Phx per ricontrollare la presenza dell'immagine nei parametri TV, indicando i poteri del padre e int.
16. È necessario prescrivere inoltre uno spratto di stili.
17. Dopo aver trasferito il sito all'hosting:

Nelle lezioni passate abbiamo installato e sistemato modx, così come i pacchetti installati che saranno necessari per la creazione del sito. Il tutorial di oggi riguarda il porting di un ottimo design HTML/CSS/JS su MODX Revo. Dove puoi ottenere il design, ho scritto nell'articolo: modelli MODX: cos'è, cos'è? Per il mio sito ho selezionato ready paid bootstrap reattivo modello sulla foresta per $ 17 sotto il nome brightbox (clicca sul nome per vedere la demo e la descrizione dello yoga). Puoi batterlo assolutamente sia esso, è lo stesso senza alcun costo, quindi capisci l'intero principio dello stretching sempre più rapidamente.

Struttura HTML del tema

Il tema skin pratico può avere file html, css, js e immagine + avere altro file php- Forme Obrobnik.

A mio avviso, nella cartella delle risorse ci sono file css e js (nelle directory separate), nella cartella delle immagini ci sono immagini e file neri (non puoi avere file neri - tutto è memorizzato nel browser installato dietro il lucchetto) - questi sono file html.

Porting di un modello in Modx

Il modo più semplice è semplicemente caricare tutti i file con le cartelle (crema html) nella radice del sito web. Ale, seguirò un percorso pieghevole. Dal momento che non ho file modx e directory delle risorse, aggiungerò le risorse (sottocartelle css e js) alla radice del sito e le immagini alla radice.

In precedenza, ho creato la directory dei modelli e ho caricato tutti i file da essa: puoi farlo da solo.

Modifica del modello di base

All'albero, vai alla scheda "Elementi" e apri il modello pannocchia (puoi semplicemente fare clic su LMB o RMB e selezionare modifica).

Vediamo che è sostituito dal codice di index.html (che non abbiamo inserito nella root del sito).

Puoi aprire il file html con l'aiuto di un ottimo blocco note, o meglio ancora, vikoristovuvat redattore speciale Per esempio

Andiamo alla pagina principale del sito.

Lato principale allo stesso tempo sembra storto.

È successo così, i percorsi per script e css sono cambiati.

Correzione di modi

I modi subito fanno una tale occhiata.

Fino al discorso del troch, l'argomento è meraviglioso, scandisci la barra /, e \, correggilo.

Se hai già installato il pacchetto ace, puoi cercare facilmente e semplicemente una modifica, per la quale fai clic sul codice, quindi premi i tasti Ctrl + H (lavorando su Linux e Windows), nel campo in alto inserisci \, e in in basso / premi tutto .

Nelle lezioni passate abbiamo installato e sistemato modx, così come i pacchetti installati che saranno necessari per la creazione del sito. Il tutorial di oggi riguarda il porting di un ottimo design HTML/CSS/JS su MODX Revo. Dove puoi ottenere il design, ho scritto nell'articolo: modelli MODX: cos'è, cos'è? Per il mio sito, ho selezionato adattivo già pagato modello di bootstrap on theforest per $ 17 sotto il nome brightbox (clicca sul nome per vedere la demo e la descrizione dello yoga). Puoi batterlo assolutamente sia esso, è lo stesso senza alcun costo, quindi capisci l'intero principio dello stretching sempre più rapidamente.

Struttura HTML del tema

Un tema praticamente skin può avere file html, css, js e immagine + avere più file php - moduli.

A mio avviso, nella cartella delle risorse ci sono file css e js (nelle directory separate), nella cartella delle immagini ci sono immagini e file neri (non puoi avere file neri - tutto è memorizzato nel browser installato dietro il lucchetto) - questi sono file html.

Porting di un modello in Modx

Il modo più semplice è semplicemente caricare tutti i file con le cartelle (crema html) nella radice del sito web. Ale, seguirò un percorso pieghevole. Dal momento che non ho file modx e directory delle risorse, aggiungerò le risorse (sottocartelle css e js) alla radice del sito e le immagini alla radice.

In precedenza, ho creato la directory dei modelli e ho caricato tutti i file da essa: puoi farlo da solo.

Modifica del modello di base

All'albero, vai alla scheda "Elementi" e apri il modello pannocchia (puoi semplicemente fare clic su LMB o RMB e selezionare modifica).

Vediamo che è sostituito dal codice di index.html (che non abbiamo inserito nella root del sito).

Puoi aprire un file HTML con l'aiuto di un ottimo blocco note o, meglio ancora, utilizzare un editor speciale, ad esempio.

Andiamo alla pagina principale del sito.

Il lato della testa allo stesso tempo sembra storto.

È successo così, i percorsi per script e css sono cambiati.

Correzione di modi

I modi subito fanno una tale occhiata.

Fino al discorso del troch, l'argomento è meraviglioso, scandisci la barra /, e \, correggilo.

Se hai già installato il pacchetto ace, puoi cercare facilmente e semplicemente una modifica, per la quale fai clic sul codice, quindi premi i tasti Ctrl + H (lavorando su Linux e Windows), nel campo in alto inserisci \, e in in basso / premi tutto .