Устанавливаем Jekyll
Jekyll
2
3
Взять свой сайт и создать страницы под все основные пункты меню и добавить их в навигацию.
То есть под Глоссарий, Количество игроков, Стилистика, Платформа, Об авторе.
В принципе Жанры тоже можно добавить.
Можно даже скопировать текстовый контент в странички
4
Сверстать шапки сайтов:
1) У медузы все просто, по сути только цвет активных элементов
2) На пикабу особо обратить внимание на то что у активного элемента есть подчеркивание снизу
3) На irk.ru ничего специфического, тоже только граница снизу и эффект ссылки при наведении
4) На гитхабе активный элемент никак не проявляется, но есть эффект при наведении мыши и шапка находится вне контейнера и поэтому растягивается на всю ширину экрана, поле для поиска можно не делать:
5) Еще один хитрый сайт https://css-tricks.com с широкой шапкой, активная ссылка никак не проявляется плюс есть градиент
5
Вообще тут конкретного задания нет, это просто пример как работать с данными. Сей опыт надо будет применить при создании списка адвокатов или кого там были. Но сначал сделай следующее задание =)
6
Тут я показываю как преобразовать данные из excel в json. После него можно уже реальный сайт доделывать
7
Рассматриваем как верстать фигмавский шаблон figma.fig
Чтобы открыть шаблон в Figma, надо на странице проектов https://www.figma.com/files/recent тыкнуть сюда и выбрать файл
либо просто перетянуть его в окно бразуера.
Ну а задача, собственно, доверстать шаблон до конца.
Как делать задание 1
Будем устанавливать генератор статических сайтов jekyll, сначал пойдем сюда https://rubyinstaller.org/downloads/ и качаем Ruby+Devkit 2.7.2-1 (x64)
далее устанавливаем
и ждем
когда закончит, галочку оставляем, он сейчас еще будет устанавливать:
откроется консолька
просто жмешь Enter и снова ждем:
и потом еще раз жмем Enter
Теперь открываем консольку, самый быстрый способ нажать Win + R
в появившемся окне ввести cmd и нажать Ok
и пишем туда
gem install jekyll bundler
жмем Enter и ждем
после того как закончит
введем еще одну команду чтобы проверить что jekyll установился
jekyll -v
должен выдать что-то такое
ура Jekyll установлен
Как делать задание 2
Создаем пустой проект
Создаем новую пустую папку
и открываем ее в Visual Studio Code
Чтобы создать jekyll проект, надо выполнить одну простую консольную команду. Сделать это можно прямо из студии. Поэтому открываем терминал
пишем туда
jekyll new --blank .
жмем enter и ждем пока закончит
теперь если глянуть, то увидишь, что у тебя в папке появилось целая куча папок:
нас интересует файлик index.md по нему будет генерироваться главная страница сайта
В начале этого файла идет блок отделенный --- внутри него указан шаблон разметки который использовать layout: default и заголовок страницы
Посмотреть шаблон страницы можно в папке _layouts, там лежит файлик deafult.html
который немного отличается от стандартной верстки, тут есть элементы, которые обернуты в двойные фигурные скобки, это динамические куски которые можно регулировать из страниц которые используют шаблон.
Работает оно примерно так:
Запускаем сайт
как же собственно, глянуть на результат свой сайт, для этого есть еще одна команда. Открываем снова консольку Ctrl+Shift+`
и пишем туда
jekyll serve
он напишет, что сайт доступен теперь по адресу http://127.0.0.1:4000/
открываем и видим:
и сравниваем с содержимым index.md
---
layout: default
title: "Happy Jekylling!"
---
## You're ready to go!
Start developing your Jekyll website.
т.е. title: “Happy Jekylling!” оказалось в названии вкладки
## You're ready to go!
превратилось в тег h2
почему так?
потому что jekyll использует так называемый markdown синтаксис которые позволяет писать простую html разметку проще, большинство github страниц используют этот же формат для описания документации и в readme файлах проектов.
Но нам никто не мешает писать html код, добавим туда чего-нибудь
---
layout: default
title: "Happy Jekylling!"
---
## You're ready to go!
<h1>Проверка =О</h1>
Start developing your Jekyll website.
обновим страничку и проверим что получится:
отлично! =)
Создаем bootstarp шаблон
Теперь попробуем запихать в стандартный шаблон default.html наш bootstrap шаблон:
Просто берем и заменяем содержимое файлика _layouts/default.html на
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
сохраним и глянем что со страницей
хм куда-то все исчезло…
а! дело в том что когда работаешь с шаблоном в него надо обязательно надо вставлять конструкцию {{ content }} вместо этой конструкции будет подставляться как раз уникальный код страниц. Добавим в body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<!-- добавил -->
{{content}}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
во, теперь другое дело:
Смотрим где лежит сайт
Теперь вопрос, а как сайт собственно получается. На самом деле все просто, когда ты что-то меняешь в шаблоне или на страничке то создается специальная папка _site в которую и собирается сгенерированный html
то есть если тебе надо будет выкладывать сайт куда-нибудь в интернет, а я надеюсь мы это попробуем, то ты просто скопируешь на сервер содержимое этой папки.
Включаем Hot Reload
Hot reload – это авто перезагрузка страницы при изменении кода. Собственно, jekyll поддерживает авто перезагрузку сайта при изменении кода как у нас было с live server, для этого надо запускать сайт через команду:
jekyll serve -l
но у меня оно выдает ошибку
если у тебя так же, то для того чтобы ее исправить надо выполнить следующее команды, которые переустановят один пакет для jekyll
gem uninstall eventmachine
gem install eventmachine --platform ruby
если он спросит
Continue with Uninstall? [yN]
написать y и нажать Enter
ну и ждем пока не увидим примерно вот это:
теперь снова можем вызвать команду
jekyll serve -l
и уже все должно запуститься без ошибок
и работать куда удобнее:
Как делать задание 3
Попробуем теперь добавить новую страничку.
Для этого создадим файлик назовем его about.html
и загоним в него следующее содержимое:
---
layout: default
---
<h1>About</h1>
по сути это обычный html только мы в начале указываем что этот файл будет использовать шаблон default
Теперь мы можем открыть этот файлик по следующему адресу http://127.0.0.1:4000/about.html
если глянуть в папке _site теперь появился новый скомпилированный html
попробуем теперь сделать ссылку на этот файл с главной страницы.
Кстати так как нам не интересно работать с markdown по крайне мере пока, то переименуем файл index.md в index.html
если открыть теперь главную страницу http://127.0.0.1:4000 то получим такое
то есть ## You're ready to go! стал просто текстом, но, в принципе, он нам не очень то и нужен. Оставим в index.html только
---
layout: default
---
и попробуем просто добавить ссылку
---
layout: default
---
<a href="/about.html">About</a>
проверяем
добавим еще одну страничку glossary.html например
проверим что работает http://127.0.0.1:4000/glossary
добавим ссылку и на нее в index.html:
---
layout: default
---
<a href="/about.html">About</a>
<a href="/glossary.html">Глоссарий</a>
тестируем
Делаем менюшку
Теперь подумаем, как это можно улучшить, ведь сейчас не удобно: чтобы попасть на другую страничку надо сначала вернуться на главную и оттуда уже нажать на ссылку.
Есть ли возможность сделать так чтобы меню было доступно на всех страницах.
Можно конечно его копипастить просто на каждую страничку. Но тогда зачем наv jekyll?
Поэтому мы воспользуемся тем фактом что наш _layouts/default.html – это базовый шаблон всех наших страничек, и поэтому мы можем вставить меню прям туда.
Открываем _layouts/default.html - там у нас
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
{{content}}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
добавим прям перед {{content}} наши ссылки
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<a href="/about.html">About</a>
<a href="/glossary.html">Глоссарий</a>
{{content}}
<!-- ... -->
</body>
</html>
проверяем главную страницу:
ой, удвоились, уберем ссылки из index.html и идентифицируем ее как-нибудь
---
layout: default
---
<h1>Я главная страница</h1>
а теперь попробуем как это работает:
вообще прикольно, только надо еще ссылку на главную страницу добавить, правим default.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<a href="/">На главную</a>
<a href="/about.html">About</a>
<a href="/glossary.html">Глоссарий</a>
{{content}}
<!-- ... -->
</body>
</html>
проверка:
ура теперь все работает! =)
Делаем нормальный шаблон на бутстрапе
Правим default.html, первое что делаем, это пихаем все в .container
<div class="container">
<a href="/">На главную</a>
<a href="/about.html">About</a>
<a href="/glossary.html">Глоссарий</a>
{{content}}
</div>
теперь делаем навигацию. Никаких разумных, способов запомнить как ее сделать не существует, поэтому просто идем сюда https://getbootstrap.com/docs/4.6/components/navbar/#nav и копипастим вот это:
получиться как-то так:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">На главную</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/glossary.html">Глоссарий</a>
</li>
</ul>
</div>
</nav>
{{content}}
</div>
уже выглядит поприличнее:
вообще отдельный пункт под главную страницу делать нет смысла, так что уберем его и подправим navbar
у меня так получилось
чтобы иконка заработала, не забудь подключить fontawesome
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/glossary.html">Глоссарий</a>
</li>
</ul>
</div>
</nav>
{{content}}
</div>
а теперь попробуем добавить немного динамики, jekyll повзоляет в шаблонах изменять верстку элементов в зависимости от различных условий. Например, мы можем проверять текущий адрес страницы и, если мы вдруг на странице about, то добавлять звездочку справа от пункта меню, и аналогично для глоссария:
вот так
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/about.html">About {% if page.url == "/about.html" %} * {% endif %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/glossary.html">Глоссарий {% if page.url == "/glossary.html" %} * {% endif %}</a>
</li>
</ul>
</div>
</nav>
{{content}}
</div>
вообще мы можем даже класс добавлять:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item {% if page.url == '/about.html' %}active{% endif %}">
<a class="nav-link" href="/about.html">About {% if page.url == "/about.html" %} * {% endif %}</a>
</li>
<li class="nav-item {% if page.url == '/glossary.html' %}active{% endif %}">
<a class="nav-link" href="/glossary.html">Глоссарий {% if page.url == "/glossary.html" %} * {% endif %}</a>
</li>
</ul>
</div>
</nav>
{{content}}
</div>
правда это уже очень громоздко получается. Так как бутстрап поддерживает класс active для пунктов меню, то если присмотреться, то видно, что текст чуть жирнее, во
ну все, гоу задание пилить
Как делать задание 4
Сначала мини хак, как сделать все пять заданий в одном проекте.
Просто берешь и под каждый сайт делаешь новый файлик в папке _sass и импортируешь его в assets\css папке
А теперь по сути, сюда я загнал выжимку из видоса:
Главное, что надо помнить при построении своей стилизации на базе шаблона бутстрап, это то что навигация состоит из пять основных уровней
Первый
и самый верхний это собственно блок nav с классом navbar, он отвечает за размер общей строки навигации, ее цвет, отступы по бокам, положение блока кнопок навигации внутри (то есть мы, например, его влево выравнивали, у тебя он был растянут по ширине). Если нам надо поменять цвет строки навигации, то добавляем свойство background именно сюда
вот как наши стили для этого блока выглядели
Второй
это navbar-collapse, на самом деле можно и без него, так как он отвечает за то чтобы на маленьких экранах меню становилось вертикальным. Плюс он объединяет в себя блоки с кнопками навигации и соответственно определяет расположение этих блоков
вот его стили
Третий
это блоки кнопок навигации с классом navbar-nav, теоретически их может быть несколько (редко больше двух). У нас собственно их два, это набор пунктов меню и еще отдельно мы кнопочку с шестеренкой добавили.
мы кстати им особо стилей и не добавляли, только чтобы по высоте он равнялся на размеры navbar-collapse
Четвертый
это блоки пунктов навигации у которых есть стиль .nav-item
именно сюда прописываем расстояние между пунктами меню, и стили при комбинации с классом .active
Пятый
это внутренность пункта меню, она не всегда имеет явный вид как в нашем случае, иногда это просто текст, главное, что это ссылка с классом nav-link
часть стилей мы прописываем прямо в стиле .nav-item, это важно только если у нас есть зависимость вида ссылки от стилей пункта меню, ну то есть когда у пункта меню есть дополнительный класс active мы рисуем ссылку как зеленый квадратик
остальные стили мы пишем уже вне nav-item
тут самое интересное – это поведение при наведении мышки на ссылку, для этого добавляется специальная конструкция &:hover где прописывается как должно поменяться отображение если навести мышку. Мы, например, меняем цвет фона, добавляем тень и меняем цвет на белый.
Кстати цвет приходится менять на белый, потому что в бутстрап встроено поведение, при котором ссылки при наведении меняют цвет на черный.
Вот такие дела.
Шаблон default.html
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link rel="stylesheet" href="/assets/css/main.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav d-flex">
<li class="nav-item {% if page.short == 'about' %}active{% endif %}">
<a class="nav-link" href="/about.html">About {% if page.url == "/about.html" %} * {% endif %}</a>
</li>
<li class="nav-item {% if page.url == '/glossary.html' %}active{% endif %}">
<a class="nav-link" href="/glossary.html">Глоссарий {% if page.url == "/glossary.html" %} * {% endif %}</a>
</li>
<li class="nav-item {% if page.url == '/platform.html' %}active{% endif %}">
<a class="nav-link" href="/platform.html">Платформа {% if page.url == "/platform.html" %} * {% endif %}</a>
</li>
<li class="nav-item {% if page.short == 'players' %}active{% endif %}">
<a class="nav-link" href="/players.html">Количество игроков {% if page.url == "/players.html" %} * {% endif %}</a>
</li>
<li class="nav-item {% if page.url == '/style.html' %}active{% endif %}">
<a class="nav-link" href="/style.html">Стилистика {% if page.url == "/style.html" %} * {% endif %}</a>
</li>
<li class="nav-item dropdown {% if page.url == '/Action.html' %}active{% endif %}">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Жанры
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/Action.html">Action</a>
<a class="dropdown-item" href="/Arcade.html">Аркада</a>
<a class="dropdown-item" href="/Strategy.html">Стратегия</a>
</div>
</li>
</ul>
<ul class="navbar-nav d-flex">
<li class="nav-item navbar-nav d-flex">
<a class="nav-link" href=""><i class="fas fa-2x fa-cog"></i></a>
</li>
</ul>
</div>
</nav>
<div class="container">
{{content}}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Файл main.scss
$backgroundColor: #ffffff;
$bodyColor: #000000;
$bodyFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
body {
background: $backgroundColor;
color: $bodyColor;
font-family: $bodyFont;
}
.navbar {
background-color: #08a1a6;
padding: 0 1rem;
height: 56px;
.navbar-collapse {
height: 100%;
justify-content: space-between;
}
.navbar-brand {
color: white;
width: 40px;
height: 40px;
text-align: center;
border-radius: 50%;
&:hover {
background-color: rgba(116,131,131,0.6);
box-shadow: 0 0 0 2px transparent;
color: #ffffff;
}
}
.navbar-nav {
height: 100%;
.nav-item {
height: 100%;
display: flex;
position: relative;
align-items: center;
margin: 0 4px;
&.active, &.show {
.nav-link {
background-color: rgba(116,131,131,0.6);
box-shadow: 0 0 0 2px transparent;
color: #ffffff;
}
}
&.active::after {
position: absolute;
bottom: 0px;
left: 4px;
right: 4px;
content: "";
height: 3px;
background-color: rgb(248, 227, 250);
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
}
.nav-link {
color: white;
font-weight: bold;
font-size: 14px;
border-radius: 3px;
padding: 0 6px;
height: 2.2857142857142856em;
line-height: 2.2857142857142856em;
vertical-align: middle;
transition: all 0.3s;
&:hover {
background-color: rgba(116,131,131,0.6);
box-shadow: 0 0 0 2px transparent;
color: #ffffff;
}
}
}
}
Как делать задание 5
Попробуем теперь работать с данными в jekyll, я буду на чистом проекте показывать, чтобы лучше понятно было.
Я создал проект с помощью
jekyll new --blank .
сделал, вот такой шаблон default
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{page.title}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container">
<div class="py-5 text-center">
<h2>Работаем с данными</h2>
</div>
{{content}}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>
и такой файл index.html файлик сделал:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
в общем вот такая структура
И так, что за данные? И что с ними делать. Данные это специальные файлики, которые кладутся в папку _data и к ним можно обращаться с кода страницы.
Добавим файлик, назовем его, например, users.json
и запихаем в него какие-нибудь данные в json формате:
{
"name": "Наташа",
"last_name": "Гогина",
"group": {
"title": "ИСТбп",
"year": 2018
}
}
теперь собственно вопрос что с ними можно делать? Наприме можем вывести эти данные на странице. Для этого к ним надо обратится через site.data.имя_файла, где вместо имя_файла подставляем users, то есть расширение опускаем.
Добавим в index.html
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
{{ site.data.users }}
проверим
так как такая структура не очень визуально красива, мы можем работать с каждым полем отдельно:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
<div>Имя: {{site.data.users.name}}</div>
<div>Фамилия: {{site.data.users.last_name}}</div>
<div>Группа: {{site.data.users.group}}</div>
вот так получится
так как группа — это тоже словарик, то и выводится она в некрасивом виде, и по идее надо тоже каждое поле выбирать, для этого просто добавляем очередное обращение через точечку:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
<div>Имя: {{site.data.users.name}}</div>
<div>Фамилия: {{site.data.users.last_name}}</div>
<div>Группа: <strong>{{site.data.users.group.title}}</strong>
<span class="text-danger">{{site.data.users.group.year}}</span>
</div>
уже так получится
но вообще если так подумать, то у нас файлик называется users.json, а юзер там только один.
Добавим туда Никиту, для этого надо обернуть все в квадратные скобочки (что будет означать что у нас список чего-то), и добавить еще один словарик с инфой по юзеру через запятую, вот так
[
{
"name": "Наташа",
"last_name": "Гогина",
"group": {
"title": "ИСТбп",
"year": 2018
}
},
{
"name": "Никита",
"last_name": "Белых",
"group": {
"title": "ИСТбп",
"year": 2018
}
}
]
если теперь перегрузить страницу, то наши заполненные данные пропадут:
почему так? А потому что в {{site.data.users}} теперь лежит не конкретный пользователь, а целый список, можем это кстати проверить:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
{{site.data.users}}
Так вот, если мы хотим вывести только одного юзера, то надо использовать индексы. Никита второй, поэтому используем индекс 1 (нумерация, как водится, с нуля):
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
{{site.data.users[1]}}
ну и соответственно, если нам надо получить имя конкретной записи мы добавляем обращение к полю, то есть как-то так
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
<div>Имя: {{site.data.users[1].name}}</div>
<div>Фамилия: {{site.data.users[1].last_name}}</div>
<div>Группа: {{site.data.users[1].group}}</div>
но что делать если юзеров сто тыщ штук и мы хотим их всех вывести, мы же замучаемся копипастить, поэтому в jekyll внутри разметки можно вставлять циклы, делается это так:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
{% for user in site.data.users %}
<div>{{user}}</div>
{% endfor %}
так мы можем, например, вывести только имя каждого юзера:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
{% for user in site.data.users %}
<div>{{user.name}}</div>
{% endfor %}
а можем и что-то более хитрое генерить:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
{% for user in site.data.users %}
<div>Имя: {{user.name}}</div>
<div>Фамилия: {{user.last_name}}</div>
<div>Группа: <strong>{{user.group.title}}</strong>
<span class="text-danger">{{user.group.year}}</span>
</div>
{% endfor %}
то есть получается, что мы описали оформление одной записи, и jekyll с помощью цикла нагенерил данную разметку на каждого пользователя.
Наши данные идеально ложатся в какую-нибудь табличку. Добавим ее:
---
layout: default
title: "Пробуем данные"
---
<h1>Просто заголовок</h1>
<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Группа</th>
<th>Год</th>
</tr>
</thead>
<tbody></tbody>
</table>
и теперь нам надо, чтобы jekyll нагенерил нам строк, сначала сделаем одну без всяких циклов, просто чтобы оценить как оно выводится:
<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Группа</th>
<th>Год</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{site.data.users[0].name}}</td>
<td>{{site.data.users[0].last_name}}</td>
<td>{{site.data.users[0].group.title}}</td>
<td>{{site.data.users[0].group.year}}</td>
</tr>
</tbody>
</table>
а теперь перепишем с использованием цикла:
получим обоих юзеров в списке:
вот, собственно, и вся наука =)
Как делать задание 6
И так, задача, есть excel файл с данными а нам надо получить json. Допустим у меня есть такая табличка скачать user.xlsx
внутри у нее такое
и я хочу это перегнать в json формат.
Я конечно могу вручную брать каждую строчку и пилить эти фигурные скобочки, запятые, кавычки и прочую ересь. Но есть способ проще.
Я иду на сайт https://tableconvert.com
тыкаю вверху кнопочку import, открывается модальное окно:
выделяю все ячейки который я хочу преобразовать в экселе
загоняю их в форму
и жму Import Data в правом нижнем углу
скорее всего если данных много то надо промотать вниз, и тыкнуть JSON:
ура!=) Данные теперь в правильном формате, берешь и копипастишь себе в jekyll в файлик users.json
О, и кстати одно “но”, так как названия столбцов на русском, то лучше их переименовать в английские в избежание проблем в jekyll
ну и потом повторить процедуру
Как делать задание 7
Собственно вот такая верстка получилась.
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<main>
<section class="section-top">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<div class="logo">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="36" cy="36" r="36" fill="#C8C8C8" />
<g filter="url(#filter0_d)">
<path
d="M16.2012 27.4043C20.153 27.1113 22.7311 26.9648 23.9355 26.9648C25.1465 26.9648 26.1003 27.0788 26.7969 27.3066C27.5 27.528 28.1283 27.8372 28.6816 28.2344C29.7559 28.9961 30.5664 30.0085 31.1133 31.2715C31.6667 32.5345 31.9434 33.8138 31.9434 35.1094C31.9434 36.4049 31.7318 37.5378 31.3086 38.5078C30.8919 39.4714 30.3125 40.2852 29.5703 40.9492C28.0534 42.3229 26.0905 43.0065 23.6816 43H16.2012V27.4043ZM22.2754 32.3555V38.3027C22.6204 38.0098 22.9948 37.7201 23.3984 37.4336C24.9479 36.3203 25.7227 35.1549 25.7227 33.9375C25.7227 33.3451 25.5469 32.7982 25.1953 32.2969C24.8438 31.7891 24.3848 31.5352 23.8184 31.5352C23.2585 31.5352 22.7441 31.8086 22.2754 32.3555ZM39.1211 27.4043L40.9082 32.9609L44.8047 27.7363C44.9349 27.5605 45.0326 27.4466 45.0977 27.3945C45.1628 27.3424 45.2604 27.3164 45.3906 27.3164C45.5208 27.3164 45.6868 27.4564 45.8887 27.7363L49.5215 32.9023L51.2793 27.4043H56.8652L51.7676 42.5996C51.5462 43.2507 51.1719 43.5762 50.6445 43.5762C50.1172 43.5762 49.6452 43.2767 49.2285 42.6777L44.8633 36.3789L40.166 42.6973C39.7428 43.2572 39.2708 43.5371 38.75 43.5371C38.2292 43.5371 37.8483 43.2116 37.6074 42.5605L32.1191 27.4043H39.1211Z"
fill="white" />
</g>
<defs>
<filter id="filter0_d" x="12.2012" y="22.9648" width="52.6641" height="28.6113"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dx="2" dy="2" />
<feGaussianBlur stdDeviation="3" />
<feColorMatrix type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow"
result="shape" />
</filter>
</defs>
</svg>
</div>
<span class="logo-text">Dreammaker</span>
</a>
<div class="d-flex align-items-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Setting</a>
</li>
</ul>
<button class="btn-lilac nav-item">Contact us</button>
</div>
</div>
</nav>
<div class="header-top-info-container container">
<h1>
Your awesome Dream <br>
maker consultant
</h1>
<div class="text">
The occupational traffic permit is one of the most important things in the company<br>
when carrying out freight transport. In fact, it is a prerequisite for<br>
doing business traffic at all.
</div>
<button class="btn-lilac">Get started</button>
</div>
</section>
<section class="section-2">
<div class="info-container">
<h2>
We provide great Service
</h2>
<div class="text">
The occupational traffic permit is one of the most important things in the company<br>
when carrying out freight transport. In fact, it is a<br>
prerequisite for doing business traffic at all.
</div>
</div>
<div class="service-items container">
<div class="row">
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/screen.svg" alt="">
</div>
<h3>Web design</h3>
<div class="text">
Here you can find all
web design and all of yours
designing meterials
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/doctor.svg" alt="">
</div>
<h3>Health and study</h3>
<div class="text">
Here you can find all
your primary health your
good health and education
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/box.svg" alt="">
</div>
<h3>Packaging</h3>
<div class="text">
Consistency in packaging
matter a lot. Give your attention
match design elements
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/pencil.svg" alt="">
</div>
<h3>Content writing</h3>
<div class="text">
It can be understood
that your fonts, sizes, headings,
sub-headings, and button
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-3">
<div class="container">
<div class="row">
<div class="col">
<div class="info-container">
<h2>
The People are quick turnaround here
</h2>
<div class="text">
The occupational traffic permit is one of the most <br>
things in the company How do you do when <br>
a commercial traffic permit for freight <br>
transport to your business?
</div>
</div>
</div>
<div class="col">
<img src="/images//people_network.svg" alt="">
</div>
</div>
</div>
</section>
<section class="section-4">
<div class="container">
<div class="row">
<div class="col">
<div class="question-item">
<div> When is a professional traffic permit needed?</div>
<i>></i>
</div>
<div class="question-item">
<div> Where to look for a traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> Are there differences between a traffic permit and a professional traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> How much does a commercial traffic permit cost for goods?</div>
<i>></i>
</div>
<div class="question-item">
<div> How to plug in for the traffic permit test?</div>
<i>></i>
</div>
<div class="question-item">
<div> How is the sample for a professional traffic permit booked?</div>
<i>></i>
</div>
</div>
<div class="col under-the-man">
<div class="question-item">
<div> When is a professional traffic permit needed?</div>
<i>></i>
</div>
<div class="question-item">
<div> Where to look for a traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> Are there differences between a traffic permit and a professional traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> How much does a commercial traffic permit cost for goods?</div>
<i>></i>
</div>
<div class="question-item">
<div> How to plug in for the traffic permit test?</div>
<i>></i>
</div>
<div class="question-item">
<div> How is the sample for a professional traffic permit booked?</div>
<i>></i>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>
main.css
body {
font-family: 'Poppins';
}
/* TOP SECTION */
.navbar {
height: 116px;
background: rgba(196, 196, 196, 0.1);
}
.section-top {
background-image: url("/images/bg01.jpg");
height: 737px;
background-repeat: no-repeat;
background-position-x: center;
}
.navbar-brand {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand .logo-text {
margin-left: 21px;
}
.nav-item {
margin-left: 58px;
padding: 0;
}
.navbar-light .navbar-nav .nav-link {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #717784;
}
.btn-lilac {
width: 234px;
height: 60px;
background: #9B9BCA;
border-radius: 10px;
border: 0;
font-style: normal;
font-size: 18px;
line-height: 27px;
/* identical to box height */
color: #FFFFFF;
transition: all .3s;
}
.btn-lilac:hover {
background: #9e75cc;
}
.header-top-info-container {
margin-top: 196px;
}
.header-top-info-container > h1 {
font-family: DM Serif Display;
font-style: normal;
font-weight: normal;
font-size: 56px;
line-height: 100%;
/* or 56px */
color: #696A86;
}
.header-top-info-container > .text {
font-size: 18px;
line-height: 27px;
color: #696A86;
}
.header-top-info-container > * {
margin-top: 30px;
}
/* SECTION 2 */
.section-2 .info-container {
margin-top: 95px;
text-align: center;
width: 780px;
margin-left: auto;
margin-right: auto;
}
.section-2 .info-container > h2 {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 39px;
color: #626780;
}
.section-2 .info-container > .text {
margin-top: 23px;
font-size: 18px;
line-height: 26px;
color: #626780;
}
.section-2 .service-items {
margin-top: 139px;
}
.section-2 .service-items .service-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 250px;
border: 1px solid #9d9d9d00;
box-sizing: border-box;
border-radius: 5px;
transition: all .3s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.section-2 .service-items .service-item::after {
position: absolute;
height: 7px;
left: 0px;
right: 0px;
bottom: 0px;
background: #c4c4c400;
transition: all .3s;
content: "";
}
.section-2 .service-items .service-item:hover {
border: 1px solid #9D9D9D;
}
.section-2 .service-items .service-item:hover::after {
background: #C4C4C4;
}
.section-2 .service-items .service-item h3 {
margin-top: 21px;
font-weight: 500;
font-size: 22px;
line-height: 40px;
color: #626780;
}
.section-2 .service-items .service-item .text {
margin-top: 12px;
text-align: center;
font-size: 16px;
line-height: 20px;
text-align: center;
color: #626780;
}
.section-3 {
margin-top: 192px;
}
.section-3 .row {
align-items: center;
}
.section-3 .info-container h2 {
font-weight: 500;
font-size: 26px;
line-height: 39px;
color: #626780;
}
.section-3 .info-container .text {
font-size: 18px;
line-height: 30px;
color: #626780;
}
.section-4 {
margin-top: 150px;
background: url("/images/big-circle.svg");
background-repeat: no-repeat;
background-position-x: 877px;
}
.section-4 .container {
background: url("/images/man.png");
background-position-x: 577px;
background-repeat: no-repeat;
overflow: visible;
height: 1030px;
}
.section-4 .container .under-the-man {
margin-top: 730px;
}
.section-4 .question-item {
padding: 25px 34px 25px 34px;
background: #FFFFFF;
box-shadow: 0px 20px 40px #F5F5FF;
border-radius: 23px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}