Mura CMS Personnalisation des dossiers

Un dossier dans Mura CMS est un type de noeud spécial qui peut servir à de nombreuses fonctions différentes. À la base, un dossier est conçu pour prendre les pages enfants en dessous et les afficher sous forme de liste. Le cas d'utilisation le plus courant est un blog - un dossier de votre gestionnaire de site appelé "Blog", où chaque page située en dessous est un article de blog distinct. Lorsque vous visitez la page de blog sur le site Web, tous les articles sont répertoriés par date de publication (définie dans le gestionnaire de site):

Le dossier Blog dans le gestionnaire de siteLa page du blog telle qu'elle apparaît au début du site

Modification de la sortie du dossier dans Mura

Par défaut, Mura vous offre une grande flexibilité pour modifier la sortie de vos dossiers, sans avoir à toucher à du code. Lorsque vous modifiez un dossier, vous remarquerez l’onglet "Options d’affichage de la liste":

Sur ceci, vous pouvez éditer la taille de l'image et même déterminer les champs de données que vous voulez afficher:

En modifiant quelques paramètres du blog et en ajoutant un peu de CSS, vous pouvez aller très loin avec Mura Folders:

Création d'un affichage de dossier personnalisé

Si vous ne parvenez toujours pas à obtenir ce que vous voulez en utilisant les personnalisations prédéfinies des dossiers de Mura, vous pouvez également créer votre propre sortie de dossier.. 

1. Créez une extension de classe personnalisée pour le dossier.

Comme nous l'avons vu dans le tutoriel Extensions de classe, Extensions de classe est un moyen d'ajouter des attributs à un nouveau sous-type de page. Les extensions de classe peuvent également être utilisées comme un crochet pour permettre à Mura d'intercepter un sous-type particulier et de modifier son comportement par défaut. Pour ce faire, nous devons créer un nouveau dossier avec un sous-type de Blog.

Maintenant, nous pouvons créer un nouveau dossier Blog avec ce sous-type et le brancher dans notre code.

La sortie par défaut du dossier provient de siteID /includes/dsp_folder.cfm. Nous devons copier ce fichier et le déplacer vers siteID / includes / themes / themeName / display_objects / custom / extensions /dsp_Folder_Blog.cfm

Remarque: Le titre de votre fichier peut être sensible à la casse en fonction du système d'exploitation de votre serveur. Il est recommandé de titrer votre fichier dans le même cas que le nom de vos attributs étendus..

Remarque: en changeant le nom en dsp_Folder_Blog.cfm et l'inclure dans le / extensions répertoire de notre thème, Mura utilisera automatiquement ce fichier au lieu de la sortie du dossier par défaut lorsqu’un dossier / blog sera rendu. Cela fonctionnera pour tous les sous-types de contenu de ce répertoire avec la syntaxe dsp_ Type _ Sous-type .cfm

2. Modifier la sortie du contenu

Maintenant que Mura enregistre notre dossier personnalisé au lieu de celui par défaut, nous pouvons aller dans notre fichier personnalisé et le modifier comme bon nous semble. Lorsque vous ouvrez le fichier, les 130 premières lignes de code constituent une logique de base que vous souhaiterez conserver pour que certains aspects de votre dossier fonctionnent, tels que la pagination, les filtres de catégorie, etc.. Ne modifiez pas cette logique sauf si vous savez vraiment ce que vous faites!

La partie du fichier qui vous concerne vraiment commence autour de la ligne 133:

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

Ce que fait ce code, est de prendre toute la logique de dossier au-dessus, puis de le transmettre à travers un fichier appelé dsp_content_list.cfm. dsp_content_list.cfm est un extrêmement fichier complexe, qui a toutes sortes de logique pour afficher tous les éléments possibles et les arrangements pour les éléments de dossier (c'est-à-dire toutes les options que vous avez vues dans les options d'affichage de liste ci-dessus). Puisque nous voulons créer notre propre sortie pour notre blog, nous allons remplacer ce blog de code entier par notre propre itérateur et parcourir les éléments du blog à l'aide de notre propre balisage..

Comme nous l'avons vu dans le didacticiel Mura Iterators, les itérateurs Mura sont un moyen de récupérer le contenu d'un flux et de le parcourir en boucle à l'aide de votre propre balisage. Dans la logique principale du fichier dsp_folder_blog.cfm, tout le contenu du dossier est chargé dans son propre itérateur (variables.iterator), prêt à être parcouru en boucle..

Comme le dossier contient déjà votre dossier dans un itérateur, il vous suffit de parcourir le contenu et d'afficher notre affichage:

 
     
 
  
# item.getTitle () #
 # item.getSummary () # 
 
  
 

Note 1: quand on met le article variable de la ligne 6, qui accède effectivement à la portée du contenu pour chaque élément de la boucle. Alors, quand on fait quelque chose comme:

# item.getTitle () #

C'est la même chose que si nous avions accès à la portée du contenu dans un modèle de présentation:

# $. content ('title') #

Note 2: J'ai créé une taille d'image personnalisée dans les paramètres de mon site Mura, appelée blog-img c'est 400x200. Cela présente l'avantage de permettre aux utilisateurs de contrôler le recadrage de l'image pour que celle-ci apparaisse dans la sortie..

Maintenant, lorsque nous rendons la page finale, nous pouvons voir le même contenu de blog, rendu dans notre nouveau balisage:

La création de présentations de dossiers personnalisées est un excellent moyen de créer des thèmes créatifs et robustes sans avoir à vous soucier de casser les fonctionnalités essentielles de Mura. Cette méthode peut être utilisée pour différents cas d'utilisation lors du développement de vos thèmes, tels que les blogs, les portefeuilles, les pages d'équipe, etc..