В Mura CMS легко создать столько шаблонов макетов, сколько вы хотите отформатировать в своих тематических страницах. Шаблоны макетов назначаются вашим страницам Mura в менеджере сайта.
Если вы представляете типичную HTML-страницу в браузере, она обычно состоит из следующих элементов:
Заголовок HTML (метатеги, CSS, библиотеки JavaScript)
Заголовок (логотип сайта/баннер и навигация)
Контейнер
Основной контент (раздел основного контента, боковые панели и т. д.)
Нижний колонтитул (нижняя навигация, авторские права, контактная информация и т. д.)
Элементы нижнего колонтитула HTML (дополнительные библиотеки JavaScript и код инициализации)
<голова>
<тело>
<дел>
<нижний колонтитул>
Эта структура, по сути, представляет собой шаблон макета Mura, но вы можете создавать свои шаблоны макетов по своему усмотрению. Например, если вам нужна специальная целевая страница или раздел вашего сайта с отдельным заголовком, CSS и т. д., вы можете создать этот шаблон и применить его к странице Mura в менеджере сайта. Ваши шаблоны могут быть даже на 100% HTML, если вы этого хотите (конечно, в этот момент ничего не будет динамическим).
Создание нового шаблона макета
Чтобы создать шаблон макета, создайте новый файл .cfm в каталоге шаблонов вашей темы. Выпадающий список шаблонов в менеджере сайта будет просматривать эту папку и автоматически видеть любые файлы .cfm, что позволит вам применить их к этой странице.
Чтобы проверить это, мы можем создать страницу helloWorld.cfm в нашем каталоге шаблонов и применить ее к любой странице:
В файлах вашего сайта перейдите к {siteID}/includes/themes/{theme}. /шаблоны каталог
Создайте новый файл с именем helloWorld.cfm
Вставьте следующий код и сохраните
Привет, мир
Применить новый шаблон к странице в Mura
В диспетчере сайтов щелкните значок шаблона рядом с любой страницей.
Выберите новый шаблон helloWorld.cfm
Щелкните значок земного шара, чтобы просмотреть страницу
Добавление динамических включений
Теперь, когда вы понимаете, как загружаются шаблоны, вы можете начать создавать их более динамичными, создавая глобальные включения для верхнего, верхнего и нижнего колонтитула HTML.
Начните с создания каталога include в каталоге шаблонов вашей темы. Это может выглядеть примерно так: {название темы}/templates/inc
В этой папке вы можете создать столько различных включений, сколько захотите. Я бы рекомендовал начать со следующего:
html_head.cfm (метатеги, CSS, библиотеки JavaScript)
header.cfm (логотип сайта/баннер и навигация)
footer.cfm (нижняя навигация, авторские права, контактная информация и т. д.)
html_footer.cfm (дополнительные библиотеки JavaScript и код инициализации)
Мы можем включить эти файлы в наш шаблон, используя тег , например:
cfm">
Примечание : путь к шаблону указан относительно файла, из которого мы его вызываем.
По мере создания дополнительных шаблонов вы можете повторно использовать эти включения, поэтому, если вам когда-либо понадобится внести изменения, вам нужно будет отредактировать только один файл, и он будет глобально обновлен во всех ваших шаблонах.
Вы можете создать столько шаблонов, сколько пожелаете, например
one_column.cfm
twoCol_SR.cfm (боковая панель справа)
two_Col_SL.cfm (боковая панель слева)
three_column.cfm
и т. д.
Шаблон домашней страницы
Домашняя страница большинства веб-сайтов обычно немного отличается от других страниц сайта. Он может содержать более крупный заголовок со слайд-шоу, дополнительные призывы к действию и так далее. По этой причине мы обычно включаем шаблон home.cfm в каждую тему, чтобы учесть всю эту специальную разметку. Кроме того, вы можете добавить идентификатор верхней части тела или класс home , чтобы вы могли подключаться к стилям главной страницы с помощью CSS и учитывать любые различия.
Также см. обучающее видео по шаблонам Mura CMS Layout Templates на GetMura.com.
Строительные шаблоны | Документация Bolt
Перейти к навигации по документам
Примечание: В настоящее время вы читаете документацию для Болт 2.2 . Ищу документацию вместо Bolt 5.0?
Для отображения HTML-страниц с динамическим содержимым Bolt использует Twig язык шаблонов. Это означает, что каждый, кто знаком с Twig, может легко начать создавать шаблоны в Bolt.
Короче говоря, Twig можно охарактеризовать как «гибкий, быстрый и безопасный шаблон». движок для PHP». Прежде всего, он отделяет разметку ваших шаблонов от PHP-код в CMS. Делает это элегантно и быстро, а значит, Написание ваших HTML-шаблонов в Twig даст вам чистые и разборчивые шаблоны. Это означает, что вам не нужно использовать PHP-подобные операторы в вашей разметке, так что есть меньше такого кода:
Заголовок:
.
И еще вот так:
{% если что-то('3') %}
Заголовок: {{ title }}.
{% endif%}
Шаблон в Bolt может использовать все стандартные теги Twig с некоторыми дополнениями, которые специфичны для работы с Bolt. Если вы еще не знакомы с Twig, вам следует читать «Twig для дизайнеров шаблонов» на официальном сайте Twig.
Структура файла¶
Тема веб-сайта Bolt состоит из набора шаблонов веток, расположенных в тема — папка в корне вашего сайта. Вы всегда можете добавить больше шаблонов, если хотите. По умолчанию шаблон index.twig является домашней страницей, но вы может переопределить его с помощью параметров конфигурации.
Текущая тема по умолчанию содержит следующие файлы и папки:
Файл
Описание
index.twig
шаблон главной страницы сайта.
вход.ветвь
Шаблон
для одной записи.
listing.twig
Шаблон для отображения списков, таких как «последние страницы», а также страниц обзора таксономии.
запись.ветвь
шаблон для «общей» страницы записи, если для типа контента не указан шаблон.
небольшие служебные файлы, включенные в другие шаблоны
тема.yml
Файл с конфигурацией, связанной с темой и тем, как она работает с болтом. Может также содержать конфигурацию для конкретных полей шаблона и значения для темы, которые будут использоваться в ее шаблонах.
javascripts/
папка с некоторыми файлами javascript.
таблицы стилей/
.. и аналогично некоторые файлы css.
Все имена файлов вспомогательных шаблонов начинаются с подчеркивания. Это просто соглашение, чтобы было легче распознать, какой шаблон что делает. Если один из ваших ContentTypes имеет поле «выбор шаблона», Bolt пропустит его вспомогательные шаблоны по умолчанию.
Совет: набор шаблонов по умолчанию включает в себя чтобы вставить верхний и нижний колонтитулы и т. д., но вы можете использовать Наследование шаблонов Если вы предпочитаете.
По умолчанию Bolt создает ссылки на отдельные страницы на основе ContentTypes и он использует шаблон, основанный на его имени. Например, если на вашем сайте есть ContentType foos , одна запись в этом ContentType будет доступна в domain.com/foo/slug-of-record, где slug-of-record — это slugified вариант названия. Bolt попытается использовать foo.twig в качестве шаблона для рендеринга. страница. Вы можете изменить это, определив другой шаблон в contenttypes.yml или с помощью поля «выбор шаблона» в ContentType. Более информацию об этом можно найти в главе Работа с контентом и типами контента.
Используя ваши темы theme.yml вы также можете предоставить запасные варианты для определенных настроек основной config. yml . Они полезны при создании тем, и вы хотите предоставить собственные шаблоны. Имейте в виду, что они переопределяются основным config.yml , если там есть такой же ключ. Это (с примерами):
listing_template используется как для списка ContentType, так и для списка таксономии, если один из них определен в основном config.yml .
Используя параметр template_directory в файле theme.yml вашей темы, вы можете выберите расположение шаблонов в структуре вашей темы. Например, чтобы поместите все свои шаблоны в каталог с именем веточка вы бы добавили следуя вашей теме theme.yml:
каталог_шаблонов: ветка
Теги шаблона¶
Простой шаблон entry.twig может выглядеть примерно так, как вы видите. ниже. Используя этот пример, мы рассмотрим некоторые детали Twig. Язык шаблонов. Как упоминалось ранее: гораздо более подробная информация может быть можно найти в Twig для дизайнеров шаблонов на официальном сайте Twig.
{% включает '_header.twig' %}
<статья>
{{record.title }}
{# Отображать изображение только в том случае, если есть фактическое изображение для отображения #}
{% если содержимое.изображение!="" %}
<дел>
{% конец%}
{{ запись.тело }}
Опубликовано {{record.user.displayname }} в
{{record.datecreated|дата("M d, 'y")}}
{% включает '_footer.twig' %}
В этом примере происходит следующее:
{% include '_header.twig' %} , строка 1: тег include считывает шаблон с именем _header.twig , анализирует его, как любой другой шаблон Twig, и выводит его в браузер.
{{ record.title }} , строка 5: Поскольку это общий шаблон, ‘контент’ содержит запись текущей запрошенной страницы. Например, если текущая страница: domain.com/news/the-website-is-live, содержание будет содержать запись из «новостей», которая имеет «веб-сайт в прямом эфире» в качестве слага. «content» — это массив, поэтому для вывода поля «title» мы используем ‘.’-обозначение.
{{record.link }} , строка 5: Здесь мы используем свойство ссылки для получения URL который ссылается на контент.
{# Отображать только .. #} , строка 7: Это простой комментарий. Это будет удаляется при отображении шаблона в браузере, поэтому он не будет отображаться вверху в «просмотре исходного кода».
{% if content.image!="" %} .. {% endif %} , строки 8–12: оператор if анализирует только часть между начальным и конечным тегом, если задано условие правда. Таким образом, в этом случае изображение отображается в браузере только в том случае, если content.image не равно «», т.е. если оно не пустое.
{{record.image|thumbnail(320, 240) }} , строка 10: с помощью миниатюры фильтр, мы можем создавать миниатюры изображений на лету. В этом В этом случае атрибут источника изображения в HTML будет выглядеть примерно так: ‘/thumbs/300×240/imagename.jpg’. В Bolt есть встроенный инструмент для изменения размера изображения. создаст изображение с точными размерами и кэширует его для дальнейшего использовать.
{{record.body }} , строка 14: отображает поле body файла содержание.
{{record.datecreated|date("M d, 'y")}} , строка 18: datecreated равно единице элементов, которые всегда присутствуют во всех типах контента, и это содержит дату создания записи. Он хранится в машиночитаемом формат, поэтому, чтобы отобразить его так, как мы хотим, мы используем фильтр date() . В в этом случае он выведет что-то вроде «26 августа ’12».
Основы Twig¶
Существует три основных типа тегов Twig, которые вы можете использовать в своих шаблонах:
{% foo %} — функциональный тег. Он содержит какое-то ключевое слово и обычно что-то делает с . Он используется для циклов for для перебора массива, , если -операторы, включают -операторы, набор -операторов и тому подобное что.
{{ foo }} — простой выходной тег. Что бы ни было в переменной фу получает отправлено в браузер.
{# foo #} — это комментарий. Используйте его для добавления комментариев к вашим шаблонам, которые ничего не делай. они сопоставимы с комментариями HTML, такими как , за исключением того факта, что комментарии Twig не отправляются в браузер, поэтому вы не можете видеть их, используя «просмотр исходного кода».
Внутри этих тегов вы можете использовать выражения, операторы, переменные, функции и фильтры. Мы приведем здесь несколько кратких примеров, но для более подробного ознакомления вам следует прочитать руководство Twig.
{{ foo }} выводит переменную foo . Ни больше ни меньше.
{{ bar(foo) }} выводит результаты функции bar() . В таком случае, ‘foo’ используется в качестве аргумента функции, поэтому вывод, скорее всего, зависит от содержимого foo .
{{ foo|bar }} Выводит переменную foo , но с bar в качестве фильтра. Если foo это «привет», {{ foo|upper }} выведет «HELLO».
{% if foo == "bar" %} — это оператор, проверяющий, является ли переменная foo равно значению «бар». Если да, то часть, которая находится между отверстием оператор и соответствующий {% endif %} будут отображены.
Строгие переменные¶
Bolt устанавливает для ‘strict_variables’ в Twig значение false по умолчанию. Это будет означать, что вы не получит предупреждений, если вы попытаетесь использовать несуществующую переменную. Этот упрощает использование условного вывода, поскольку позволяет следующее, независимо от того, content или content.image существуют в текущем страница.
{% если content.image != "" %}
(сделайте что-нибудь с изображением..)
{% endif%}
Это также гарантирует, что в ваших шаблонах не возникнет ошибка:
Несуществующая переменная {{ foo }}, с
несуществующий элемент {{ foo.bar }}.
Хотя это облегчает написание универсальных шаблонов, это также упрощает отладку. сложнее, потому что ошибка не будет показана, если вы допустите опечатку в имени переменной, или попытаться получить доступ к несуществующему элементу. Чтобы включить строгие переменные, установите следующие в вашем config. yml :
строгие_переменные: правда
Если вы сделаете это, вам придется более строго проверять свои переменные, потому что будет выведена ошибка, если вы попытаетесь использовать несуществующую переменную:
{%, если content.image определен и content.image != "" %}
{# сделайте что-нибудь с content.image... #}
{% endif%}
Специальные поля шаблона¶
Очень сложно создать универсальное решение для вашего сайта. Многие страницы могут выглядят совсем иначе друг на друга. Вот почему вы должны создавать разные шаблоны, подходящие эти разные требования. Однако одна страница может радикально отличаться от другой. и даже с использованием одних и тех же полей между этими страницами создаст ограничение.
Например, ваша домашняя страница может иметь много разных разделов со сложной разметкой. между ними. Все другие ваши страницы имеют одно поле body html, которое на самом деле не будет достаточно. Вы можете создать новый ContentType или использовать ресурс contenttypes, но на самом деле это не элегантное решение.
Поля, специфичные для шаблона, позволяют определить дополнительные поля, которые будут использоваться, когда шаблон выбрали для записи. Они определены в теме theme.yml , и это похоже на определение полей ContentType.
поля шаблона:
index.twig: # Шаблон нашей домашней страницы
section_1_heading:
тип: текст
section_1_body:
тип: html
section_2_heading:
тип: текст
section_2_body:
тип: html
нижний колонтитул_изображение:
тип: изображение
Когда вы изменяете свой шаблон при редактировании записи, и она имеет поля шаблона связанные с ним, вы будете вежливо уведомлены о том, что вам нужно сохранить и обновить для эти изменения вступят в силу. Если это уже шаблон для записи, это происходить автоматически.
Чтобы изменить имя, отображаемое для каждого шаблона в поле выбора шаблона, вы можете определить имена и связанные с ними ContentTypes в теме theme. yml .
выбор шаблона:
шаблоны:
- название: 'Шаблон домашней страницы'
имя файла: 'index.twig'
- название: 'Страница с галереей'
имя файла: 'page_with_gallery.twig'
После этого вы сможете перейти в раздел Шаблон редактирования записи и изменить содержание к желанию вашего сердца. После сохранения получить доступ к этим данным очень просто. Просто пройди templatefields свойство записи.
{{record.templatefields.section_1}}
{# Это выведет все, что хранится в section_1 #}
Предупреждение: Данные, хранящиеся в этих полях, вокруг, пока этот шаблон выбран. Если вы меняете шаблоны с данными поля шаблона сохранены, вы потеряете эти данные, если поля шаблона нового шаблона отличаются от теперешнего. Bolt сделает все возможное, чтобы предупредить вас, когда это произойдет.
Создание шаблонов для Live Editor¶
Bolt поставляется со встроенной поддержкой редактирования записей, которые будут отображаться на вашем веб-сайте. Это требует небольшой настройки, но как только все будет готово, опыт будет выглядеть примерно так:
Совет: тема Bolt-2014 по умолчанию включена в живом редакторе. Если вы не знаете, как все это работает, взгляните на его исходный код в своем Болтовая установка.
В любой записи, имеющей соответствующую страницу (что означает без просмотра: ложь — по умолчанию для ContentType), вы можете сделать любое поле HTML , text или textarea редактируемый. Когда он доступен для редактирования, нажмите кнопку «Живое редактирование» во время редактирования этого Record откроет встроенный живой редактор. Любое редактируемое поле будет выделено желтым цветом. контур вокруг него. После внесения изменений редактор может нажать «закрыть редактор» вверху. правильно, и эти изменения будут распространяться на соответствующие поля в обычном редакторе.
Чтобы разрешить редактирование поля, Bolt должен знать, с каким полем его сопоставить. Это требует очень маленькое и легкое изменение кода вашей темы. Для работы живого редактора поле должно быть единственным содержимым элемента в . Затем вы просто добавляете data-bolt-field атрибут установлен на имя поля. Например, если у вас есть поле заголовка, настроенное в ваши шаблоны, как это:
{{ запись.название }}
Вот как вы можете настроить его для редактирования в реальном времени:
{{record.title}}
Просто!
Чтобы включить это для полей шаблона, вам нужно сделать ссылка с текстом templatefields за которым следует имя поля в квадрате скобки. Например:
{{record.templatefields.section_1 }}
Примечание: Чтобы отключить живой редактор для всего вашего Bolt установка , установите liveeditor: false в ваш config.
Например, если вам нужна специальная целевая страница или раздел вашего сайта с отдельным заголовком, CSS и т. д., вы можете создать этот шаблон и применить его к странице Mura в менеджере сайта. Ваши шаблоны могут быть даже на 100% HTML, если вы этого хотите (конечно, в этот момент ничего не будет динамическим).
cfm"> 
dspObjects(2)#
Делает это элегантно и быстро, а значит,
twig 
yml 
Таким образом, в этом случае изображение отображается в браузере только в том случае, если
В
yml 
Вы можете создать новый ContentType или использовать ресурс
yml 
Это требует