В этих двух видеороликах по 110 секунд каждый мы рассказываем о том, как использовать глобальные файлы данных 11ty для получения статических данных с помощью JSON и динамических (во время сборки) данных с помощью JavaScript.
Файлы данных 11ty JSON
В этом эпизоде мы поговорим о глобальных файлах данных. В частности, о файлах данных JSON. Итак, 110 секунд на часах, поехали!
В 11ty есть концепция каскада данных, и хотя мы не будем вдаваться в подробности об этом в этом видео, мы должны упомянуть, что глобальные файлы данных имеют самый низкий приоритет, поэтому если вы установите что-то в глобальном файле данных и измените его с помощью API конфигурации, API перезапишет эти данные.
Чтобы начать, у нас есть простой сайт 11ty. Все, что у нас есть, это индексный файл. Чтобы добавить глобальные данные, нам нужен каталог для размещения наших файлов. По умолчанию это каталог _data.
Мы создадим его и файл данных в формате json. Имя файла будет ключом, который мы будем использовать для доступа к данным в наших шаблонах. В данном случае мы назовем его siteSetting.json.
Мы создадим суперпростой файл данных настроек сайта. Глобальная информация, которая может понадобиться нам в нескольких шаблонах в дальнейшем.
Затем мы поместим сюда объект JSON с несколькими частями данных. Мы используем здесь объект, но подойдет любой правильный JSON, включая массив.
{
“name”: “Data Example”,
“description”: “A data example site for 11ty second 11ty”
}
После сохранения этих данных мы можем получить к ним доступ из нашего шаблона index (или любого другого шаблона… он ведь глобальный, верно?).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>11ty Second 11ty: Data Example</h1>
{{ siteSetting.name }}
{{ siteSetting.description }}
</body>
</html>
Динамическое содержимое во время сборки с помощью 11ty JS Data Files
Теперь это работает для статического содержимого, но что если мы хотим добавить динамическое содержимое во время сборки… скажем, дату для копирайта в нижнем колонтитуле.
Мы можем сделать это с помощью файла данных Javascript
Давайте скопируем файл siteSetting.json и перенесем его в файл settings.js.
Отсюда мы переформатируем его для использования module.exports и экспортируем этот объект
Теперь мы добавим простое свойство copyright, используя встроенный в JavaScript метод Date. Мы сгенерируем полное время даты и отформатируем его в нашем шаблоне.
module.exports = {
"name": "settings",
"description": "Settings for the bot",
"date": new Date(),
}
Затем мы добавим это в наш файл index.html.
<body>
<h1>11ty Second 11ty: Data Example</h1>
{{ siteSetting.name }}
{{ siteSetting.description }}
{{ settings.date | date: "%Y" }}
</body>
Дата — это хорошо, но что если вы хотите обратиться к другому API и получить контент? Файлы данных JS хорошо работают и для таких простых случаев.
Сначала мы создадим новый файл данных: pokemon.js.
Здесь мы сделаем вызов API к PokeAPI, который является отличным простым API для учебных целей. В данном случае мы будем использовать Axios (убедитесь, что он установлен), но node-fetch или последняя версия встроенного в node fetch тоже подойдут.
На этот раз мы экспортируем функцию и возвращаем массив элементов, к которым хотим получить доступ. В данном случае. Ответ содержит объект data с массивом results.
const axios = require('axios');
module.exports = async function () {
// pokemon api call
const response = await axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151');
const pokemon = response.data.results;
return pokemon
}
<ol>
{% for pokemon in pokemon %}
<li>{{ pokemon.name }}</li>
{% endfor %}
</ol>
Это лишь основы использования файлов данных. Все, что вы можете сделать в JSON или javascript, вы можете сделать в этих файлах, включая массивы, вложенность, вызовы внешних API, преобразование данных и многое другое.