alpine html bootstrap
Initial Release
Для интернет -магазина, ориентированного на моду, Alpine - это реагирующий шаблон электронной коммерции Bootstrap 5 с эффектом «Ken Burns» на слайд -шоу на домашней странице, угловых баннерах и пользовательском баннере Hotspot с изображением с популярными картами продуктов. Крупные изображения продуктов на страницах категорий дают вам достаточно места для демонстрации продуктов, одновременно обеспечивая легкую навигацию по всему веб -сайту. Это идеальная отправная точка для любого веб -сайта модной розничной торговли, а чистый и минимальный дизайн шаблона означает, что его легко модифицировать и безболезненно интегрироваться с вашим пользовательским применением электронной коммерции. И, прежде всего, это бесплатно.
Посмотреть демо | Скачать Zip
Если вы не намереваетесь работать с исходным кодом шаблона (а это означает, что вы не будете его компилировать или запустить сервер Webpack Dev), вам не нужно ничего устанавливать. Вы можете просто перейти к папке Dist и начать редактировать файлы.
Большинство разработчиков будут редактировать исходный код, а также будут запущены Webpack для перекомпиляции файлов шаблонов. Если это так, убедитесь, что у вас установлен Node.js. Вы можете скачать его отсюда
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install в вашей командной строке.npm start начать WebPack DevServer.npm run build Шаблон состоит из 5 страниц:
Чтобы свести повторение кода к минимуму, мы использовали ручные gancebars.js в качестве механизма шаблона и частичных, чтобы быстро добавить один и тот же код на разные страницы. Мы также используем плагин руля для данных JSON - это позволяет нам использовать петли и выводить один блок HTML -кода вместо повторения одного и того же HTML.
Демо -URL
Обратите внимание, что это только шаблон HTML. Он не подключается к базе данных и не будет автоматически работать в системе управления контентом (WordPress и т. Д.). Вам нужно будет включить наш код в ваше приложение.
? Dist - сгенерированная версия шаблона. Перейдите сюда, если вы не хотите работать с исходным кодом шаблона. Но будьте осторожны: если вы настраиваете что -нибудь в этой папке напрямую, а затем затем перекомпилируйте шаблон с помощью WebPack, если вы не выведете папку Dist из шаблона, ваши изменения будут переопределены.
? node_modules - каталог, где NPM устанавливает зависимость. Вы не увидите эту папку до тех пор, пока не завершите установку шаблона. Вам не нужно создавать эту папку.
? SRC - исходный код шаблона. Перейдите сюда, чтобы настроить свой шаблон.
? SRC/Активы - шаблонные активы, такие как CSS, JS, изображения и т. Д.
? SRC/Data - Шаблон файлов данных JSON. Мы используем эти файлы JSON, чтобы упростить вашу работу для вставки контента в шаблон.
? SRC/HTML - страницы шаблонов. Перейдите сюда, чтобы редактировать существующие страницы или добавить новые страницы.
? SRC/ПАРТИЧЕСКИЕ - ГЛАВНЫЕ РАБОТЫ ПЕРЕДАЧНЫЕ Шаблоны.
Руля - это шаблонный двигатель, который позволяет нам сохранить исходный код нашего шаблона как можно более чистым и максимально чистым. Он сокращает дублирование кода и благодаря использованию вспомогательных функций позволяет разработчикам шаблонов очень быстро выводить большие объемы данных с минимальным кодом. Вы можете прочитать больше об этом здесь.
Мы используем ручки по двум основным причинам: Во -первых, использование деталей руля позволяет нам ссылаться на один и тот же файл в нескольких файлах HTML и означает, что вам нужно редактировать код только из одного источника. Если вы привыкли работать с React или Vue, это будет то же самое, что ссылаться на компонент. Во -вторых, использование данных JSON для наших фиктивных данных каталога удерживает наш шаблонный код в чистоте. Мы можем легко вывести 10 фиктивных продуктов на нашей странице листинга, выводя базовую петлю руля.
Откройте следующий файл в нашем шаблоне: src/html/index.html.
Вокруг строки 46 вы увидите следующий код:
{{> swiper/swiper-hero-slideshow }}
Это частичный руль. Этот код говорит рулям заглянуть в папку, называемую Swiper (расположенную в папке Partials), а затем найти файл, называемый Swiper-Hero-Slideshow, и вставить его в файл index.html при его скомпилировании.
Есть несколько важных заметок о нашем использовании руля частичных:
Давайте посмотрим, как мы используем руль, чтобы поддерживать чистоту нашего кода. Откройте страницу категории: src/html/category.html.
Вокруг строки 56 вы найдете этот код:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
И это наш цикл для страницы категории. Мы передаем данные JSON в нашу петлю руля, затем внутри цикла мы ссылаемся на частичный руль и передаем его данные для каждого элемента цикла:
{{> listing-cards/listing-card this }}
Плагин WebPack Handlebars, который мы используем, поставляется с очень удобной утилитой, которая позволяет нам передавать в файлы JSON в качестве данных шаблона.
Пожалуйста, перейдите к: SRC/Data. Вот где находятся наши шаблоны данных JSON. Вы можете редактировать, удалить или добавить свою собственную в эту папку.
Опять же, если мы ссылаемся на нашу страницу категории:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Важной частью здесь в отношении данных шаблона являются категория-продукты. Entries. Это означает, что внутри нашей папки данных вы найдете файл JSON, который называется «Продукты категорий». Этот файл категории Products.json имеет «ключ», называемый «записи».
Все файлы исходных CSS/SASS -файлов шаблона хранятся в папке активов шаблона. Перейдите к SRC/Assets/SCSS. Откройте Theme.scss с вашим редактором.
Это основная точка входа для всех других файлов SASS/CSS.
Чтобы создать новую страницу, перейдите в свой редактор кода по адресу: src/html. Чтобы облегчить подготовку правильного HTML, клонируйте существующую страницу. Переименуйте недавно созданный файл в любой URL, который вам требуется. И это все. Теперь вы можете открыть новую страницу со своим редактором кода, внести свои изменения, а затем сохранить файл. Выйдите из WebPack DevServer и перезапустите его для отображения страницы.
Bootstrap уже имеет комплексный сайт документации, который будет направлять вас при настройке и использовании всех функций начальной загрузки по умолчанию. Bootstrap 5 полностью интегрирована в исходный код нашего шаблона. Пожалуйста, сначала обратитесь на сайт DOC Bootstrap для любых функций Bootstrap: посетите сайт DOC Bootstrap
Начальная загрузка
Aos.js
Неспособный
Pexels
Pixabay
Mediumzoom.js
Nouislider.js
Simplebar.js
Swiper.js
Вы можете найти наш веб -сайт здесь или написать нам по электронной почте по адресу [email protected]
