Матч с небес
Чтобы добавить интерактивное поведение на сайт Webflow, стандартные варианты включают в себя написание императивного JavaScript или определение его через интерфейс взаимодействия укажи и щелкни. Ни один из них не подходил моему личному стилю, поэтому я решил использовать Alpine.js.
Alpine.js — это минимальная среда JavaScript для составления поведения непосредственно в HTML-разметке. Он предлагает реактивный и декларативный опыт больших фреймворков, таких как Vue.js или React, но, что особенно важно, остается намного проще, чем они.
Тот факт, что Alpine.js инициализируется почти мгновенно, а код находится непосредственно в атрибутах элементов, делает его идеальным для сайтов Webflow.
Итак, как вы можете использовать Alpine.js в Webflow?
TL;DR
Перейдите прямо к решению, посетив демонстрационный сайт:
Инициализация Alpine.js
Чтобы инициализировать Alpine.js в Webflow, включите следующий тег скрипта в конце элемента <body> либо глобально в настройках проекта, либо через HTML Embed на каждой странице:
<script src="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@2/dist/index.js"></script>Пожалуйста, обратитесь к моей статье »Как добавить пользовательский код в Webflow», чтобы узнать больше о пользовательском коде в Webflow.
Затем добавьте HTML Embed, содержащий следующий тег стиля, в начале элемента <body> на каждой странице:
<link href="https://cdn.jsdelivr.net/npm/@loomchild/webflow-alpinejs@2/dist/style.css" rel="stylesheet">
Примечание: этот скрипт не только содержит стандартный дистрибутив Alpine.js, но и устраняет некоторые ограничения Alpine.js в Webflow. В частности, он позволяет создавать элементы
<template>, необходимые для условий и циклов, а также использовать директивные модификаторы. Смотрите документацию, чтобы узнать больше.
Добавление директив Alpine.js через настраиваемые атрибуты
Директивы Alpine.js, используемые для добавления поведения на ваш сайт, объявлены как атрибуты пользовательских элементов. Чтобы добавить настраиваемый атрибут к элементу в Webflow Designer, перейдите на вкладку «Настройки элемента» и щелкните значок «плюс» на панели настраиваемых атрибутов:
В этой статье пользовательские атрибуты будут описаны следующим образом:
attribute-name="attribute-value"
что соответствует следующим настройкам в Webflow Designer:
Пример Alpine.js: выпадающее меню
В этом кратком руководстве вы создадите простое раскрывающееся меню с помощью Alpine.js:
После выполнения следующих шагов вы должны получить следующую структуру в Webflow Designer:
Имейте в виду, что интерактивное меню можно будет использовать только на действующем сайте, а не в Webflow Designer или Preview.
1. Инициализируйте компонент раскрывающегося меню.
Создайте элемент блока div, представляющий компонент раскрывающегося меню, и инициализируйте его в закрытом состоянии, применив к этому элементу следующую директиву x-data:
x-data="{ open: false }"
2. Определите содержимое выпадающего меню
Создайте элемент блока div Menu Content внутри компонента раскрывающегося меню. Установите для параметра Position значение Absolute со сплошным цветом фона.
Затем создайте три элемента ссылки.
Наконец, покажите содержимое меню, только если переменная open имеет значение true, применив следующую директиву x-show к элементу содержимого меню:
x-show="open"
3. Откройте меню с прослушивателем событий x-on:click.
Создайте элемент Button внутри блока div, который откроет раскрывающееся меню. Добавьте директиву x-on:click, чтобы прикрепить к кнопке прослушиватель событий щелчка мыши, который будет обновлять переменную open:
x-on:click="open = true"
Обратите внимание, что в Webflow необходимо использовать полное имя директивы
x-on:clickвместо сокращения@click.
4. Закрыть меню модификатором .outside
Чтобы закрыть раскрывающееся меню, примените следующую директиву x-on:click с модификатором .outside к элементу Menu Content:
x-on:click:outside="open = false"Обратите внимание, что в Webflow символ точки
., используемый в модификаторах, необходимо заменить символом двоеточия:.
5. Скрыть меню перед инициализацией фреймворка через x-cloak
Вы могли заметить, что при загрузке страницы содержимое скрытого меню отображается на короткое время, создавая уродливый мерцающий эффект. Чтобы скрыть элемент до полной инициализации Alpine.js, примените следующую директиву x-cloak directive к элементу содержимого меню:
x-cloak="1"
Неважно, какое значение вы установите для этого бинарного атрибута.
Если вы хотите отобразить скрытый элемент в Webflow Designer для внесения в него изменений, добавьте к этому элементу класс uncloak (он останется скрытым на действующем сайте):
Бонус: отображать пункты меню с циклом x-for
Если вы хотите избежать повторения ссылок меню или если список ссылок является динамическим, вы можете использовать директиву цикла.
Сначала создайте элемент блока div внутри элемента Menu Content и примените к нему следующую директиву x-for:
x-for="link in [{ label: 'One', url: '/one' }, { label: 'Two', url: '/two' }, { label: 'Three', url: '/three' }]"
Далее создайте элемент ссылки внутри блока div и примените к нему следующие директивы x-text и x-bind:
x-text="link.label" x-bind:href="link.url"
Точно так же среднюю ссылку можно условно опустить, поместив элемент ссылки в блочный элемент div, содержащий следующую директиву x-if:
x-if="link.label !== 'Two'"
Обратите внимание, что в стандартном Alpine.js вы должны использовать элемент
<template>вместо элемента блока div<div>. Однако, поскольку Webflow не позволяет создавать элементы<template>напрямую, все элементы, содержащие настраиваемый атрибутx-forилиx-if, будут автоматически заключены в элементы<template>.
Вывод
Вот и все — Alpine.js в Webflow!
Я создал простой демонстрационный сайт, чтобы проиллюстрировать эту статью. Чтобы увидеть его в действии, посетите демонстрационную страницу, а для изучения кода перейдите по ссылке для предварительного просмотра.
Это только начало — пожалуйста, смотрите мою следующую статью о том, как взаимодействовать со встроенным компонентом Webflow Slider через Alpine.js:
Изменить: эта статья была обновлена для Alpine.js 3, выпущенного в июне 2021 года.
