Папка в Mura CMS — это особый тип узла, который может обслуживать множество различных функций. По своей сути папка предназначена для того, чтобы брать дочерние страницы под ней и отображать их в виде списка. Наиболее распространенный вариант использования этого — блог — папка в вашем менеджере сайтов, которая называется «Блог», где каждая страница под ней — отдельный пост в блоге. Когда вы посещаете страницу блога на веб-сайте, все сообщения отображаются в порядке даты выпуска (определяется администратором сайта):
Изменение вывода папки в Mura
Из коробки Mura дает вам массу возможностей для изменения вывода ваших папок, не касаясь какого-либо кода. При редактировании папки вы увидите вкладку «Параметры отображения списка»:
На этом вы можете изменить размер изображения и даже определить, какие поля данных вы хотите показать:
Изменив несколько настроек в блоге и добавив немного CSS, вы можете пройти долгий путь с папками Mura:
Создание пользовательского отображения папки
Если вы по-прежнему не можете достичь того, чего хотите, используя готовые настройки папок Mura, вы также можете создать свой собственный вывод папки.
1. Создайте пользовательское расширение класса для папки
Как мы уже обсуждали в учебнике Class Extensions, Class Extensions — это способ добавления атрибутов к новому подтипу страницы. Расширения класса также могут использоваться в качестве ловушки для Mura для перехвата определенного подтипа и изменения его поведения по умолчанию. Для этого нам нужно создать новую папку с подтипом блога .
Теперь мы можем создать новую папку «Блог» с этим подтипом и подключиться к ней в нашем коде.
Вывод папки по умолчанию происходит из {siteID} /include/dsp_folder.cfm. Нам нужно скопировать этот файл и переместить его в {siteID} / includes / themes / {themeName} / display_objects / custom / extensions / dsp_Folder_Blog .cfm
Примечание: название вашего файла может зависеть от регистра в зависимости от операционной системы вашего сервера. Рекомендуется указывать название файла в том же регистре, что и имя расширенных атрибутов.
Примечание : изменив имя на dsp_Folder_Blog.cfm и включив его в каталог / extensions в нашей теме, Mura будет автоматически использовать этот файл вместо вывода папки по умолчанию при отображении папки / блога. Это будет работать для всех подтипов содержимого в этом каталоге с синтаксисом dsp_ {Type} _ {SubType} .cfm
2. Отредактируйте вывод содержимого
Теперь, когда Mura регистрирует нашу пользовательскую папку вместо папки по умолчанию, мы можем зайти в наш пользовательский файл и изменить его по своему усмотрению. Когда вы открываете файл, первые 130 строк кода или около того представляют собой всю основную логику, которую вы захотите сохранить для работы определенных аспектов вашей папки, таких как разбиение на страницы, фильтры категорий и т. Д. Не редактируйте эту логику, если вы на самом деле знаю, что ты делаешь!
Кусок файла, который вас действительно интересует, начинается со строки 133:
|
1
2
3
4
5
6
7
8
|
#variables.$.dspObject_Include(thefile=’dsp_content_list.cfm’,
fields=variables.$.content(«displayList»),
type=»Portal»,
iterator= variables.iterator,
imageSize=variables.$.content(«ImageSize»),
imageHeight=variables.$.content(«ImageHeight»),
imageWidth=variables.$.content(«ImageWidth»)
)#
|
Этот код использует всю логику папки над ней, а затем передает ее через файл с именем dsp_content_list.cfm . dsp_content_list.cfm — чрезвычайно сложный файл, который имеет всевозможную логику для отображения всех возможных элементов и механизмов для элементов папки (т. е. всех параметров, которые вы видели в параметрах отображения списка выше). Так как мы хотим свернуть наш собственный вывод для нашего блога, мы фактически заменим весь этот кодовый блог собственным итератором и пройдемся по элементам блога, используя нашу собственную разметку.
Как мы узнали из учебника Mura Iterators, Mura Iterators — это способ извлекать контент из ленты и проходить по нему, используя собственную разметку. В основной логике файла dsp_folder_blog.cfm все содержимое папки загружается в свой собственный итератор (variables.iterator), готовый для зацикливания.
Поскольку в файле уже есть ваша папка, готовая к отправке в итераторе, все, что нам нужно сделать, это перебрать содержимое и вывести наш дисплей:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!— Create a new Bootstrap Row —>
<div class=»row»>
<!— Loop through the Blog content —>
<cfloop condition=»variables.iterator.hasNext()»>
<!— Set the item to access each item within the loop —>
<cfset item=variables.iterator.next()>
<div class=»col-md-4″>
<div class=»well»>
<img src=»#item.getImageURL(size=’blog-img’)#» alt=»#item.getTitle()#»>
<h3><a href=»#item.getURL()#»>#item.getTitle()#</a></h3>
#item.getSummary()#
</div>
</div>
</cfloop>
</div>
|
Примечание 1 : когда мы устанавливаем переменную item в строке 6, это эффективно обращается к области содержимого для каждого элемента в цикле. Поэтому, когда мы делаем что-то вроде:
|
1
|
#item.getTitle()#
|
Это так же, как если бы мы обращались к области содержимого в шаблоне макета:
|
1
|
#$.content(‘title’)#
|
Примечание 2 : я создал нестандартный размер изображения в настройках сайта Mura под названием blog-img который составляет 400×200. Преимущество этого состоит в том, что пользователи могут контролировать обрезку изображения, чтобы оно отображалось в выходных данных.
Теперь, когда мы визуализируем последнюю страницу, мы можем увидеть тот же контент блога, отображаемый в нашей новой разметке:
Создание пользовательских макетов папок — это отличный способ создавать креативные, надежные темы, не беспокоясь о нарушении основных функций Mura. Этот метод может использоваться для нескольких различных случаев использования при разработке ваших тем, таких как блоги, портфолио, страницы коллектива и т. Д.