Mura CMS metodi personalizzati

Mura CMS ti dà la possibilità di creare le tue funzionalità personalizzate, direttamente dal livello del tema. Questo articolo ti mostrerà come puoi migliorare i temi creando metodi personalizzati riutilizzabili che possono essere utilizzati sia nei modelli di layout che negli utenti amministratori.

Ricapitolare

Quando sviluppi temi, potresti avere una serie di "oggetti" che vorresti visualizzare più e più volte, come presentazioni, blocchi di dettagli, ecc..

Nel tutorial sulle estensioni di classe, abbiamo esaminato come creare attributi personalizzati per un libro e visualizzarli sulla pagina utilizzando un componente. Ecco il componente finale che abbiamo creato:

Dettagli
 
 Autore: [M] $ content. ( 'BookAuthor') [/ m]
 Data di rilascio: [M] dateFormat ($. Contenuti ( 'bookReleaseDate'), 'mm / gg / aa') [/ m]
 ISBN: [M] $ content. ( 'BookISBN') [/ m]
 Condizione: [M] $. Contenuti ( 'bookNewUsed') [/ m]
 Prezzo: $ [M] $ content. ( 'BookPrice') [/ m] 
 

Questo ha funzionato bene per il nostro esempio, ma ci sono alcuni inconvenienti:

1. Il markup è aperto agli editori admin che potrebbero potenzialmente alterare il markup, influenzando la sua visualizzazione.
2. Non c'è logica attorno a ogni oggetto; se il codice ISBN non esiste, ad esempio, l'etichetta verrà comunque visualizzata con un valore vuoto accanto ad essa. Ciò si verifica anche se l'utente ha aggiunto questo componente a una pagina che non è nemmeno un Libro, nel qual caso nessuno degli attributi estesi verrebbe visualizzato.

Un modo per risolvere questi problemi è creare un metodo personalizzato nel nostro tema che visualizzi i dettagli del libro ogni volta che viene utilizzato. 

Creazione di un metodo di visualizzazione personalizzato

I metodi di visualizzazione in Mura si trovano in un file chiamato contentRenderer.cfc. Ora, questo file esiste in due posizioni all'interno del tuo sito:

1. Livello del sito: ID sito /includes/contentRenderer.cfc
2. Livello del tema: ID sito comprende / themes / THEMENAME /contentRenderer.cfc

È importante capirlo tutti e due i file renderanno i metodi nel tuo sito, comunque a livello di tema contentRenderer.cfc aggiungerà eventuali metodi che non esistono a livello di sito e sostituiranno eventuali metodi già esistenti a livello di sito.

Un'altra cosa importante da considerare è che quando si esegue lo sviluppo del tema, qualsiasi lavoro svolto sopra la directory del tema non verrà distribuito con il tema. Se hai intenzione di creare temi per la distribuzione, ti consiglio di conservare tutto il codice personalizzato a livello di tema.

Aggiunta al contenuto del tema ThemeRenderer.cfc

Nella tua directory dei temi, apri il contentRenderer.cfc file

Nota: se stai creando il tuo tema da zero e non hai già il file, vai avanti e aggiungi il contentRenderer.cfc dal tema MuraBootstrap3 allegato a questo articolo. 

In questo file, creeremo una nuova funzione chiamata dspBookDetails: 

Ora, ogni volta che chiamiamo questa funzione, Mura eseguirà qualsiasi cosa al suo interno. Al momento, Mura non ha nulla da fare o da mostrare, finché non specifichiamo che vogliamo che la funzione restituisca qualcosa. Aggiungiamo una variabile per archiviare i nostri contenuti affinché questa funzione restituisca:

Ora puoi vedere che stiamo creando una variabile per archiviare tutto il nostro contenuto e la nostra logica (), quindi dicendo alla funzione di restituire quella variabile alla pagina ().

Ora siamo pronti per aggiungere il contenuto del libro reale, in modo simile a come avevamo nel componente:

   
Dettagli
 
 Autore: # $. Contenuti ( 'bookAuthor') #
 Data di rilascio: #dateFormat ($. contenuti ( 'bookReleaseDate'), 'mm / gg / aa') #
 ISBN: # $. Contenuti ( 'bookISBN') #
 Condizione: # $. Contenuti ( 'bookNewUsed') #
 Prezzo: $ # $. Contenuti ( 'bookPrice') # 
    

Nota: abbiamo sostituito il [M] tag con hashtag (#) perché siamo in un file di codice. [M] i tag possono essere utilizzati solo negli editor dell'area admin. 

Chiamare la funzione da un componente

Ora che abbiamo creato la funzione in contentRenderer.cfc, possiamo chiamarlo usando il Mura Scope. Torna al componente e sostituisci il contenuto con la seguente riga:

[M] $. DspBookDetails () [/ m]

Nota: Stiamo avvolgendo la funzione in a

per impedire a CKEditor di aggiungere altro

tag attorno all'output. Inoltre, non dimenticare la parentesi dopo aver chiamato la funzione (). 

Quando pubblichi il componente e ricarichi la pagina del libro, dovresti vedere i dettagli del libro identici a come lo avevi prima:

Chiamare la funzione da un modello di layout

Oltre a chiamare la funzione da un componente, puoi anche utilizzare i tuoi metodi personalizzati direttamente all'interno dei modelli di layout. Ad esempio, è possibile duplicare il twoCol_SR.cfm modello, chiamalo book.cfm, e aggiungi questo alla barra laterale destra:

Aggiunta di alcuni logica dinamica

Ora che abbiamo i dettagli del libro contenuti in un metodo personalizzato, possiamo aggiungere qualche logica aggiuntiva per rendere il nostro output un po 'più robusto. Innanzitutto, racchiudiamo l'intero contenuto della funzione per rilevare se la pagina in questione è effettivamente un libro. In caso contrario, non restituirà nulla.

     
Dettagli
 
 Autore: # $. Contenuti ( 'bookAuthor') #
 Data di rilascio: #dateFormat ($. contenuti ( 'bookReleaseDate'), 'mm / gg / aa') #
 ISBN: # $. Contenuti ( 'bookISBN') #
 Condizione: # $. Contenuti ( 'bookNewUsed') #
 Prezzo: $ # $. Contenuti ( 'bookPrice') # 
     

La prossima cosa che vogliamo fare è rilevare se esiste effettivamente un valore per ogni oggetto che stiamo visualizzando (Autore, ISBN, ecc.). Se il valore non esiste, vogliamo saltare l'elemento e passare alla riga successiva.

Possiamo realizzare questo avvolgendo un Se dichiarazione su ogni riga, verificando se esiste una lunghezza del valore maggiore di 0:

  Autore: # $. Contenuti ( 'bookAuthor') #
 

Avvolgere ogni elemento di dettaglio del libro nel codice sopra, sostituendo il $ .Content () valori con i valori appropriati per ogni articolo:

     
Dettagli
 
   Autore: # $. Contenuti ( 'bookAuthor') #
   Data di rilascio: #dateFormat ($. contenuti ( 'bookReleaseDate'), 'mm / gg / aa') #
   ISBN: # $. Contenuti ( 'bookISBN') #
   Condizione: # $. Contenuti ( 'bookNewUsed') #
   Prezzo: $ # $. Contenuti ( 'bookPrice') #  
      

Conclusione

La creazione di metodi personalizzati è un ottimo modo per aggiungere versatilità ai tuoi temi, oltre a mantenere l'integrità del tuo codice.

Web design