Простой и простой шаблон Jekyll для бизнеса.
Вы можете просмотреть тему здесь
Адаптивность : встроенная поддержка экранов всех размеров, будь то смартфоны, ноутбуки, планшеты...
Многоязычность : легко управляйте страницами, меню, URL-адресом, датами и картой сайта на нескольких языках.
Настраиваемые : цвета темы, меню, социальные элементы можно изменить из центрального файла конфигурации.
Множество виджетов : вкладки, мини-сообщения, прожектор, списки функций и многое другое можно легко вставлять, не беспокоясь об их внутреннем устройстве.
Множество шаблонов : контактные формы, навигационные меню и т. д. можно легко вставить благодаря пользовательским компонентам Jekyll.
Векторные изображения : изображения темы векторизованы, плавно отображаются на любом дисплее и могут быть динамически стилизованы.
Готовность к GDPR : в комплекте с плагином согласия на использование файлов cookie и шаблонной политикой конфиденциальности, соответствующей GDPR.
Готовность к SEO : карта сайта, robots.txt и теги автоматически генерируются для веб-сайта.
Light : изображения SVG, миниатюры и отложенная загрузка растровых изображений, мало библиотек.
Производительность : параллельная загрузка и выполнение ресурсов, поддержка отложенной загрузки, минифицированные ресурсы, сжатый критический путь.
Усилено : проверка формы, рекапча, проверенные библиотеки.
Добавьте эту строку в Gemfile
вашего сайта Jekyll:
gem "jekyll-theme-consulting"
И добавьте эту строку в _config.yml
вашего сайта Jekyll:
theme : jekyll-theme-consulting
И затем выполните:
$ bundle
Или установите его самостоятельно как:
$ gem install jekyll-theme-consulting
Для тех, кто не знаком с тем, как работает Jekyll, посетите сайт jekyllrb.com, чтобы узнать все подробности, или прочитайте только основы вступительной части, написания сообщений и создания страниц.
Скопируйте файл _config.yml
из репозитория темы в корень дерева папок вашего сайта. В следующем разделе объясняется, на что влияют эти настройки и как правильно настроить _config.yml
.
Вы можете использовать следующие пользовательские параметры в _config.yml
.
И title
, и subtitle
отображаются рядом:
Иконки социальных сетей будут отображаться для каждого введенного вами URL-адреса, например, facebook_url
и т. д.
Ваша контактная информация может использоваться в контактных формах, нижнем колонтитуле или где-либо еще.
Контактная форма проверяется с помощью плагина Google recaptcha. Во-первых, вам нужно [зарегистрировать свой сайт], чтобы включить плагин. Google предоставит вам ключ интеграции на стороне клиента : скопируйте его в _config.yml
под recaptcha.sitekey
.
Загрузку и рендеринг изображений можно отложить до тех пор, пока они не войдут в область просмотра. Это сокращает загрузку веб-страницы без каких-либо последствий для отображаемого контента, поскольку изображения находятся за кадром.
Есть 2 возможности:
Браузеры поддерживают ленивую загрузку по-разному, поэтому рекомендуется выбрать первое решение.
class="lazy-loading"
src
путем к файлу-заполнителюdata-src
путем к файлу содержимогоДо:
< img src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
После:
< img class =" lazy-loading " src =" {{ 'assets/images/placeholder.jpg' | absolute_url }} " data-src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
loading="lazy"
До:
< img src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
После:
< img loading =" lazy " src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
Эта функция поддерживается не всеми браузерами!
Рекомендуется использовать формат webp
.
При заданном размере и уровне сжатия (качества) файлы WebP имеют размер как минимум вдвое меньше и выглядят более плавными.
В репозитории вашего сайта отредактируйте файл _config.yml
:
url : " https://<github-account-name>.github.io/<repository-name> "
Создайте сайт с помощью:
$ JEKYLL_ENV=production bundle exec jekyll build
Перенесите всю свою работу в текущую ветку.
Создайте ветку с именем gh-pages
:
$ git checkout -b gh-pages
И, наконец, замените содержимое репозитория сгенерированными веб-страницами:
$ mkdir ~/backup
$ mv ./* ~/backup/
$ mv ~/backup/.git ./
$ mv ~/backup/_site/* ./
$ git add .
$ git commit -m "First draft"
Содержимое репозитория резервируется в домашнем каталоге пользователя.
И, наконец, нажмите на github
$ git push --u origin gh-pages
В каталоге вашего сайта отредактируйте файл _config.yml
:
url : " https:<domain-name> "
Создайте сайт с помощью:
$ JEKYLL_ENV=production bundle exec jekyll build
Скопируйте содержимое папки _site
на свой сервер, скорее всего в www
.
При необходимости настройте свой сервер для обслуживания этого каталога.
Отчеты об ошибках и запросы на включение приветствуются на GitHub по адресу https://github.com/apehex/jekyll-theme-consulting. Этот проект призван стать безопасным и гостеприимным пространством для сотрудничества, и ожидается, что участники будут соблюдать Кодекс поведения участников.
Чтобы настроить среду для разработки этой темы, запустите bundle install
.
Чтобы протестировать тему, запустите bundle exec jekyll serve
и откройте браузер по адресу http://localhost:4000
. Это запустит сервер Jekyll, использующий эту тему. Добавляйте страницы, документы, данные и т. д., как обычно, чтобы протестировать содержимое темы. Когда вы вносите изменения в тему и свой контент, ваш сайт будет обновлен, и после обновления вы должны увидеть изменения в браузере, как обычно.
Когда тема будет выпущена, будут объединены только файлы в _layouts
, _includes
, _sass
и assets
отслеживаемые с помощью Git. Чтобы добавить собственный каталог в theme-gem, отредактируйте регулярное выражение в jekyll-theme-consulting.gemspec
соответствующим образом.
Вдохновлен работой @ajlkn.
Использует базовый шаблон из плагина согласия на использование файлов cookie.
Использует простой плагин поиска Jekyll.
Космическое изображение на баннере: Столпы Творения, любезно предоставлено НАСА.
Тема доступна с открытым исходным кодом на условиях CC-BY-NC-SA-4.0.