Работа с примерами Wix Velo

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

Работа с примерами Wix Velo

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


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


Открытие примера сайта в вашем редакторе wix


Каждый образец сайта является опубликованной версией сайта. Чтобы открыть сайт в редакторе, нажмите кнопку «Открыть в редакторе».

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

Включение режима разработчика в Wix


Следующее, что вам нужно сделать, это включить режим Velo для разработчика. Это дает вам доступ ко всем функциям Velo. Нажмите «Разработчику» на панели инструментов вашего сайта и нажмите кнопку «Активировать» в раскрывающемся списке.



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


Просмотрите структуру примера сайта


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



Боковая панель Velo

Чтобы отобразить боковую панель после того, как она скрыта, нажмите любую из кнопок боковой панели.


База данных wix

Раздел «Базы данных» на боковой панели содержит коллекции примеров сайтов. Щелкните коллекцию, чтобы открыть ее в Content Manager.

База данных wix

Некоторые из этих коллекций были созданы вручную для примера сайта, а другие получены непосредственно из приложений Wix. Коллекции приложений Wix перечислены под названием приложения. Например, примеры сайтов, которые работают с приложением «Магазин», имеют раздел «Магазин» в части «База данных» боковой панели Velo. Вы можете щелкнуть заголовок раздела «Магазин», чтобы увидеть две его коллекции: «Коллекции» и «Продукты». Поскольку информация в этих коллекциях поступает непосредственно из приложения Wix, они доступны только для чтения и могут быть изменены только через приложение. Все коллекции, которые были созданы специально для примера сайта, перечислены в нижней части части базы данных боковой панели Velo. Вы можете добавлять новые элементы в эти коллекции или редактировать существующие элементы, как и в любой другой коллекции. Вы также можете добавлять новые коллекции в базу данных.


Изучите свойства элементов

Еще одна вещь, которую вы заметите при включении режима разработки Velo, — это панель «Свойства и события», которая отображается справа от панели кода и позволяет вам работать с Velo над элементами вашего сайта.


Изучите свойства элементов wix velo

Щелкните элемент на любой странице примера сайта (включая саму страницу), чтобы просмотреть его свойства на панели «Свойства и события». Эти свойства включают идентификатор элемента, который используется при написании кода, управляющего этим элементом, и обработчики событий.


Если вы скопируете и вставите какой-либо код из примера, вам необходимо убедиться, что свойства работают со вставленным кодом.

Как элементы примера подключаются к данным

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


Просмотрите код, использованный в примере

Код некоторых страниц в примерах сайтов был написан с использованием JavaScript и Velo API. Вы можете увидеть этот код на панели кода, которая появляется в нижней части вашего редактора. Вы можете просто перетащить его из нижней части экрана, чтобы открыть его.


Копирование и добавление кода с примера

Если вы решите скопировать код, элементы или наборы данных с при