Mura CMS Anpassen von Ordnern

Ein Ordner in Mura CMS ist ein spezieller Knotentyp, der viele verschiedene Funktionen ausführen kann. Im Grunde ist ein Ordner so konzipiert, dass die untergeordneten Seiten darunter angezeigt und in einem Listenformat angezeigt werden. Der häufigste Anwendungsfall hierfür ist ein Blog - ein Ordner in Ihrem Site Manager mit dem Namen "Blog", in dem jede Seite darunter ein separater Blogbeitrag ist. Wenn Sie die Blogseite auf der Website besuchen, werden alle Beiträge in der Reihenfolge des Veröffentlichungsdatums aufgelistet (im Site-Manager definiert):

Der Blogordner im Site ManagerDie Blog-Seite, wie sie am vorderen Ende der Site angezeigt wird

Ändern der Ordnerausgabe in Mura

Mura gibt Ihnen eine Menge Flexibilität, um die Ausgabe Ihrer Ordner zu ändern, ohne Code zu berühren. Wenn Sie einen Ordner bearbeiten, werden Sie feststellen, dass die Registerkarte "Listenanzeigeoptionen" angezeigt wird:

Hier können Sie die Bildgröße bearbeiten und sogar bestimmen, welche Datenfelder Sie anzeigen möchten:

Durch Ändern einiger Einstellungen im Blog und Hinzufügen von CSS können Sie mit Mura-Ordnern einen langen Weg gehen:

Erstellen einer benutzerdefinierten Ordneranzeige

Wenn Sie mit Muras sofortigen Ordneranpassungen immer noch nicht das erreichen, was Sie möchten, können Sie auch eine eigene Ordnerausgabe erstellen. 

1. Erstellen Sie eine benutzerdefinierte Klassenerweiterung für den Ordner

Wie im Tutorial zu den Klassenerweiterungen beschrieben, bieten Klassenerweiterungen eine Möglichkeit, Attribute zu einem neuen Seitensubtyp hinzuzufügen. Klassenerweiterungen können auch als Hook für Mura verwendet werden, um einen bestimmten Untertyp abzufangen und sein Standardverhalten zu ändern. Dazu müssen wir einen neuen Ordner mit einem Subtyp von erstellen Blog.

Jetzt können wir einen neuen Blog-Ordner mit diesem Untertyp erstellen und in unseren Code einhängen.

Die Standardordnerausgabe stammt aus siteID /includes/dsp_folder.cfm. Wir müssen diese Datei kopieren und in verschieben siteID / include / themes / themeName / display_objects / custom / extensions /dsp_Folder_Blog.cfm

Hinweis: Je nach Server-Betriebssystem kann der Titel Ihrer Datei die Groß- und Kleinschreibung unterscheiden. Es wird empfohlen, dass Sie Ihre Datei in demselben Fall wie der Name Ihrer erweiterten Attribute benennen.

Hinweis: indem Sie den Namen in ändern dsp_Folder_Blog.cfm und es in die / Erweiterungen Verzeichnis in unserem Design verwendet, verwendet Mura diese Datei automatisch anstelle der Standardordnerausgabe, wenn ein Ordner / Blog dargestellt wird. Dies funktioniert für alle Inhaltssubtypen in diesem Verzeichnis mit der Syntax dsp_ Typ _ SubType .cfm

2. Bearbeiten Sie die Inhaltsausgabe

Nun, da Mura unseren benutzerdefinierten Ordner anstelle des Standardordners registriert, können wir in unsere benutzerdefinierte Datei gehen und diese beliebig ändern. Wenn Sie die Datei öffnen, sind die ersten 130 Codezeilen alle Kernlogik, die Sie beibehalten möchten, um bestimmte Aspekte Ihres Ordners in Gang zu setzen, wie Seitenumbruch, Kategoriefilter usw. Bearbeiten Sie diese Logik nur, wenn Sie wirklich wissen, was Sie tun!

Der Teil der Datei, um den Sie sich wirklich kümmern, beginnt in Zeile 133:

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

Dieser Code übernimmt die gesamte Ordnerlogik darüber und leitet sie dann durch eine aufgerufene Datei dsp_content_list.cfm. dsp_content_list.cfm ist ein äußerst komplexe Datei, die alle Arten von Logik enthält, um alle möglichen Elemente und Anordnungen für die Ordnerelemente anzuzeigen (d. h. alle Optionen, die Sie in den Listenanzeigeoptionen oben gesehen haben). Da wir unsere eigene Ausgabe für unseren Blog rollen möchten, werden wir den gesamten Codeblog tatsächlich durch unseren eigenen Iterator ersetzen und die Blogelemente mit unserem eigenen Markup durchlaufen.

Wie wir im Mura-Iterators-Tutorial gelernt haben, sind Mura-Iteratoren eine Möglichkeit, Inhalte aus einem Feed zu ziehen und mit Ihrem eigenen Markup durchzublättern. In der Hauptlogik der Datei dsp_folder_blog.cfm werden alle Inhalte des Ordners in einen eigenen Iterator (variables.iterator) geladen, der bereit ist, durchgeschleift zu werden.

Da die Datei Ihren Ordner bereits für einen Iterator vorbereitet, müssen Sie nur noch den Inhalt durchlaufen und unsere Anzeige ausgeben:

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

Anmerkung 1: wenn wir das einstellen Artikel Variable in Zeile 6, die effektiv auf den Inhaltsbereich für jedes Element in der Schleife zugreift. Wenn wir also so etwas machen:

# item.getTitle () #

Das ist dasselbe, als würden wir innerhalb einer Layoutvorlage auf den Inhaltsbereich zugreifen:

# $. content ('title') #

Anmerkung 2: Ich habe in meinen Mura-Site-Einstellungen eine benutzerdefinierte Bildgröße erstellt blog-img das ist 400x200. Dies hat den Vorteil, dass Benutzer das Zuschneiden des Bildes steuern können, damit es in der Ausgabe angezeigt wird.

Wenn wir nun die letzte Seite rendern, können wir denselben Blog-Inhalt sehen, der in unserem neuen Markup dargestellt wird:

Das Erstellen von benutzerdefinierten Ordnerlayouts ist eine großartige Möglichkeit, kreative, robuste Designs zu erstellen, ohne sich Sorgen über die Kernfunktionen von Mura machen zu müssen. Diese Methode kann für verschiedene Anwendungsfälle beim Entwickeln von Designs verwendet werden, z. B. für Blogs, Portfolios, Teamseiten usw..