Вообще тут конкретного задания нет, это просто пример как работать с данными. Сей опыт надо будет применить при создании списка адвокатов или кого там были. Но сначал сделай следующее задание =)
Jekyll / подсказка к 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>
а теперь перепишем с использованием цикла:
получим обоих юзеров в списке:
вот, собственно, и вся наука =)
5