Mura CMS personalizzazione delle cartelle

Una cartella in Mura CMS è un tipo di nodo speciale che può gestire molte funzioni diverse. Al centro, una cartella è progettata per prendere le pagine secondarie sotto di essa e visualizzarle in un formato elenco. Il caso d'uso più comune per questo è un blog: una cartella nel gestore del sito chiamata "Blog", in cui ogni pagina sottostante è un post di blog separato. Quando visiti la pagina del blog sul sito Web, tutti i post sono elencati in ordine di data di uscita (definita nel gestore del sito):

La cartella Blog nel Gestore sitiLa pagina Blog come appare nella parte frontale del sito

Modifica dell'output della cartella in Mura

Fuori dagli schemi, Mura ti offre un sacco di flessibilità per cambiare l'output delle tue cartelle, senza dover toccare alcun codice. Quando modifichi una cartella, noterai che c'è una scheda "Elenco opzioni di visualizzazione":

Su questo, puoi modificare le dimensioni dell'immagine e persino determinare quali campi di dati vuoi mostrare:

Modificando alcune impostazioni sul blog e aggiungendo un po 'di CSS, puoi fare molta strada con Mura Folders:

Creazione di una visualizzazione cartella personalizzata

Se non riesci ancora a ottenere ciò che desideri utilizzando le personalizzazioni di cartella predefinite di Mura, puoi creare anche l'output della tua cartella personale. 

1. Creare un'estensione di classe personalizzata per la cartella

Come abbiamo discusso nel tutorial Class Extensions, le estensioni di classe sono un modo per aggiungere attributi a un nuovo sottotipo di pagina. Le estensioni di classe possono anche essere usate come un gancio per Mura per intercettare un particolare sottotipo e cambiarne il comportamento predefinito. Per fare ciò, dobbiamo creare una nuova cartella con un sottotipo di blog.

Ora possiamo creare una nuova cartella Blog con questo sottotipo e collegarci nel nostro codice.

L'uscita predefinita della cartella proviene da  ID sito /includes/dsp_folder.cfm. Abbiamo bisogno di copiare quel file e spostarlo in  ID sito / include / themes / / THEMENAME display_objects / custom / estensioni /dsp_Folder_Blog.cfm

Nota: il titolo del file può essere case sensitive in base al sistema operativo del server. Si consiglia di intitolare il file nello stesso caso del nome degli attributi estesi.

Nota: cambiando il nome in dsp_Folder_Blog.cfm e includendolo nel / estensioni directory nel nostro tema, Mura utilizzerà automaticamente quel file invece dell'output della cartella predefinita quando viene eseguito il rendering di una cartella / blog. Funzionerà per tutti i sottotipi di contenuto in questa directory con la sintassi DSP_ Type _ sottotipo .cfm

2. Modifica l'output del contenuto

Ora che Mura sta registrando la nostra cartella personalizzata anziché quella predefinita, possiamo andare nel nostro file personalizzato e modificarlo come preferiamo. Quando apri il file, le prime 130 righe di codice o giù di lì sono tutte le logiche di base che vorrete mantenere per far funzionare certi aspetti della vostra cartella, come paginazione, filtri di categoria, ecc.. Non modificare questa logica a meno che tu non sappia davvero cosa stai facendo!

Il pezzo del file che ti interessa veramente, inizia intorno alla riga 133:

#variables. $. dspObject_Include (thefile = 'dsp_content_list.cfm', fields = variables. $. content ("displayList"), type = "Portal", iterator = variables.iterator, imageSize = variables. $. content ("ImageSize "), imageHeight = variabili. $. content (" ImageHeight "), imageWidth = variables. $. content (" ImageWidth ")) #

Che cosa fa questo codice, è prendere tutta la logica della cartella sopra di esso, quindi passarlo attraverso un file chiamato dsp_content_list.cfm. dsp_content_list.cfm è un estremamente file complesso, che ha tutti i tipi di logica per visualizzare tutti gli elementi e gli arrangiamenti possibili per gli elementi della cartella (ad esempio tutte le opzioni visualizzate nelle Opzioni di visualizzazione elenco sopra). Dal momento che vogliamo produrre il nostro output per il nostro blog, sostituiremo l'intero blog con il nostro iteratore e passeremo attraverso gli articoli del blog usando il nostro markup.

Come abbiamo appreso nel tutorial di Mura Iterators, i Muta Iterator sono un modo per prelevare contenuti da un feed e scorrerli attraverso il proprio markup. Nella logica principale del file dsp_folder_blog.cfm, tutti i contenuti della cartella vengono caricati nel proprio iteratore (variables.iterator), pronto per essere ripetuto.

Poiché il file ha già la tua cartella pronta per andare in un iteratore, tutto ciò che dobbiamo fare è scorrere il contenuto e mostrare il nostro display:

 
     
 
  
# Item.getTitle () #
 # Item.getSummary () # 
 
  
 

Nota 1: quando impostiamo il articolo variabile sulla riga 6, che sta effettivamente accedendo all'ambito del contenuto per ciascun elemento nel ciclo. Quindi quando facciamo qualcosa come:

# Item.getTitle () #

È come se stessimo accedendo all'ambito del contenuto all'interno di un modello di layout:

# $. Contenuti ( 'title') #

Nota 2: Ho creato una dimensione immagine personalizzata nelle mie Impostazioni sito Mura chiamata blog-img quello è 400x200. Il vantaggio di fare ciò è che gli utenti possano controllare il ritaglio dell'immagine affinché appaia nell'output.

Ora, quando rendiamo la pagina finale, possiamo vedere lo stesso contenuto del blog, reso nel nostro nuovo markup:

La creazione di layout di cartelle personalizzate è un ottimo modo per creare temi creativi e robusti senza doversi preoccupare di rompere le funzionalità principali di Mura. Questo metodo può essere utilizzato per diversi casi di utilizzo durante lo sviluppo dei temi, come blog, portfolio, pagine del team, ecc.