Документация KVS

Туториал по управлению сайтом

Содержание

1. Введение

Создание сайта на движке KVS кажется сложным на первый взгляд, но на самом деле эта задача достаточно проста после нескольких попыток. Мы предлагаем пройти небольшой туториал, который тем не менее покрывает практически все аспекты создания страниц и настройки контента на них.

Рассмотрим задачу отображения моделей на сайте. Мы бы хотели видеть список моделей с возможностью алфавитной фильтрации, страницу информации о модели и списком видео с участием этой модели, а также на странице просмотра видео отобразить список моделей, которые снимаются в данном видео.

Итак, что нужно сделать:

  • Создать новую страницу для отображения списка моделей.
  • Создать новую страницу для отображения информации о модели и списком видео с участием этой модели.
  • Добавить вывод списка моделей текущего видео на странице просмотра видео.
  • И, дополнительно, вывести на главной странице сайта 5 моделей с наибольшим количеством видео.

Перед выполнением туториала создайте несколько моделей и привяжите их к нескольким видео (привязка видео к моделям делается на странице редактирования видео в панели администрирования).

Мы не будем финально настраивать страницы со всеми деталями, такими как CSS-стили, вспомогательные ссылки и прочее. Основная цель данного туториала - познакомить с основами создания сайта на движке Kernel Video Sharing, доработка мелочей и деталей остается на ваше усмотрение.

2. Страница для отображения списка моделей

2.1. Создание страницы списка моделей

В разделе UI сайта (Website UI) панели администрирования зайдите на подраздел Добавить страницу (Add page). Вы увидите форму для создания новой страницы сайта.

Важно: для создания страницы в панели администрирования PHP должен иметь права на создание файлов в некоторых папках. В частности, это корневая папка домена, в которой появится PHP файл страницы. Если прав не хватает, то при сохранении страницы вы увидите ошибку с информацией на какую папку необходимо установить права.

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

  • Название (Display name) - название страницы для вашего удобства, которое отображается только в панели администрирования. Введите Models List.
  • Идентификатор (External ID) - системное поле, которое уникально идентифицирует страницу и на основе которого генерируются имена файлов и папок, относящихся к данной странице. Введите models_list. Тогда страница будет доступна по ссылке http://your_domain.com/models_list.php.
  • Код шаблона (Template code) - здесь в виде шаблона Smarty (или просто HTML кода) содержится отображение данных страницы. Заполните данное поле одним словом Test.

Если при сохранении вы не получили никаких ошибок, то страница создалась и стала доступна на сайте. В адресной строке браузера введите http://your_domain.com/models_list.php и убедитесь, что видите слово Test, которое вы ввели в шаблоне страницы.

В большинстве случаев вы захотите, чтобы страница была доступна по другой ссылке (например, http://your_domain.com/models/), что более удобно для поисковых систем. Для того, чтобы это сделать, необходимо создать правило в корневом .htaccess файле, которое будет перенаправлять запросы на скрипт models_list.php:

RewriteRule ^models/(.*)$ /models_list.php [L,QSA]

После этого по ссылке http://your_domain.com/models/ вы будете видеть эту же страницу.

2.2. Настройка страницы списка моделей

Теперь настроим содержимое страницы списка моделей. Для этого на Списке страниц (Pages list) в разделе UI сайта (Website UI) найдем созданную страницу с названием Models List и откроем ее на редактирование. Нам необходимо задать компоновку страницы, а также вставить блок вывода списка моделей (list_models) и настроить его поведение.

Cтраница Models List на списке страниц
Cтраница Models List на списке страниц.

За компоновку страницы обычно отвечают такие компоненты как шапка и нижняя часть. Эти компоненты имеют общий вид на всех страницах сайта и, поэтому, вынесены в отдельные шаблоны (компоненты страниц). Вывод шапки осуществляется компонентом header_general.tpl, за вывод нижней части отвечает компонент footer_general.tpl. Компонент шапки поддерживает возможность указать HTML название страницы, ее описание и ключевые слова перед включением этого компонента в шаблон страницы. С учетом этого, код шаблона страницы списка моделей может выглядеть таким образом:

{{* Устанавливаем значение переменных page_title, page_description и page_keywords которые используются в компоненте страницы header_general *}}
{{assign var=page_title value="Models"}}
{{assign var=page_description value="Displays all models you can see at MySite.com"}}
{{assign var=page_keywords value="models, blablabla, blablabla"}}

{{* Включаем компонент страницы header_general, который отображает шапку страницы с учетом значений, указанных выше *}}
{{include file="header_general.tpl"}}

<div id="data">
    <div id="wide_col">
        Wide column data
    </div>
    <div id="side_col">
        Side column data
    </div>
    <div class="g_clear"></div>
</div>

{{* Включаем компонент страницы footer_general, который отображает нижнюю часть страницы *}}
{{include file="footer_general.tpl"}}

После сохранения данного шаблона (для сохранения можно использовать кнопку Обновить содержимое (Update content)) откройте страницу http://your_domain.com/models/. На странице появилась основная верстка сайта с пустыми центральной и боковой областями.

Cтраница Models List на сайте
Cтраница Models List на сайте.

Обратите внимание на то, что в HTML коде шапки вывелась информация, которую мы ввели в шаблоне страницы:

<title>Models / Kernel Tube</title>
<meta name="description" content="Displays all models you can see at MySite.com"/>
<meta name="keywords" content="models, blablabla, blablabla"/>

Теперь осталось подключить только блок списка моделей и страница готова! Для этого в нужном месте шаблона, где вы хотите вывести список моделей, необходимо всего лишь вставить одну строчку (выделена жирным):

{{* Устанавливаем значение переменных page_title, page_description и page_keywords которые используются в компоненте страницы header_general *}}
{{assign var=page_title value="Models"}}
{{assign var=page_description value="Displays all models you can see at MySite.com"}}
{{assign var=page_keywords value="models, blablabla, blablabla"}}

{{* Включаем компонент страницы header_general, который отображает шапку страницы с учетом значений, указанных выше *}}
{{include file="header_general.tpl"}}

<div id="data">
    <div id="wide_col">
        {{* Включаем блок list_models для отображения списка моделей *}}
        {{insert name="getBlock" block_id="list_models" block_name="List Models"}}
    </div>
    <div id="side_col">
        Side column data
    </div>
    <div class="g_clear"></div>
</div>

{{* Включаем компонент страницы footer_general, который отображает нижнюю часть страницы *}}
{{include file="footer_general.tpl"}}

После сохранения шаблона обратите внимание на то, что под полем редактирования шаблона в разделе Содержимое страницы и стратегия кэширования (Page content and caching strategy) появилась информация о блоке List Models с некоторыми параметрами конфигурации, заданными по умолчанию. При добавлении нового блока на страницу, блок всегда создается с шаблоном и параметрами конфигурации по умолчанию, но вы в любой момент можете перенастроить и шаблон, и параметры конфигурации.

List Models блок в содержимом страницы
List Models блок в содержимом страницы.

Откройте страницу http://your_domain.com/models/. Если у вас были созданы какие-либо модели, то их полный список должен появиться на данной странице.

Cтраница Models List на сайте
Cтраница Models List на сайте.

Теперь можно настроить верстку и стили отображения самого списка моделей на данной странице. Для того, чтобы поменять шаблон и параметры блока List Models на созданной странице (как уже было описано выше, при создании блока все настраивается по умолчанию), вам необходимо открыть страницу редактирования данного блока. Попасть на страницу редактирования блока можно из 2 мест в панели администрирования: кликнуть на ссылку с названием блока на Списке страниц (Pages list) в разделе UI сайта (Website UI), либо использовать аналогичную ссылку на странице редактирования нужной страницы сайта.

Сслыка на страницу редактирования блока на общем списке страниц
Сслыка на страницу редактирования блока на общем списке страниц.

Сслыка на страницу редактирования блока на странице редактирования нужной страницы
Сслыка на страницу редактирования блока на странице редактирования нужной страницы.

Попав на страницу редактирования блока вы сразу увидите шаблон блока, который отображает список моделей на текущей странице. Внизу вы найдете список всех параметров конфигурации, которые поддерживаются блоком и влияют на его работу на текущей странице. Используя данные параметры, вы можете настроить разбиение списка моделей на страницы с указанием кол-ва моделей, отображаемое на каждой странице, вы можете убрать из списка моделей, которые не имеют каких-либо скриншотов, либо не снимаются ни в каких видео. Для каждого параметра блока присутствует короткое описание, для чего он предназначен.

Поскольку нам необходимо организовать возможность выводить моделей по букве алфавита, включим параметр блока var_title_section, который указывает блоку, в каком HTTP параметре придет значение буквы алфавита для вывода (по умолчанию это section, его и оставим).

После сохранения сохранения данных блока откройте страницу http://your_domain.com/models_list.php?section=a. Если у вас есть модели на букву A, то на сайте отобразятся только они. Добавим правило редиректа в корневой .htaccess файл для создания более приятных ссылок (обратите внимание, что новое правило должно идти перед предыдущим правилом для всего списка):

RewriteRule ^models/([a-zA-Z])/(.*)$ /models_list.php?section=$1 [L,QSA]
RewriteRule ^models/(.*)$ /models_list.php [L,QSA]

Теперь список моделей по букве A будет доступен и по ссылке http://your_domain.com/models/a/.

2.3. Настройка пагинации (разбиения по страницам)

Если количество моделей у вас на сайте достаточно большое и нет смысла показывать всех моделей на одной странице, вам необходимо настроить пагинацию для блока List Models. Пагинация работает по одинаковому принципу для всех блоков списков. Каждый блок списка поддерживает 3 параметра конфигурации, которые нужно включить:

  • items_per_page - количество элементов на каждой странице (поставьте для примера такое значение, чтобы у вас было хотя бы 3 страницы с моделями, например 4).
  • links_per_page - максимальное количество ссылок на страницы, которое отображается одновременно (включите и оставьте по умолчанию, т.е. 10).
  • var_from - указывает блоку, в каком HTTP параметре придет номер элемента, с которого нужно показывать список (включите и оставьте по умолчанию, т.е. from).

После того, как вы сохраните данные блока, на странице списка моделей останется только 4 модели, но ссылки на остальные страницы не появятся. Дело в том, что блоки списков не содержат отображение ссылок пагинации по умолчанию. Для того, чтобы они появились, вам нужно добавить в шаблон блока List Models включение общего шаблона для ссылок пагинации в нужном месте (в шаблон блока, а не страницы!):

{{include file="pagination_block_common.tpl"}}

Поскольку пагинация работает в se-friendly режиме, вам также необходимо добавить дополнительные правила в корневой .htaccess файл, чтобы ссылки на страницы работали корректно как для общего списка моделей, так и для списков моделей по буквам алфавита (обратите внимание на порядок правил!):

RewriteRule ^models/([a-zA-Z])/([0-9]+)/$ /models_list.php?section=$1&from=$2 [L,QSA]
RewriteRule ^models/([a-zA-Z])/(.*)$ /models_list.php?section=$1 [L,QSA]
RewriteRule ^models/([0-9]+)/$ /models_list.php?from=$1 [L,QSA]
RewriteRule ^models/(.*)$ /models_list.php [L,QSA]

Теперь пагинация полностью настроена и работает!

Cтраница Models List на сайте с пагинацией
Cтраница Models List на сайте с пагинацией.

3. Страница для отображения информации о модели

3.1. Создание страницы с блоком информации о модели

Действуя по аналогии с предыдущей главой, создадим новую страницу с названием View Model и идентификатором view_model. Для начала установим такой код шаблона:

{{* Устанавливаем значение переменных page_title, page_description и page_keywords которые используются в компоненте страницы header_general *}}
{{assign var=page_title value="Model Display Page"}}
{{assign var=page_description value="Displays model data at MySite.com"}}
{{assign var=page_keywords value="models, blablabla, blablabla"}}

{{* Включаем компонент страницы header_general, который отображает шапку страницы с учетом значений, указанных выше *}}
{{include file="header_general.tpl"}}

<div id="data">
    <div id="wide_col">
        {{* Включаем блок model_view для отображения данных о модели *}}
        {{insert name="getBlock" block_id="model_view" block_name="Model View"}}
    </div>
    <div id="side_col">
        Side column data
    </div>
    <div class="g_clear"></div>
</div>

{{* Включаем компонент страницы footer_general, который отображает нижнюю часть страницы *}}
{{include file="footer_general.tpl"}}

После сохранения страницы попробуем открыть ее на сайте (http://your_domain.com/view_model.php). Мы видим информацию о битой ссылке, которую выводит блок model_view. Проблема заключается в том, что блоку model_view необходимо знать, данные какой модели нужно отображать. Для этого в блоке существует 2 var-параметра, которые позволяют передать блоку либо ID модели, либо директорию (для se-friendly ссылок). По умолчанию в блоке включается параметр var_model_dir = dir, который ожидает, что в HTTP параметре dir будет передана директория модели. Для того, чтобы это организовать, добавим еще одно правило в корневой .htaccess файл (обратите внимание на порядок правил!):

RewriteRule ^models/([a-zA-Z])/([0-9]+)/$ /models_list.php?section=$1&from=$2 [L,QSA]
RewriteRule ^models/([a-zA-Z])/(.*)$ /models_list.php?section=$1 [L,QSA]
RewriteRule ^models/([0-9]+)/$ /models_list.php?from=$1 [L,QSA]
RewriteRule ^models/(.*)/$ /view_model.php?dir=$1 [L,QSA]
RewriteRule ^models/(.*)$ /models_list.php [L,QSA]

После этого по ссылкам вида http://your_domain.com/models/angelina-jolie/ будет открываться страница с информацией о модели. Часть ссылки angelina-jolie - это директория модели, которая предназначена для se-friendly ссылок. Директория генерируется на основе названия и присутствует практически у всех объектов: видео, фотоальбомы, категории, тэги, модели, контент провайдеры и др. Если блок списка моделей, который был создан в предыдущей главе, генерирует ссылки с идентификаторами моделей вместо директорий, то вам необходимо изменить шаблон, чтобы в ссылку вместо ID модели (model_id) подставлялась директория (dir).

Обратите внимание на то, что в HTML названии и описании страницы выводятся одинаковые данные для всех моделей (а именно те, которые указаны в шаблоне для переменных page_title и page_description). Для того, чтобы вывести в шапке сайта имя модели и ее описание, нам необходимо вставить блок информации о модели до включения компонента шапки, поскольку блок информации о модели (model_view) делает выборку из базы данных, и только после этого на странице будут доступны данные о модели. Данные любого блока в шаблоне страницы могут быть получены из хранилища блока, которое называется storage и то только после того места, как блок вставлен в страницу. Для доступа к хранилищу блока используется уникальный ключ, который выводится в панели администрирования в списке блоков, используемых на странице:

Ключ к storage блока на странице
Ключ к storage блока на странице.

Перепишем шаблон страницы. Вынесем вставку блока информации о модели в начало шаблона и присвоим HTML названию и описанию данные из хранилища этого блока:

{{* Включаем блок model_view для отображения данных о модели *}}
{{* Обратите внимание на новый параметр assign, при его использовании результат работы блока помещается в переменную, а не выводится в этом месте страницы *}}
{{insert name="getBlock" block_id="model_view" block_name="Model View" assign="model_view_result"}}

{{* Устанавливаем значение переменных page_title, page_description и page_keywords которые используются в компоненте страницы header_general, берем нужные данные из хранилища блока *}}
{{assign var=page_title value="`$storage.model_view_model_view.title`"}}
{{assign var=page_description value="`$storage.model_view_model_view.description`"}}
{{assign var=page_keywords value="models, blablabla, blablabla"}}

{{* Включаем компонент страницы header_general, который отображает шапку страницы с учетом значений, указанных выше *}}
{{include file="header_general.tpl"}}

<div id="data">
    <div id="wide_col">
        {{* Выводим результат работы блока model_view, который был помещен в переменную model_view_result *}}
        {{$model_view_result|smarty:nodefaults}}
    </div>
    <div id="side_col">
        Side column data
    </div>
    <div class="g_clear"></div>
</div>

{{* Включаем компонент страницы footer_general, который отображает нижнюю часть страницы *}}
{{include file="footer_general.tpl"}}

После сохранения можно обновить страницу на сайте и увидеть, что дизайн страницы не изменился, все осталось на своих местах, однако в HTML названии и описании сайта теперь выводятся данные модели. Таким образом, вынос блока в начала шаблона с параметром assign может использоваться в тех случаях, если вам нужно далее на странице использовать данные блока через его хранилище. Использование косых ковычек (`) при присвоении HTML названия и описания в данном случае требуется движком Smarty.

3.2. Добавление списка видео на страницу с блоком информации о модели

Добавим теперь на эту же страницу список видео, в котором участвует модель. Список видео выводится блоком list_videos, его и добавим в шаблон страницы сразу после вывода результата блока информации о модели:

{{* Включаем блок model_view для отображения данных о модели *}}
{{insert name="getBlock" block_id="model_view" block_name="Model View" assign="model_view_result"}}

{{* Устанавливаем значение переменных page_title, page_description и page_keywords которые используются в компоненте страницы header_general, берем нужные данные из хранилища блока *}}
{{assign var=page_title value="`$storage.model_view_model_view.title`"}}
{{assign var=page_description value="`$storage.model_view_model_view.description`"}}
{{assign var=page_keywords value="models, blablabla, blablabla"}}

{{* Включаем компонент страницы header_general, который отображает шапку страницы с учетом значений, указанных выше *}}
{{include file="header_general.tpl"}}

<div id="data">
    <div id="wide_col">
        {{* Выводим результат работы блока model_view, который был помещен в переменную model_view_result *}}
        {{$model_view_result|smarty:nodefaults}}
        {{* Подключаем блок list_videos для отображения списка видео по модели *}}
        {{insert name="getBlock" block_id="list_videos" block_name="Model Videos"}}
    </div>
    <div id="side_col">
        Side column data
    </div>
    <div class="g_clear"></div>
</div>

{{* Включаем компонент страницы footer_general, который отображает нижнюю часть страницы *}}
{{include file="footer_general.tpl"}}

После сохранения на сайте появится список видео под блоком данных о модели. По умолчанию в нем будут отображаться все видео, поэтому для того, чтобы блок списка показывал только видео по нужной модели, в блоке необходимо включить фильтрацию по модели. Сделать это можно при помощи одного из двух параметров блока list_videos:

Включение фильтрации по модели в блоке list_videos
Включение фильтрации по модели в блоке list_videos.

Поскольку на страницу уже передается директория модели (в HTTP параметре dir для блока model_view), было бы разумным использовать значение этой директории и в блоке list_videos. Для этого просто включим параметр блока var_model_dir и установим его значение в dir. Таким образом, оба блока на данной странице будут работать базируясь на значении директории модели, переданной в HTTP параметре dir. Обновив страницу на сайте можно увидеть, что список видео показывает только видео, в котором участвует данная модель.

Есть еще один небольшой нюанс, который касается блоков списка, часто используемых на сайте (например, list_videos). Поскольку дизайн блока как правило одинаковый для всех страниц сайта, вся верстка блока была вынесена в 2 компонента страниц: list_videos_block_common для обычных списков видео и list_videos_block_internal для списков видео внутри мемберки сайта (мои любимые и мои загруженные видео). Во время вставки нового блока list_videos где-нибудь на сайте, в качестве его шаблона берется шаблон по умолчанию, который не использует указанные выше компоненты страниц. Поэтому в большинстве случаев, если вам нужно чтобы новый блок отображался точно также, как и остальные блоки list_videos на сайте, необходимо вместо его шаблона по умолчанию вставить включение компонента list_videos_block_common или list_videos_block_internal:

{{* Устанавливаем значение переменной list_videos_title, которая выводится компонентом list_videos_block_common *}}
{{assign var="list_videos_title" value="Model videos"}}

{{* Включаем компонент list_videos_block_common, который отображает список видео *}}
{{include file="list_videos_block_common.tpl"}}

Вообще говоря, вы не обязаны использовать компоненты страниц в подобных случаях, т.е. ничего страшного не случится, если вы отредактируете дизайн и верстку блока в самом шаблоне блока. С другой стороны, если вы захотите в какой-то момент глобально изменить верстку всех списков видео на сайте, вам придется менять это во всех блоках list_videos на сайте, где не используется общий компонент страниц. При использовании общего компонента вам достаточно будет изменить лишь шаблон этого компонента, и изменения отразятся на всех блоках, которые используют его.

Если это вас совершенно запутало, смотрите каким образом задаются шаблоны блоков в уже существующих страницах сайта и старайтесь сделать по аналогии.

4. Другие страницы

4.1. Добавление списка моделей на страницу просмотра видео

Для добавления списка моделей на страницу просмотра видео нам необходимо отредактировать шаблон блока video_view, который находится на этой странице и отображает всю информацию о видео:

Блок информации о видео на списке страниц в панели администрирования
Блок информации о видео на списке страниц в панели администрирования.

Шаблон блока уже содержит циклы вывода категорий и тэгов видео, добавим аналогичный цикл для моделей (выделен жирным шрифтом):

<div class="info_row">
    Categories:
    {{foreach name=data item=item from=$data.categories}}
        <a href="/categories/{{$item.dir}}/" title="{{$item.title}}">{{$item.title}}</a>{{if !$smarty.foreach.data.last}}, {{/if}}
    {{/foreach}}
</div>
{{if @count($data.models)>0}}
    <div class="info_row">
        Models:
        {{foreach name=data item=item from=$data.models}}
            <a href="/models/{{$item.dir}}/">{{$item.title}}</a>{{if !$smarty.foreach.data.last}}, {{/if}}
        {{/foreach}}
    </div>
{{/if}}

В данном случае условие {{if @count($data.models)>0}} используется для того, чтобы не выводить пустую надпись Models, если у видео нет привязанных моделей. Теперь блок просмотра видео выглядит таким образом:

Блок информации о видео со списком моделей
Блок информации о видео со списком моделей.

4.2. Добавление списка моделей на главную страницу сайта

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

Главная страница сайта на списке страниц в панели администрирования
Главная страница сайта на списке страниц в панели администрирования.

Добавим вставку блока list_models в том месте, где мы хотим его видеть на странице:

{{assign var=page_title value="Demo Tube Website"}}
{{include file="header_general.tpl"}}

<div id="data">
    <div id="wide_col">
        {{insert name="getBlock" block_id="list_videos" block_name="Videos Watched Right Now"}}
        {{insert name="getBlock" block_id="list_videos" block_name="Most Recent Videos"}}
        {{insert name="getBlock" block_id="pagination" block_name="Most Recent Videos Pagination"}}
    </div>
    <div id="side_col">
        {{include file="search_videos_block.tpl"}}
        {{insert name="getBlock" block_id="list_models" block_name="Top 5 Models"}}
        {{insert name="getBlock" block_id="tags_cloud" block_name="Tags"}}
        {{include file="side_advertising.tpl"}}
    </div>
    <div class="g_clear"></div>
</div>

{{include file="footer_general.tpl"}}

Сохраним изменения шаблона страницы. После этого в списке блоков страницы появится новый блок Top 5 Models. Откроем его и настроим 2 параметра:

  • items_per_page - установим значение 5. Это заставит блок выбрать только 5 элементов из базы данных.
  • sort_by - в списке возможных сортировок выберем значение Кол-во видео desc.

После сохранения изменений блока посмотрим на главную страницу сайта. Там появилось то, что мы и хотели получить:

Список из 5 моделей на главной странице сайта
Список из 5 моделей на главной странице сайта.