Modifica del menu in alto. PdoMenu - creazione di un menu nei parametri di revo di MODX Wayfinder

Oggi creeremo un menu per il nostro blog utilizzando lo snippet Wayfinder (documentazione per lo snippet Wayfinder). La navigazione in alto e quella principale sul nostro blog si compone di due parti:

• Mobile
• Regolare

Pertanto, faremo la navigazione in una doppia istanza). Quindi, divideremo la nostra navigazione principale in blocchi. Secondo la documentazione, dovresti ottenere 4 blocchi (non dimenticare di rimuovere gli spazi):

& outerTpl = `wayOuterTpl` - wrapper di blocchi dell'elenco principale

[[+ wf.wrapper]]

& innerTpl = `wayInnerTpl` - elenco a discesa del wrapper di blocchi

[[+ wf.wrapper]]

& rowTpl = `wayRowTpl` - output in blocchi di elementi dell'elenco

[[+ wf.linktext]]

& parentRowTpl = `wayHasChildTpl` - output in blocchi degli elementi dell'elenco padre

[[+ wf.linktext]] [[+ wf.wrapper]]

Ed ecco la chiamata dello snippet nel pezzo di intestazione:

[ ]

& startId = `0` - imposta l'inizio del passaggio dello snippet, nel nostro caso dalla radice del sito.
& level = `2` - il numero di livelli nel nostro menu.

Il prossimo passo è visualizzare il nostro menu mobile. Un principio simile a quello che ho delineato sopra, qui servono anche 4 pezzi.

& outerTpl = `wayOuterMobileTpl` - wrapper di blocchi dell'elenco principale.

[[+ wf.wrapper]]

& innerTpl = `wayInnerMobileTpl` - chunk che avvolge l'elenco interno.

[[+ wf.wrapper]]

& rowTpl = `wayRowMobileTpl` - blocco che mostra gli elementi dell'elenco.

[[+ wf.linktext]][[+ wf.wrapper]]

& innerRowTpl = `wayInnerRowMobileTpl` - blocco che mostra gli elementi della lista interna.

- [[+ wf.linktext]][[+ wf.wrapper]]

Wayfinder avrà questo aspetto:

[ ]

Tutto è uguale, solo i pezzi sono cambiati. Ora abbiamo la navigazione mobile, puoi testarla con lo strumento Responsive Web Design Tester per Opera e Chrome.

Ecco il codice completo per il pezzo di intestazione:

La nostra navigazione è pronta! Nel video, abbiamo anche esaminato la creazione di un menu di categoria su un blog. Visto che il principio è lo stesso, qui non ho considerato, guarda il video) Ci vediamo alle prossime lezioni!

Data di pubblicazione: 07.02.2011

In questo semplice tutorial, ti mostrerò come personalizzare il menu.

Una volta mi è stato chiesto di correggere un bug con un menu su un sito: alcuni elementi ostinatamente non volevano allinearsi, ma sono invece strisciati fuori in punti inaspettati sulla pagina quando ci sei passato sopra. Il bug non era in un css storto, come suggerito all'inizio, ma in una chiamata storta a Wayfinder.

Cos'è Wayfinder?- questo è uno snippet che viene utilizzato quando è necessario visualizzare un elenco di documenti per una/e sezione/e. Come risultato del lavoro dello snippet, viene generato un elenco non ordinato. Con l'aiuto di vari parametri puoi fare quello che vuoi con questo elenco :) Puoi leggere di più nella documentazione o digitando Google - "wayfinder modx wiki".

Note importanti:

1. Informazioni su cos'è MODx, come installare MODx, come organizzare la struttura dei documenti, come creare un modello da html, cos'è un chunk e così via. domande dei principianti in questa lezione non prenderò in considerazione.

2. I segnaposto, che utilizzerò nel tutorial, sono specificati nel formato che la versione Evo "capisce". Qual è la differenza, vedi un esempio:

Quindi, diamo un'occhiata alla creazione di un menu passo dopo passo.

Passo 1

Per la lezione, ho abbozzato il seguente menu:

Qui, per chiarezza, ho applicato stili diversi a diversi livelli di menu. Sul sito in cui ho corretto il bug con il menu, era più o meno lo stesso: ogni livello di menu ha il suo stile.

Layout: i dettagli del layout non sono inclusi nell'ambito di questa lezione, ecco il codice che ho ricevuto:

• casa
• Prodotti e servizi
  • Siero della verità
  • Significa Makropulos
  • Rimedi universali
• Consegna
  • Siero della verità
  • Significa Makropulos
  • Rimedi universali
• Fornitori

Dopo aver ammirato il codice, determiniamo da soli quale classe nel nostro menu è responsabile di cosa (se stai frugando nel codice di qualcun altro, dovrebbe essere chiaro nel tuo):

ul class = "menu" - la classe dell'intero menu
li class = "top" - classe delle voci di menu di primo livello
a class = "top_link" - classe per i collegamenti negli elementi di primo livello
ul class = "sub" - classe per sottomenu
beh, span class = "down" per la progettazione di oggetti di primo livello

Passaggio 2. Crea tre documenti

Prodotti e servizi
- Consegna
- Fornitori
Per il documento "Prodotti" creiamo documenti figlio: "Siero della verità", "Mezzi di Makropulos", "Mezzi universali".

Passaggio 3. Tiriamo fuori il menu in un pezzo separato

Nel modello, nel punto in cui dovresti avere un menu, rimuovi tutto il codice non necessario (il codice html del menu stesso), scrivi invece

((menù))

Pertanto, portiamo il menu in un blocco separato. Quindi creiamo un nuovo pezzo e lo chiamiamo menù... Mentre sei nel contenuto del blocco, puoi copiare il codice del menu che hai disposto. Per chiarezza.

Vai al pannello di amministrazione in "Sito" -> "Visualizza" - per verificare che tutto sia a posto con i percorsi del file di stile e le immagini.

Accaduto? Ok, ma questo non è ancora un menu. Diamogli vita con Wayfinder.

Passaggio 4

Elimina tutti i contenuti del frammento di menu e chiama invece lo snippet Wayfinder.
Per ora scriviamo così:

[[Cercatore? & startId = `0`]]

parametro startId- indica con quale documento iniziare a formare la lista. Abbiamo specificato 0 - questo significa che l'elenco è formato dalla radice dell'albero del documento.

Vediamo cosa è successo:

Questo è un menu funzionante e dal vivo. Rinomina documenti, elimina, aggiungi: il menu verrà formato in base all'albero del documento.

Passaggio 5

5.1. Ora riportiamo l'aspetto del menu alla normalità

Wayfinder genera codice semplice () per impostazione predefinita, tutte le classi di elenchi ed elementi sono specificate con parametri speciali quando vengono chiamate.

All'inizio della lezione, abbiamo determinato quali classi CSS nel nostro menu sono responsabili di cosa. Wayfinder ha i parametri di cui abbiamo bisogno: classe esterna- classe per il contenitore del menu. Confrontandolo con il nostro layout, otteniamo la seguente chiamata Wayfinder:

[[Cercatore? & startId = `0` & livello =` 2` & externalClass = `menu`]]

oltre ai parametri con le classi, specifichiamo livello di annidamento - & livello = `2`.

Prendiamo atto delle carenze: non ci sono classi per voci di menu di primo livello, nessun tag e una classe per il sottomenu.
Tutte queste carenze vengono corrette aggiungendo i parametri appropriati alla chiamata a Wayfinder.

5.2. Aggiunta di classi a oggetti e tag di primo livello

C'è una variabile per questo rigaTpl, che descrive il modello per la voce di menu, creiamo un tale modello, per questo creiamo un pezzo chiamato genitore:

[+ wf.linktext +][+ wf.wrapper +]

Nella chiamata Wayfinder, aggiungi & rowTpl = `genitore` .
Non dimenticare di controllare il codice sorgente: quasi tutto va bene, c'è un sottomenu a sinistra.

Per personalizzare il sottomenu, usiamo la variabile innerRowTpl.

Crea un pezzo interno:

[+ wf.linktext +] [+ wf.wrapper +]

Aggiungi una variabile alla chiamata Wayfinder innerRowTpl = `inner` e una variabile che specifica la classe per il contenitore del sottomenu & innerClass = `sub` .

La chiamata finale a Wayfinder assomiglia a questa:

[ ]

Ecco fatto, il nostro menù è pronto. Buona fortuna!

È possibile modificare il menu principale del pannello di controllo MODX modificando l'ordine degli elementi o nascondendone alcuni a determinati utenti. Puoi anche aggiungere nuovi elementi ad attività esistenti o personali che crei. Successivamente, esamineremo prima i metodi utilizzati per modificare il menu in alto e poi alcuni esempi pratici.

Concetti del menu principale

Il sistema di menu in Revolution ha un'architettura completamente nuova. Non ha quasi nulla a che fare con il sistema di menu Evolution, tranne che per i nomi di alcuni elementi. Non è necessario conoscere il nuovo sistema di menu per personalizzare i menu, ma questa comprensione è utile, soprattutto se si intende creare pagine del pannello di controllo personale a cui è possibile accedere dai menu.

Albero del menu principale

Vai alla sezione del menu in alto Sistema -> Azioni e vedrai le basi del sistema di menu. L'albero a destra (Top Menu) contiene le voci di menu ei sottomenu effettivi. Se espandi le varie sezioni, vedrai che questa è una copia esatta del menu in alto. Gli elementi di primo livello sono quelli che vedi nella parte superiore della barra di controllo. Questi sono quasi sempre contenitori per sottomenu. Ogni sottomenu nell'albero corrisponde a un'azione nel pannello di controllo. Quando si fa clic su un sottomenu, viene eseguita un'azione nel pannello di controllo (ad esempio, svuotare la cache del sito o accedere al pannello di controllo degli accessi). In effetti, le voci di menu in alto possono anche essere azioni, ma nessuna delle voci di menu in alto è configurata in questo modo.

Ciò che accade quando si fa clic su una voce di menu è in realtà definito qui. Come vedrai, puoi facilmente ignorare ciò che accade quando si fa clic su una voce di menu e puoi rinominare, nascondere o eliminare le voci di menu. Puoi anche aggiungere elementi al menu e specificare cosa succede quando fai clic su di essi. Infatti, puoi creare un sistema di menu completamente nuovo per il pannello di controllo che sostituisce quello esistente e utenti diversi possono vedere menu diversi. Tutto questo può essere fatto senza cambiare il kernel MODX.

Qui viene impostata anche la visualizzazione fisica del menu. Non è un caso che tutte le voci di menu siano nello stesso ordine in cui appaiono nel menu in alto. Se li sposti nell'albero, anche il menu in alto cambierà quando ricarichi la pagina.

Diamo un'occhiata ad alcune delle azioni del pannello di controllo, ma fai attenzione a non modificarle: fai clic sul pulsante "Annulla" dopo averle visualizzate.

Nell'albero che si trova a destra (Top Menu), fare clic con il tasto destro del mouse sulla voce "Sito" e selezionare la voce "Modifica" nel menu a discesa. Viene visualizzata una finestra di dialogo Modifica con i campi che definiscono l'azione del menu:

Nome- il nome della voce di menu

Descrizione- descrizione della voce di menu

Azione- specifica del file PHP da eseguire

Icona- icona aggiuntiva per una voce di menu

Opzioni- parametri opzionali $ _GET per URL

Gestore- Codice JS da eseguire

Diritti di accesso- elenco separato da virgole dei diritti di accesso richiesti

Nota che la maggior parte dei campi "Sito" sono vuoti. Questo perché è un contenitore per i sottomenu al suo interno. Se fai clic sul menu "Sito" nel menu in alto, non succede nulla.

Diamo un'occhiata a un sottomenu che fa qualcosa. Fare clic su "Annulla" per chiudere la finestra di dialogo, aprire la sezione "Sito" dell'albero nel pannello di destra, fare clic con il pulsante destro del mouse sul sottomenu "Aggiorna sito" e selezionare "Modifica".

Notare che la finestra di dialogo che si apre contiene il contenuto dei campi "Handler" e "Access Rights". Il campo Permessi ci dice che l'utente non può eseguire l'azione di questa sottovoce di menu se non ha i permessi empty_cache. Il campo Handler contiene il codice JS effettivo che viene eseguito quando si seleziona questo sottoelemento. Tutti gli elementi in cui vengono effettivamente eseguite alcune azioni hanno campi riempiti con "Azione" o "Gestore". Se il campo "gestore" è compilato, viene eseguito il codice che si trova in questo campo e il campo "Azione" viene ignorato. Se il campo "Gestore" non è compilato, viene eseguita l'azione dal campo "Azione". Il campo "Azione" è solitamente un puntatore a un controller di file o a una delle azioni nell'albero "Azioni" situato a sinistra (che in realtà punta ai file del controller corrispondenti). Chiudere la finestra di dialogo facendo clic sul pulsante "Annulla".

Diamo un'occhiata a una variante di una voce di menu con un'azione. Scarica e installa il componente aggiuntivo Batcher tramite Gestione pacchetti, ricarica la pagina e vai di nuovo alla sezione Sistema -> Azioni... Nella sezione "Componenti" nell'albero di destra (espandilo se necessario) fai clic con il pulsante destro del mouse su Batch e seleziona "Modifica". Ora vediamo il campo compilato "Azione, non" Gestore ": batcher - indice. Uscire dalla finestra di modifica facendo clic sul pulsante "Annulla".

Nel riquadro sinistro, tutti gli elementi di livello superiore sono spazi dei nomi. Nella struttura delle azioni a sinistra, espandere lo spazio dei nomi del batcher. Dovresti vedere l'indice delle azioni. Questa è l'azione indicata dal menu Batch che abbiamo visto nel riquadro di destra.

Vediamo cosa possiamo fare con l'albero del menu principale. Gli elementi nell'albero del menu principale possono essere riorganizzati trascinandoli e rilasciandoli. Se cambi la posizione di una voce di menu nell'albero, cambierà anche il menu principale, anche se dovrai ricaricare la pagina del pannello di controllo per vederlo.

Per aggiungere una voce al menu in alto, puoi fare clic con il pulsante destro del mouse in qualsiasi punto dell'area dell'albero e selezionare "Aggiungi voce di menu". Per aggiungere un elemento al menu di livello superiore, puoi anche fare clic sul pulsante Aggiungi elemento.

Le voci di menu possono essere rimosse facendo clic con il tasto destro su di esse e selezionando "Elimina". Se elimini una voce di menu, il contenuto dei suoi campi andrà perso e tutti gli elementi figlio verranno eliminati. Questa azione è irreversibile.

Se vuoi rimuovere una voce di menu senza effettivamente cancellarla (che è quasi sempre la migliore linea d'azione), puoi nasconderla inserendo qualcosa nel campo Permessi. Se c'è già qualcosa in questo campo, aggiungi una virgola e il nome del nuovo diritto di accesso. Finché questo diritto di accesso è un diritto di accesso che nessun altro ha, la voce di menu sarà invisibile. Puoi renderlo nuovamente visibile rimuovendo il diritto di accesso aggiunto. Se desideri mostrare una voce di menu specifica a determinati utenti (ma non a tutti), crea semplicemente un nuovo modello di criteri contenente solo autorizzazioni utente, crea un nuovo criterio basato su quel modello e crea una voce di contesto ACL che si applica a questi utenti e assegnare questa politica.

Per modificare il titolo del menu in alto, specificarne la descrizione. Quindi vai alla sezione menu Sistema-> Gestione del dizionario. Seleziona lo spazio dei nomi "core" e il tema "topmenu". Il menu a discesa dell'argomento contiene più di una pagina, quindi potrebbe essere necessario passare alla seconda pagina per trovare l'argomento "topmenu". Trova la stringa della lingua per la voce di menu desiderata, fai doppio clic sul suo valore e modificalo. Eventuali modifiche apportate qui rimarranno in vigore dopo l'aggiornamento della versione MODX e dopo l'aggiornamento dei componenti di terze parti.

Il metodo sopra funzionerà solo per le voci di menu create dal kernel. Per le voci di menu di terze parti, dovrai selezionare lo spazio dei nomi appropriato. Ad esempio, se si desidera modificare la voce di menu corrispondente per Batch, sarà necessario modificare il valore della stringa di gestione del dizionario per lo spazio dei nomi del batch.

Albero delle azioni

Torna alla sezione Sistema -> Azioni se ne sei uscito. Nel riquadro di sinistra, fai clic sull'azione "indice" sotto il nome "batch" e seleziona "Modifica" dall'elenco a discesa. Ricorda che questa è l'azione indicata dalla voce di menu Batch nel riquadro di destra. Vedrai che il controller per questa azione è index e lo spazio dei nomi è batcher. Se ora andiamo alla sezione Sistema-> Spazio dei nomi, vedremo che il percorso per lo spazio dei nomi batcher è:

(core_path) componenti / batcher

Con il collegamento al controller che verrà eseguito quando si fa clic su questa voce di menu, MODX creerà un percorso completo come questo:

namespace_path + controller_name + .php

In altre parole, supponendo che il core si trovi nella posizione predefinita, MODX avvia l'esecuzione del file del controller in:

core / componenti / batcher / index.php

Se guardi questo file, vedrai che contiene solo il file index.php nella directory core / componenti / batcher / controllers, che carica la classe Batcher e la inizializza avviando Batcher nel pannello di controllo. Creeremo una nuova voce di menu nella sezione Componenti un po' più tardi quando creeremo pagine dashboard personalizzate.

Molte voci di menu nel riquadro di destra non hanno le azioni attive mostrate nel riquadro di sinistra. Questo perché i percorsi dei file del controller sono memorizzati nel database MODX e non devono essere modificati (almeno è più difficile da fare). Questi percorsi sono memorizzati nella tabella modx_actions. Ogni azione ha il proprio identificatore (ID) e un percorso al suo controller. L'azione ha anche un URL di supporto per la guida sensibile al contesto quando il controller è attivo e diversi altri campi. Per le azioni mostrate nel riquadro Azioni a sinistra, puoi vedere gli ID tra parentesi accanto al nome dell'azione.

L'aggiunta di una voce di menu all'albero per qualsiasi azione nel pannello di controllo viene quindi eseguita creando una voce di menu nel riquadro di destra e creando un'azione corrispondente (controllore) o aggiungendo un gestore. Se il controller esiste già, puoi semplicemente selezionarlo dal menu a discesa Azioni. In caso contrario, è necessario creare un'azione nel riquadro di sinistra che punti al controller. Ad esempio, non esiste una voce di menu per la creazione di un nuovo utente, ma poiché esiste un controller di file per questo, questa voce può essere facilmente aggiunta al menu in alto. In questo caso, è sufficiente creare una voce di menu sulla destra e impostare l'azione security/user/create per lo spazio dei nomi "core". Come puoi immaginare, una voce di menu in alto che ha un gestore, ma non ha un'azione corrispondente (come la voce di menu "Aggiorna sito") nell'albero "Azioni". Non ha bisogno di un elemento Action, poiché il gestore contiene il codice per farlo. Invece di eseguire il controller, MODX esegue semplicemente il codice nel campo del gestore.

Gestione dei clic sul menu

Notare l'azione dell'indice dello spazio dei nomi Batcher nel riquadro sinistro. Notiamo il suo ID. Quando fai clic su una voce del menu in alto, il MODX ottiene questo ID. Quindi l'URL di questa pagina viene generato nel pannello di controllo e l'utente viene indirizzato ad esso. Sul nostro sito, questo ID è 79. Quando clicchiamo su Batcher nel menu in alto, vediamo nella barra degli indirizzi del browser:

http: //site/manager/index.php? a = 79

Se fai clic sulla voce di menu Batch, dovresti vedere un URL simile in cui vedrai l'ID del tuo indice di azione Batch. Quando il gestore della richiesta riceve questo URL, verifica la presenza di questo oggetto di menu nel database, i diritti di accesso dell'utente per eseguirlo, imposta l'URL per l'aiuto ed esegue il controller di file per questa azione (se esiste un gestore , quindi viene eseguito il codice JS del gestore).

Lavorare con il menu in alto

Ora che sappiamo come MODX gestisce le voci di menu e le loro azioni associate, modifichiamo il vero menu principale nel pannello di controllo. I metodi utilizzati sono abbastanza semplici e non richiedono la comprensione del funzionamento interno del menu/sistema di azioni MODX per utilizzarli.

Fai attenzione qui, poiché tutte le tue modifiche verranno comunque applicate quando il sito verrà aggiornato e non c'è un modo semplice per tornare al menu predefinito. La maggior parte delle azioni che intraprenderemo qui sono facilmente reversibili, ma faresti meglio a scrivere la struttura del menu iniziale prima di apportare modifiche. È meglio esercitarsi prima sull'impostazione MODX, che non verrà utilizzata per questo sito.

Modifica dell'ordine delle voci di menu

È possibile modificare l'ordine delle voci del menu principale nel pannello di controllo o di qualsiasi elemento nei relativi sottomenu. Vai alla sezione Sistema-> Azioni ed espandi la struttura del menu a destra (sotto l'intestazione Menu principale).

Come abbiamo scoperto in precedenza, questo albero è la base del menu in alto del pannello di controllo. È possibile modificare l'ordine delle voci del menu in alto trascinandole e rilasciandole. Basta fare clic sulla voce di menu che si desidera spostare e tenere premuto il pulsante del mouse, spostarla dove si desidera e rilasciare il pulsante del mouse. In questo modo è possibile modificare l'ordine delle voci nel menu in alto o in qualsiasi sottomenu. Puoi spostare gli elementi da un sottomenu all'altro. Puoi anche spostare gli elementi del sottomenu nel menu in alto trascinandoli e rilasciandoli nella cartella del menu in alto. Per vedere le modifiche, è necessario ricaricare la pagina del pannello di controllo.

Aggiunta e rimozione di voci di menu

L'aggiunta di una nuova voce di menu è semplice. Vai alla sezione Sistema-> Azioni ed espandi la struttura del menu a destra (sotto l'intestazione Menu principale). Seleziona la parte del menu a cui desideri aggiungere una voce e fai clic sul pulsante "Aggiungi menu" (oppure fai clic con il pulsante destro del mouse e seleziona "Aggiungi voce di menu"). Inserisci il nome della voce di menu che ti serve e fai clic sul pulsante "Salva". In genere gli utenti MODX inseriscono nuovi elementi nel menu Componenti, ma puoi aggiungerli ovunque. Per eliminare una voce di menu, puoi fare clic con il pulsante destro del mouse su di essa e selezionare "Elimina voce di menu".

Se aggiungi una nuova voce di menu e poi ricarichi la pagina nel browser, potresti non vedere la nuova voce nel menu in alto. Le voci di menu principali senza figli e senza azioni o gestori specificati non verranno visualizzate nel menu. Questo è il motivo per cui il menu Componenti che vedi nell'albero non viene visualizzato nel menu quando installi MODX Revolution per la prima volta: nessun componente è ancora installato.

Come semplice esempio, creiamo un nuovo menu personalizzato che ti guiderà alle sezioni più utilizzate della dashboard. Supponiamo che il tuo lavoro richieda frequenti visite alle impostazioni di sistema, alla creazione/modifica di documenti e al controllo degli accessi. Creeremo una voce di menu in alto chiamata "Il mio menu" in cui posizioneremo le voci specificate. Nota che faremo tutto il lavoro nel riquadro di destra (Menu in alto).

Vai alla sezione Sistema-> Azioni e (nella struttura del menu in alto) fare clic sul pulsante "Aggiungi menu". Inserisci il nome "Il mio menu" nel campo "Nome" e fai clic sul pulsante "Salva".

Nome- Nuovo documento

Azione- core-risorsa / creare

Nome- Impostazioni di sistema

Azione- sistema di base / impostazioni

Nome- Controllo di accesso

Azione- sicurezza di base/permessi

Assicurati che le tue tre nuove voci di menu siano sottovoci nel menu "Il mio menu". In caso contrario, trascinali nella posizione desiderata con il mouse. È inoltre possibile modificare l'ordine dei menu e dei sottomenu.

Dopo aver raggiunto la posizione del menu desiderata, ricaricare la pagina del pannello di controllo nel browser. Dovresti vedere una nuova voce "Il mio menu" nel menu in alto, contenente tre sottomenu che dovrebbero portare alle sezioni corrispondenti del pannello di controllo.

Se vuoi rimuovere qualsiasi voce di menu che hai creato, vai alla sezione Sistema-> Azioni, fai clic con il tasto destro su di essi e seleziona "Elimina". È una buona idea eliminare tutti i sottomenu prima di eliminare la voce del menu principale in modo che non rimangano nel database.

Come nascondere le voci di menu

Oltre a modificare l'ordine delle voci di menu, puoi anche nasconderle utilizzando i diritti di accesso allegati alla voce di menu. Vai alla sezione Sistema-> Azioni ed espandi la struttura del menu sul lato destro (sotto l'intestazione Menu principale).

Fare clic con il pulsante destro del mouse su qualsiasi elemento o voce di sottomenu e selezionare "Modifica". Viene visualizzata una finestra di dialogo con il campo "Autorizzazioni" in basso. Fare attenzione a non modificare nessun altro campo.

Se provi a nascondere le voci di menu esistenti, vedrai che il campo "Autorizzazioni" per alcune di esse è pieno e altre no. Le azioni da intraprendere per nascondere un campo dipendono dal fatto che questo campo sia compilato o meno.

Se il campo "Diritti di accesso" contiene un elenco di diritti di accesso, è possibile creare un nuovo criterio di accesso (o modificarne uno esistente) per bloccare questo diritto di accesso e la voce di menu verrà nascosta. Questa operazione può avere effetti collaterali, poiché altre voci di menu nel pannello di controllo possono dipendere dagli stessi diritti di accesso. Un metodo migliore potrebbe consistere nell'aggiungere a questo campo ulteriori specifiche di autorità specifiche dell'utente.

Il campo Autorizzazioni può contenere un elenco di autorizzazioni separate da virgole. Questa voce di menu verrà visualizzata solo dagli utenti con tutti i diritti di accesso elencati.

Diamo un'occhiata a un esempio. Supponiamo di voler nascondere il sottomenu Gestione utenti nel menu Sicurezza a tutti gli utenti eccetto il Super User.

Vai alla sezione Sistema-> Azioni ed espandi la struttura del menu, quindi fai clic con il pulsante destro del mouse sulla sottovoce "Gestione utenti" e seleziona "Modifica". Il campo "Autorizzazioni" deve contenere view_user. Aggiungeremo altri permessi chiamati my_view_user_menu. Per fare ciò, modifica questo campo in modo che contenga view_user, my_view_user_menu. Assicurati che non ci siano spazi nei dati inseriti. Gli utenti ora devono avere entrambi questi diritti di accesso per vedere l'elemento secondario Gestione utenti e poiché nessuno ha un secondo diritto di accesso (poiché ne abbiamo appena creato uno), nessuno vedrà questo elemento secondario.

Per le voci di menu che non hanno diritti di accesso, la procedura è la stessa. È sufficiente aggiungere le nuove autorizzazioni personalizzate nel campo Autorizzazioni vuoto.

Nota che dopo aver aggiunto le nostre autorizzazioni personalizzate, anche il Super User senza restrizioni non vedrà il sottomenu Gestione utenti. Per risolvere questo problema, devi concedergli questi diritti di accesso. Se prevedi di eseguire queste operazioni su un sito live, concedi sempre all'amministratore illimitato tali diritti di accesso prima di creare autorizzazioni personalizzate.

Poiché il gruppo Administrator predefinito nel Pannello di controllo è protetto, è necessario creare un nuovo modello di criteri di accesso che contenga i diritti di accesso degli utenti e un nuovo criterio di accesso basato su di essi. Puoi inserire tutti i tuoi diritti di accesso personalizzati in questo modello di criteri di accesso. Nel capitolo Sicurezza-> Controllo accessi fare clic su "Crea modello di criteri di accesso". Utilizzare i seguenti parametri per la finestra di dialogo:

Nome : Modello di autorizzazione personalizzato

Gruppo di modelli : amministratore

Descrizione :

Successivamente, fai clic con il pulsante destro del mouse sul pulsante "Aggiungi autorizzazione". Utilizzare i seguenti parametri nella finestra di dialogo:

Nome : my_view_user_menu

Descrizione : Diritti di accesso al menu utente

Quindi fare clic sulla scheda "Politica di accesso", quindi sul pulsante "Crea politica di accesso". Utilizzare i seguenti parametri nella finestra di dialogo:

Nome : Permessi personalizzati

Modello di criteri di accesso : Modello di autorizzazione personalizzato

Descrizione : I miei permessi personalizzati

Fare clic sulla politica di accesso "Autorizzazioni personalizzate" e selezionare "Modifica". Scorri verso il basso fino alle autorizzazioni my_view_user_menu e seleziona la casella di controllo accanto ad essa. Fare clic sul pulsante "Salva" in alto a destra.

Ora dobbiamo concedere al Super User illimitato questo diritto di accesso creando un nuovo elemento ACL. Vai alla sezione Sicurezza-> Controllo accessi-> Gruppi utenti". Fare clic con il tasto destro del mouse sul gruppo utenti "Amministratore" e selezionare "Modifica gruppo utenti", fare clic sulla scheda "Accesso al contesto" e quindi sul pulsante "Aggiungi contesto". Per la finestra di dialogo, utilizzare i seguenti parametri:

Contesto : mgr

Ruolo minimo : Super utente - 0

Politica di accesso : Permessi personalizzati

Dal menu in alto seleziona Sicurezza-> Controllo accessi... Nessuno sarà in grado di vedere questa voce di menu tranne un utente con diritti Super User illimitati (e anche gli utenti con questa politica di accesso). Se vai al pannello di controllo come uno degli editor del sito, la sottovoce "Gestione utenti" dovrebbe essere assente.

Di ritorno

Inoltrare

Per iniziare 8 Lezione MODx Revolution per principianti. Ti ricordo che stiamo realizzando un sito per imparare MODx Revolution. Nell'ultima lezione, abbiamo trattato il concetto di snippet, che sono blocchi di codice PHP che ci consentono di aggiungere funzionalità al nostro sito web. In questo tutorial vedremo uno snippet speciale - Wayfinder, e lo useremo per creare un menu dinamico per il nostro sito.

Cos'è Wayfinder?

Wayfinder- questo è uno snippet che mostra un elenco non ordinato di collegamenti alle risorse nella struttura del tuo sito, il tipo di output dell'elenco dipende dalla chiamata dello snippet e dai parametri di questa chiamata. In termini generali, ciò significa che quando effettui una chiamata a Wayfinder nel tuo modello, inizia a cercare risorse che corrispondono ai parametri specificati in esso e restituisce un elenco di collegamenti a queste risorse in un formato elenco non ordinato o in un formato specificato .

Perché usare Wayfinder?

Di solito uso Wayfinder per creare la navigazione dinamica del sito, ovvero i menu. Poiché la maggior parte dei modelli HTML utilizza elenchi non ordinati per creare menu, Wayfinder è lo strumento perfetto per questo. Quando crei un sito, puoi inserire scrupolosamente i tuoi URL nel menu di navigazione, come hai fatto prima in un sito HTML statico. Allo stesso tempo, ogni volta che devi eliminare o creare una pagina, devi apportare le modifiche appropriate nel tuo menu, modificare gli URL. L'utilizzo dello snippet Wayfinder per generare dinamicamente i menu evita questo mal di testa, poiché rileva automaticamente le modifiche e modifica i menu di conseguenza.

Wayfinder è abbastanza flessibile e ti consente di definire quali risorse includere o escludere dal menu, qual è il modello di menu, quanto è profondo il menu del tuo sito. I tuoi limiti sono determinati dal tuo codice HTML/CSS.

Come si usa Wayfinder?

Come accennato nel tutorial precedente, la sintassi per chiamare gli snippet è simile a questa: [[! Somesnippet]]

Questa è solo una chiamata di base e non è sufficiente, inoltre dobbiamo definire alcune proprietà di questa chiamata. Nel caso di Wayfinder, il minimo che deve essere definito nelle proprietà: dove nell'albero delle risorse Wayfinder dovrebbe iniziare a costruire un elenco di risorse. Pertanto, nella chiamata allo snippet Wayfinder, è necessario specificare almeno un parametro: l'ID iniziale. La chiamata di base allo snippet Wayfinder sarebbe quindi simile a questa:

Questa chiamata dice a Wayfinder di iniziare dalla radice dell'albero ( ID 0 indica la radice del sito) e mostra tutte le risorse che sono pubblicate e che non hanno un segno di spunta nella casella di controllo Nascondi dai menu

Se osserviamo il modello che stiamo utilizzando, possiamo vedere un menu in alto con diversi elementi ed elenchi a discesa.

Diamo un'occhiata al modello e al codice che visualizza questo menu:

Come puoi vedere, questo è un elenco non ordinato nidificato. Sostituiamo questo codice con una chiamata Wayfinder di base e vediamo cosa otteniamo. Elimina il codice sopra e incolla al suo posto:

[[! Wayfinder? & startId = `0`]]

Se stai usando il mio stesso modello, il tuo codice sarà simile a questo:

Salva il modello e guarda la home page, dovrebbe assomigliare a questo:

Fantastico! Puoi vedere che il nostro menu precedente, che aveva diverse voci, è stato ora sostituito da un semplice menu con una sola voce: Home. Questo ci dice che Wayfinder funziona come previsto e prende una pagina dal nostro sito e visualizza il suo titolo come voce di menu.

Creiamo un altro paio di risorse. Aggiungerò una pagina Informazioni con 3 pagine figlie (MODx, Tutorial, pagine di contatto e FAQ). Puoi creare qualsiasi risorsa o pagina desideri per il tuo sito. L'obiettivo di questo esercizio è creare alcune risorse in modo che Wayfinder abbia qualcosa da mostrare.

Ho finito per creare le pagine e l'albero delle risorse del mio sito è simile a questo:

Ora che abbiamo alcune pagine, vediamo come chiamare Wayfinder genererà un menu per il nostro sito:

La buona notizia è che tutte le nostre pagine sono apparse nel menu e facendo clic su ciascuna voce di menu si arriva alla pagina corrispondente. (Per testare questo elemento, aggiungi del testo a ogni pagina, ad esempio nella pagina Informazioni puoi aggiungere "Questa è una pagina Informazioni" e questo messaggio apparirà quando aprirai la pagina. Ricorda che dobbiamo definire un modello per ogni pagina, ma al momento non me ne preoccuperò).

La cattiva notizia è che la formattazione del menu si è interrotta, ma possiamo rimediare. Fare clic con il tasto destro sulla pagina Web e vedere il codice sorgente (o utilizzare firebug per quello), lo vedrai ora Wayfinder genera HTML in questo modo:

• Casa
• Di
  • MODx CMS
  • Il tastierino numerico
    • Il blog
    • I Servizi
• Contattaci
• Tutorial
• FAQ

Come puoi vedere, questo sembra molto simile al nostro codice statico iniziale con poche eccezioni. Primo, Wayfinder generato

punto senza classe sf-menu che è stato utilizzato nel nostro codice statico. Il modello ha bisogno di questa classe per funzionare con i CSS. Si vede anche che
• gli elementi hanno un parametro span che fa riferimento agli elementi di testo del collegamento nel codice statico originale e non è nel codice Wayfinder generato. Inoltre, il nostro codice HTML statico ha una classe un elemento-della-pagina-corrente che non è rappresentato nel nostro codice snippet Wayfinder. Tutti questi pezzi mancanti fanno sembrare sgradevole il nostro menu.

  Come personalizzare lo stile di output dello snippet Wayfinder

  Guardando come Wayfinder genera il codice, abbiamo una domanda molto naturale: "Come aggiungiamo i pezzi di codice mancanti in modo che vorremmo visualizzare il menu nella forma che ci serve?" La risposta è molto semplice, usiamo i pezzi del modello per formattare l'output dello snippet di Wayfinder.

  Wayfinder è flessibile ed è possibile utilizzare i parametri per definire l'aspetto dell'output. Alcuni parametri generali consentono di determinare a quale livello iniziare a costruire il menu, quali elementi non sono inclusi nel menu, ecc. Altri parametri sono i parametri del modello che ti consentono di impostare il codice html del modello per il tuo menu, ecc. Le descrizioni di quest'ultimo possono essere trovate nella documentazione ufficiale –http: //rtfm.modx.com/display/ADDON/Wayfinder.

  Prendi nota: alcune opzioni di Wayfinder hanno un valore predefinito.

  Questo spiega, ad esempio, perché nel menu generato da Wayfinder, la voce Home page ha il nome della classe “ primo attivo”. Questa è la classe predefinita, ma possiamo sovrascriverla designando le nostre classi nei blocchi del modello.

  Utilizzeremo diversi parametri di Wayfinder in questo tutorial, ma ti consiglio di studiarli tutti e di esercitarti a usarli il più possibile per comprenderne appieno le capacità. Poiché i parametri predefiniti di Wayfinder sono chiaramente documentati sul sito Web ufficiale, sarebbe sciocco parlarne qui. Ne useremo sempre di più man mano che lavoriamo attraverso i vari menu.

  Per iniziare a lavorare su un modello di menu, creiamo alcuni mini modelli e li salviamo in blocchi. Vedrai che in questi blocchi utilizziamo il codice HTML, ma sostituiamo gli elementi dinamici segnaposto(o segnaposto come vengono anche chiamati) la cui sintassi è simile a questa: [[+ segnaposto]]... I segnaposto che utilizziamo sono speciali nello snippet Wayfinder e la loro definizione è ovvia dal nome, ma puoi sempre consultare la documentazione MODx per un aiuto più completo.

  

  Ecco i pezzi che userò per creare il nostro modello:

  7in1menuEsterno- conterrà il codice HTML per il nostro contenitore ul esterno.

  [[+ wf.wrapper]]

  Puoi vedere che ho aggiunto una classe per l'ul esterno. Un modo alternativo per farlo è utilizzare il segnaposto wf.classes e quindi aggiungere il nome della classe alla chiamata corrente del wayfinder utilizzando il parametro classe esterna... Ma per semplicità, usiamo il primo metodo, ma entrambi funzioneranno bene ...

  7in1menuRiga- conterrà il codice HTML delle voci del menu di primo livello

• [[+ wf.linktext]] [[+ wf.wrapper]]

Il punto principale qui è che ho aggiunto il tag al testo del collegamento al menu come nel codice HTML statico originale. Ho incluso anche il segnaposto wf.classes e questo mi permetterà di definire una classe per la pagina corrente che sovrascriverà la classe "attiva" predefinita.

7in1menuInner- conterrà il codice HTML dei contenitori ul interni

[[+ wf.wrapper]]

7in1menuRiga Interna- conterrà il codice HTML per le righe dei paragrafi di livello interno

• [[+ wf.linktext]] [[+ wf.wrapper]]

Ecco fatto, ora i nostri blocchi del modello sono a posto, come puoi vedere (per ordine, li metto in una categoria separata):



Ora possiamo cambiare la chiamata a Wayfinder in modo da poter utilizzare questi mini modelli per l'output di Wayfinder. Se dai un'occhiata all'elenco dei parametri di template (sarebbe utile avere http://rtfm.modx.com/display/ADDON/Wayfinder aperto davanti ai tuoi occhi o stamparlo e tenerlo vicino allo schermo), vedrai che ho chiamato i miei blocchi in modo simile ai corrispondenti parametri di chiamata snippet. L'ho fatto per comodità, mi aiuta a tenere traccia di cosa succede quando inizio a costruire la mia chiamata. Aggiungiamo parametri e chiamiamo i nostri blocchi. Wayfinder sarà ora chiamato:

[[! Wayfinder? & startId = `0` & outerTpl =` 7in1menuOuter` & rowTpl = `7in1menuRow` & innerTpl =` 7in1menuInner` & innerRowTpl = `7in1InnerRow` & hereClass =` current_page_item` & firstClass = `` & lastClass = '']]

I valori dei parametri sono racchiusi tra apostrofi (`), non tra virgolette (').

Ottimo, diamo un'occhiata a questa sfida. Puoi vedere che stiamo usando i parametri dei modelli per chiamare i nostri blocchi in modo che Wayfinder emetta l'HTML che vogliamo con le classi corrette. Ho definito un callable quiClass parametro e gli ho dato un valore oggetto_pagina_corrente per abbinare un modello HTML statico. Si vede che ho lasciato i parametri prima classe e ultima classe vuoto. La ragione di ciò è che il mio modello HTML non imposta una classe per la prima e l'ultima voce di menu, quindi per evitare sovrapposizioni ho sovrascritto le righe vuote al loro interno.



Si può vedere che il nostro menu sembra esattamente come volevamo. Gli stili corretti vengono utilizzati nel menu a discesa. Se guardi il codice sorgente, vedrai che il generato Wayfinder'Om codice HTML è cambiato oltre il riconoscimento:

• Casa
• Di
  • MODx CMS
  • Il tastierino numerico
    • Il blog
    • I Servizi
• Contattaci
• Tutorial
• FAQ

Questo codice corrisponde al codice statico originale del nostro modello, ma è stato generato chiamando Wayfinder.

Ci sono molti altri parametri che puoi usare insieme a Wayfinder per creare i tuoi menu. Nei prossimi tutorial, esamineremo menu complessi e come integrarli in Wayfinder. Riassumendo: ora il nostro sito ha acquisito una certa forma e abbiamo un menu funzionale e dinamico.

Nei tutorial precedenti abbiamo già creato i menu MODX: 1st - and 2nd - Visualizzazione di un menu a discesa MODX standard utilizzando Bootstrap. Oggi impareremo come visualizzare menu Bootstrap multilivello con un grado di nidificazione illimitato (menu a 3 livelli, 4x, 5, ecc.).

Ad esempio, visualizzerò un menu Bootstrap a 5 livelli, ma puoi renderlo sia a 3 livelli che a 7 livelli, almeno 10 modificando il valore livello quello di cui hai bisogno!

Visualizzazione di menu Bootstrap a strati (con nidificazione illimitata) in MODX utilizzando PdoMenu.

L'output del menu multilivello sarà così:

[]> [[+ involucro]]

`& tplInner =` @ INLINE

[[+ involucro]]

`& tplParentRow =` @ INLINE

[[+ titolo del menu]] [[+ involucro]]

` ]]

Non funzionerà fuori dalla scatola. poiché Bootstrap 3 per impostazione predefinita supporta solo 2 livelli di nidificazione e per espandere il livello di nidificazione dei menu di bootstrap 3, è necessario includere un file js con il seguente contenuto.

(function ($) ($ (document) .ready (function () ($ ("ul.dropdown-menu") .on ("click", function (event) (event.preventDefault (); event.stopPropagation () ; $ (this) .parent (). fratelli (). removeClass ("open"); $ (this) .parent (). toggleClass ("open");));));)) (jQuery);

Dopodiché, inizieranno ad aprirsi il 3°, il 4°, ecc. livelli di nidificazione. In linea di principio, è tutto, ma c'è una cosa, questo menu si aprirà a tutti i livelli e questo, secondo me, non è molto corretto e bello, ma può essere risolto con l'aiuto dei CSS.

Nel mio caso, ho finito con 2 righe di codice CSS per far cadere i livelli lateralmente.

Ul.menu a discesa (sinistra: 100%; in alto: -8px;) li.submenu1.dropdown.open> ul.menu a discesa (a sinistra: 0%; in alto: 100%;)

Potresti ottenere un codice leggermente diverso (ma identico a questo) e il numero delle sue righe potrebbe essere maggiore se hai diversi rami di un menu con un sottomenu. Bene, sulle piccole cose, dovrai adattare il css ai tuoi gusti, il mio obiettivo è mostrare le basi. Nel video viene mostrato come trovare le classi css necessarie nel codice a cui è necessario applicare gli stili, ma per essere più precisi, viene mostrato l'intero processo di creazione di un menu multilivello.

Questo menu è uscito nel mio video.

Se devi ruotare i triangoli nel menu a discesa (puntano verso il basso quando gli elementi vengono rilasciati a sinistra), cosa accadrebbe in questo modo.

Quindi aggiungi il seguente codice CSS:

Li.submenu2.dropdown> a> span.caret (-moz-transform: ruotare (-95deg); -ms-transform: ruotare (-95deg); -webkit-transform: ruotare (-95deg); -o-transform: ruotare (-95deg); transform: ruotare (-95deg);) li.submenu3.dropdown> a> span.caret (-moz-transform: ruotare (-95deg); -ms-transform: ruotare (-95deg); - webkit-transform: ruotare (-95deg); -o-transform: ruotare (-95deg); transform: ruotare (-95deg);) li.submenu4.dropdown> a> span.caret (-moz-transform: ruotare (- 95deg); -ms-transform: ruotare (-95deg); -webkit-transform: ruotare (-95deg); -o-transform: ruotare (-95deg); transform: ruotare (-95deg);)