skeleventy

Многодцать стартового скелета

Skeleventy дает вам надежный фонд для построения быстрых и доступных статических веб -сайтов. Посмотреть демо -сайт.

Функции

• Чистый, минимальный конвейер сборки с SCSS и смеси Laravel для составления активов
• Горко, умный маленький генератор коммунальных классов с силой
• Purgecss для удаления неиспользованных CSS
• HTML Minifier
• Поддерживает ES2017 JavaScript, с компиляцией Babel
• SEO Friendly Page Meta, включая открытый график и Twitter
• Изображение ленивая загрузка
• Мобильная навигация
• XML Sitemap
• Чистый и простой блог, с категориями и представленными изображениями

Начиная

Предварительные условия

Узел v10+

Установка

1. Клонировать репозицию git clone https://github.com/josephdyer/skeleventy.git
2. cd в ​​папку проекта и запустите npm install
3. Начните локальный сервер разработки, запустив npm run dev Tip: Mitenty Live Reload Baked In!

Структура папки

Одиннадцать

• site/ содержит все глобальные данные, шаблоны и контент
• utilities/ содержит множество вспомогательных filters и transforms
• Каждая страница должна иметь свою собственную папку, содержащую файл index.md
• Затем вы можете выбрать наиболее подходящий макет для каждой страницы (или создать больше, если вам нужно)
• Навигация оснащена официальным плагином на одиннадцати навигации

Ресурсы

• css/ для составленного CSS
• js/ для составленного JavaScript
• images/ содержит изображения нашего сайта, Svg Icon Sprite и папку для мета -изображений (OG, Twitter и т. Д.)

Строительный трубопровод

Laravel Mix дает нам хороший слой API на вершине WebPack. Skeleventy использует упрощенную настройку, но вы можете воспользоваться расширением микса с пользовательскими конфигурациями Webpack, разделением кода и плагинами, такими как PostCSS, если вы так хотите.

Вы найдете бескомпромиссные SCS и JS на сайте в resources/ где Mix будет наблюдать за этими каталогами для любых изменений. Совет: лучше всего перезагрузить сервер при создании новых частиц или папок

SCSS

• scss/ структурирован в самоуверенные подпапки
• Файл _config.scss - это то, где вы можете изменить цвета сайта и классы утилиты, созданные Gorko
• Типографская шкала уже была настроена с использованием моей личной любимой крупной третьей шкалы.
• Совет: для получения дополнительной масштабов, проверьте шкалу типов

Горко

Я решил удалить Tailwind в пользу Горко, исключительно благодаря его простоте и обслуживаемости (особенно для новых разработчиков). Не слишком много для начала и добавления в то, что вам нужно, приведет к более простой, более обслуживаемой кодовой базе. Gorko позволяет добавлять ряд многоразовых полезных классов, чтобы помочь сохранить ваш код сухим. Кредит Энди Белла за то, что он сделал этот удобный маленький инструмент

JavaScript

• utilities/ содержит любые глобальные функции утилиты/ помощника
• modules/ содержит фактический JavaScript вашего сайта, все они были аккуратными и аккуратными в соответствующих модульных подпапках
• Вы можете импортировать эти подпапки в main.js используя import '@modules/example-module'
• Совет: вы можете настроить дополнительные псевдонимы импорта через файл webpack.mix.js

Примечание об адаптивных изображениях

У Skeleventy нет отзывчивых изображений, зачитываемых, главная причина: лучше всего использовать CDN. Проверьте это руководство по настройке MILETY с облачной.