Здравствуйте! Это третий урок по движку HEEG.HTML и он будет полностью посвящен Tiddlywiki – платформе, на которой работает этот движок ( открываем tiddlywiki.com). Что же такое Тиддливики? Тиддливики по-русски это нелинейная записная книжка. Понятно что платформа нужна для ведения записей или статей (еще их называют заметки или тиддлеры), но что значит нелинейная? Нелинейная – значит, что в нашей записной книжке мы можем выводить статьи не просто по порядку записи. Мы можем группировать записи по меткам или каким-то признакам. Можем сортировать наши записи и наконец осуществлять по ним удобный поиск. По сути это всем нам знакомая база данных, которая встроена в нашу статичную html страничку. Данные из этой базы можно удалять или переносить в другую базу по определенному признаку или просто по дате добавления в базу. Каждая запись в нашей записной книжке должна иметь уникальное название или ключ ( нажимаем редактировать tiddlywiki.com). Для Тиддливики это title нашей записи. Во время редактирования статьи – это самое верхнее поле. Но почему я решил, что это поле называется именно title?
Давайте скачаем с сайта последнюю версию движка HEEG.HTML и начнем наши эксперименты. Создадим новый товар «верблюжий кактус» в магазине и посмотрим как он будет хранится в коде нашего магазина. Для этого посмотрим код страницы и найдем слово «кактус» (открываем код страницы в хроме)
Вот в таком виде запись о нашем товаре хранится в нашей записной книжке
<div created="20160723094351433" description="обязательно заполните это поле описания ТОВАРА для правильной индексации движка интернет магазина heeg.ru" image150x150="images/products/no_tmb.jpg" modified="20160723094432544" nazvanie="Верблюжий кактус" options="характеристика 1 <br> характеристика 2" stoimost="555" subtitle="<$image source=" images/products/no.jpg " />" tags="index $:/Note" title="1234567" v_m3="0.1" ves_kg="0">
<pre>Верблюжий кактус</pre>
</div>
Мы видим, что это обычный див с определенными свойствами. Свойства этого дива и есть наши поля. Обращаем внимание что тут есть поля которые не отображаются в нашей карточке товара в режиме редактирования – это поле created и modified иногда встречается поле «автор» если вы заполните его изначально в настройках вики. Обратим внимание на наше поле tags в нем метки нашего товара и наконец наше уникальное поле title это поле должно быть уникальным для каждой статьи и желательно чтобы оно состояло из английских букв и цифр. В этом случае мы всегда будем иметь красивый URL нашей страницы.
Теперь давайте посмотрим на содержимое нашего div это блок pre-pre в нем содержится основное содержимое нашей статьи. В тиддливики это поле будет называться text.
Еще обратим внимание, как преобразуются наши знаки больше и меньше. Когда они сохраняются в нашу базу они становятся < и > это так называемый utf-8 код наших символов. По нашей базе это все. Больше в код страницы мы лезть не будем, так как это удобнее делать из самой вики. Закрываем.
Вернемся на главную страницу нашего магазина. Когда люди впервые скачивают и открывают магазин, первое что они пытаются сделать это отредактировать страницу, на которой находятся. Они нажимают заветный карандашик и пытаются найти что-то знакомое для себя. Кто-то надеется увидеть кнопки как в Wix или на худой конец кнопки как в Word или photoshop. Но ничего похожего здесь нет. Только в последней версии появилась небольшая панелька для форматирования текста. Могу со 100% уверенностью утверждать, что Тиддливики не похожа ни на что, с чем вам приходилось сталкиваться раньше. Я постараюсь шаг за шагом показать путь, по которому шел сам, когда изучал ее. Для того, чтобы понять как она устроена, вам не нужно быть программистом, но если вы немножко разбираетесь в html и CSS стилях , вам это очень поможет в изучении.
Давайте посмотрим в режиме редактирования нашу первую страничку. Тут мы видим вполне себе обычный хтмл код перемешанный с вики разметкой. Вики-разметку легко отличить по повторяющимся фигурным или квадратным скобкам, восклицательным знакам итд. В начале мы видим небольшой код в фигурных скобках. Этот код отвечает за вывод четырех плиток товара на главной странице магазина. И точно такой же код встречается в других разделах, но товары выводятся другие. Как же работают эти фигурные скобки давайте разберемся. Во-первых Фигурные скобки позволяют нам вставлять в нашу текущую статью – другую статью, точнее ее поле text. Давайте напишем в фигурных скобках статью, которую бы хотели отобразить. Например статью {{contacts}}. Мы видим, что на главной странице появились наши контакты. А что если мы хотим отобразить не поле text, а другое например поле description из стати contacts то мы напишем название поля через два !! получается так {{contacts!!description}} и наше описание из контактов появилось. Если мы не будем указывать название статьи, откуда нужно взять поле и напишем {{!!description}} то он возьмет это поле из ТЕКУЩЕЙ статьи. Вот поэтому один и тот же код в разных статьях может выводить разный результат, потому что он ссылается на содержимое ТЕКУЩЕЙ статьи, а оно везде разное. Но в наших фигурных скобках вместо восклицательных знаков две вертикальных черты. Такая запись означает, что текущую статью нужно вывести по шаблону и после двух вертикальных указывается название статьи с шаблоном. Давайте найдем этот шаблон и перенесем его содержимое на нашу главную страницу. Заходим в поиск. Находим и копируем его содержимое к себе на страничку. Удивительно, но этот код вывел нам те же самые плики товаров. Почему бы нам тогда не удалить две черты и просто не сослаться на этот шаблон. Давайте попробуем – ничего не вышло. Плитки исчезли. Почему так, что дают эти две черты? Две черты показывают вики какую статью считать текущей. Для шаблона текущей считается та статья, в которой он выводится, а если указать название шаблона без черт, то он будет пытаться считать свои собственные поля, которых у него не оказалось. С фигурными скобками немного разобрались. Теперь давайте посмотрим на содержимое нашего шаблона.
Мы видим что окрываются два дива внутри которых идет необычная запись <$list filter="[ это виджет фильтров тиддливики. Этот фильтр пожалуй самый мощный инструмент вики. Именно он помогает фильтровать нужные нам статьи по их парамметрам. Подробный хелп оп ним есть на сайте tiddlywiki.com а мы попробуем понять как этот фильтр выведет наши 4 товара. [is[current]tagging[]tag[$:/Note]!tag[$:/hide]!list[$:/temp/_HideStoryList!!list]sort[stoimost]]
is[current]tagging[] –означает что нужно вывести список статей, которые имеют метку совпадающую с названием (title) текущей статьиtag[$:/Note] говорит, что эти статьи должны иметь еще при этом метку $:/Note !tag[$:/hide] не имеют метку $:/hide (в фильтре восклицательный знак означает НЕ)!list[$:/temp/_HideStoryList!!list] слово list с воск знаком позволяет нам просто перечислить статьи, которые мы не хотим видеть. В нашем случае этот список находится в статье *$:/temp/_HideStoryList в ее поле list , поэтому мы и укажем этот путь. Внутри этого фильтра мы опять видим ссылку на шаблон уже отображения одной плитки товара.
Фильтр будет подставлять значения в этот шаблон и выводить их на экран. Давайте попробуем просто вывести список этих товаров. Вырежем фильтр и вставим его отдельно и закроем слешем. Как мы видем без указания шаблона фильтр вывел нам ссылки на эти 4 товара. Давайте разбираться дальше и подсмотрим как выглядит шаблон нашей одной плитки. Откроем его $:/_tile кода тут побольше, но разобраться можно. Видно, что плитка выводит уголок hot new sale если в товаре есть такая метка. Потом идет сама плитка. Она состоит из кнопки с картинкой, которую нужно взять из поля image150x150 виджет <$action-navigate $to= <<currentTiddler>> /> внутри кнопки говорит нам о том, что при клике на эту кнопку откроется сам товар. Далее просто выводятся значения полей название, стоимости, валюты кстати значок валюты хранится в отдельной статье, поэтому мы можем довольно быстро поменять валюту во всем магазине. Затем поле с количество и собственно сама кнопка «в корзину».
Довольно просто да? Именно так мы и используем нелинейные свойства нашей записной книжки.
С фигурными скобками, фильтрами и шаблонами разобрались. Теперь разберемся с макросами. С одним самым простым мы уже встречались. Это макрос <<currentTiddler>> вся его гениальность сводится к тому, чтобы показать title текущего тиддлера. Вставим его на нашу страницу. Все макросы открываются двумя значками меньше и закрываются двумя больше. Макросы можно использовать везде – в статьях, других максосах, в статьях с СSS стилями нашего магазина, чтобы например вставить в разных блоках один и тот же цвет и привязать его к палитре.
В разделах вы можете увидеть tabs макрос. Он выводит указанные в нем статьи в виде симпатичных табов. На основе этих табов сделаны сортировки и отображение списка товаров в разделе. Перейдем в раздел «фигуры» и нажмем редактировать. Внизу мы видим наш макрос, который выводит в виде табов тиддлер "Значки Список [[Товар с описанием]]" тиддлер «товар с описанием» написан в двойных квадратных скобках так как в его названии есть пробелы. Следующий параметр в кавычках «значки» говорит нам о том, что по умолчанию нужно показывать таб «значки». Помимо явного указания тиддлеров для отображения, мы можем собирать их по метке. Давайте найдем наш тиддлер «значки» и посмотрим его код. Как видим тут такой же tabs макрос, но он отображает все тиддлеры у которых есть метка $:/_aa/sort/plitka и по умолчанию открывает статью $:/_aa/sort/nazvanieup можем открыть эту статью и убедиться, что такая метка там есть. Мы увидим уже знакомый нам кодик плиток, только с сортировкой sort по названию. Кстати эту статью мы тоже можем использовать в качестве шаблона.
По всем стандартным макросам есть неплохой хелп нa tiddlywiki.com откроем его и найдем хелп по нашему tabs макросу. В примерах мы увидим, что мы можем делать еще вертикальные табы. Давайте попробуем переделать наши табы в вертикальные. При этом не забудем указать параметр «state» в котором указывается тиддлер, который хранит наше текущее состояние таба. Как видим наши табы стали вертикальными. Теперь давайте подумаем как можно изменить порядок вывода наших табов. Первый самый очевидный вариант – это просто в нашем фильтре добавить значение sort и указать по какому полю отсортировать (без sort фильтр выводит свои значение по полю title). Второй мене очевидный, но используемый на много чаще в tw5 это ЯВНОЕ указание порядка вывода значений в фильтре. Для этого нам нужно создать специальный тиддлер название которого совпадает с меткой, которую мы используем в нашем фильтре и в поле list через пробел указать порядок наших табов. Такой тиддлер у нас есть давайте его найдем… Помимо стандартных макросов, мы можем писать собственные и использовать в нашем магазине. Например, в разделе «фигуры» использован макрос filpar. Этот макрос я написал сам, чтобы можно было делать выборки по параметрам товара. С этим макросом я предлагаю вам разобраться самостоятельно. А хелп по написанию таких макросов почитать на тиддливики.
Теперь давайте перейдем в любой товар и посмотрим как там используется шаблон для отображения карточки товара. Как мы видим тут нет ни фигурных скобок, ни tabs для отображения товаров. Как же здесь вставлен наш код с картинкой. Здесь мы используем несколько другой механизм вставки по шаблону. Дело в том, что все наши статьи на самом деле отображаются по стандартному шаблону, который собирается по метке. Этот шаблон нам по порядку выводит заголовок и текстовое поле. В базовой версии TW5 шаблон еще выводит дату изменения статьи и метки в оранжевых овальчиках, но в HEEG.HTML они удалены за ненадобностью.
Чтобы добавить какой-нибудь кусок текста сразу во все статьи нам достаточно создать новый тиддлер и присвоить ему метку $:/tags/ViewTemplate например по такому принципу добавлен блок «смотреть открытые товары» внизу страницы. Давайте найдем его и посмотрим. Эток кусок состоит из фильтра, который отображает нам все открытые статьи с меткой $:/Note то есть товара и ссылки на статью «Открытые товары». Давайте потренируемся и добавим во все статьи фразу «привет вики!» добавим нашу метку $:/tags/ViewTemplate в новую статью с названием "hi" и мы увидим, что наша фраза появилась в конце всех страниц. Как ее перенести в начало? Так же как и в tabs макросе мы найдем тиддлер с названием $:/tags/ViewTemplate и укажем нашу статью hi в начале поля list. Как видим наша фраза появилась выше поля title. Но есть ли способ добавить кусок текста или вставку по шаблону только в статьи с определенной меткой? Например только в товары добавить изображение товара цену и кнопку купить. Конечно можно, если мы будем использовать фильтры. Давайте найдем этот фильтр в блоке, который выводит плитку в карточке товара. Эта статья называется $:/_tovar_plitka как мы видим в начале нее расположен наш фильтр, который разрешает ее отображать только в товарах. Потом в трех колонках выводится картинка с кнопкой, которое показывает наше всплывающее модальное окно, потом столбик с характеристиками, в третьем столбике наш шаблон с товаром и наконец под всей табличкой крупное название нашего товара на сером фоне. Давайте по аналогии сделаем так, чтобы наша фраза отображалась только в товарах. Добавим в статью hi наш фильтр.
Забегая вперед хочу сказать, что по меткам можно не только добавлять текст или куски кода, но и менять стиль отображения статьи в зависимости от ее метки. Давайте посмотрим стили, которые автоматически присваиваются нашей статье. Мы видим, что помимо обычных стилей есть стили которые начинаются с tc-tagged- а заканчиваются нашей меткой. Применяя это свойство, мы можем изменить стиль только статей имеющий метку товара, sale или любую другую метку. Но изменением дизайна нашего магазина мы займемся только в следующем уроке.
А пока давайте еще раз посмотрим на наш магазин. Мы разобрались с товарами и разделами, но у нас еще есть верхнее и левое меню, симпатичный слайдер и еще наша замечательная корзина. Где все это у нас находится. Скажу сразу, что редактировать меню и слайдер можно начинать в статье $:/_header а корзину в статье $:/_Cart а на страницу они добавляются тем же способом, что и куски наших статей, только метка будет $:/tags/TopLeftBar
Давайте откроем $:/_header . Вверху мы видим как добавляется наш слайдер. Фильтр берет его из текущей стати из поля top_slider . То есть становится очевидным что мы можем добавить слайдер из любых картинок в любую статью, достаточно указать его в поле top_slider этой статьи. Что удобно. Далее мы видим наше левое меню с логотипом и флажком корзины. Наше верхнее меню, так же как и левое создается при помощи прекрасного макроса toc. Описание этого макроса вы сможете найти на сайте тиддливики. Этот макрос собирает нам древовидное меню в зависимости от меток статей. При этом достаточно указать только верхний раздел, с которого нужно начать строить дерево меню. Мы можем указать четкую последовательность пунктов меню в поле List этого верхнего раздела. Для верхнего меню «верхним разделом» будет являться статья с названием «Верхнее меню», а для левого меню статья index или по русски «каталог» .
Ниже мы видим как выводится наше левое меню с блоком рекламы и блоком выбора по параметрам.
Теперь давайте посмотрим как выглядит наша корзина. Откроем $:/_Cart в ней довольно много кода, но главное на что нам стоит обратить внимание это виджеты <$edit-text <$select и <$checkbox не трудно догадаться, что первый нам даст поле ввода информации, второй выпадающий список, а третий окошко с галочкой для выбора. Есть еще виджет для радиокнопки <$radio для выбора параметра в виде точечки. Все эти виджеты похожи друг на друга и хранят свои параметры в отдельных статьях, ссылаясь на которые мы можем использовать эти значения.
По этим виджетам есть подробный хелп на сайте тиддливики и я предлагаю разобраться в них вам самостоятельно. Вот и все. Надеюсь этот урок был вам полезен. Пока.