Создание шаблонов

Самый простой способ сделать шаблоны - клонировать этот сайт с уже готовыми шаблонами на Webflow и поменять в нем дизайн на нужный Вам.
Или можете увидеть реальные шаблоны для этого сайта на Webflow : пожалуйста.

Если Вы все-таки хотите создать своё, то надо думать и учить матчасть :) 


Итак,
Шаблон для записи - это элемент HTML разметки div, у которого имя css-класса оканчивается одинаковой строкой (по-умолчанию "Entry"), т.е. шаблонов может быть много, но всем им в конце необходимо давать имя, с учетом этого.

Пример : "newsEntry", "cartEntry", "titleEntry" и т.д. Таким образом у нас и появляется "шаблон". Окончание "Entry" может быть заменено на произвольную строку! Т.е. вы можете задать собственное окончание у шаблонов, оно просто должно быть одинаковым. Это можно в настройках CMS указать - пункт : 'Окончания у шаблонов'.

 

Далее, необходимо в шаблоне указать, какое содержимое из записи БД будет в нем присутвовать. Это может быть заголовок, текст, картинка, значений может быть десятки, даже те, которые Вы придумаете сами. Миксовать содержимое можно в различной последовательности и каждая уникальная последовательность - это и есть шаблон, которому просто надо дать имя.

 

Для замены содержимого используется 2 метода : 

- простая вставка переменных, обозначенных %таким% способом (например % heading %) :

<h2 class="h3">% heading %</h2>
//пробелов между % heading % не надо делать
//если бы я не сделал бы их, здесь была бы надпись "Создание шаблонов",
//взятая из заголовка этой статьи :)

- или использование атрибута content-replace у DOM разметки :

<h2 class="h3">
//Пример по замене заголовка
Здесь появится содержимое поля БД heading
</h2>

 

Для этого метода все параметры задаются в Webflow через визуальный редактор - это делается во вкладке элемента Element Settings( шестеренка). Ниже есть группа в этой вкладке, называется custom attributes. Вот туда и надо вводить управляющие значения для работы CMS.

 

Пример по замене текста в теге div :

<div>
//Здесь появится содержимое поля БД story
</div>

Пример по замене картинок не позволяет использовать %такой% метод :

<div class="newsimgcont">
//content-collapse="noimg" - убирает содержимое, если нет картинок
<img src="" alt="" class="newsimg">
//используем значение "prev" как шаблон для вставки превьюшек картинок из базы
//если надо большие картинки вставлять:
<img src="" alt="" class="newsimg">
//используем значение "img" как шаблон для вставки больших картинок из базы
//картинок может быть столько, сколько свяжете с записью БД - до 99 шт.
</div>

Пример готового шаблона в коде полностью

<div class="newsentry">
<div class="newsimgcont">
<img src="" data-action="zoom" alt="" class="newsimg">
//здесь будут размещены все первьюшки картинок записи БД по образцу с первой
</div>
<div class="newstextblock">
<h3 class="h3">Заголовок</h3>
<div class="entrystory">Текст</div>
</div>
</div>