И делать это правильно
También disponible en español aquí.
Для этого в Drupal 7 мы используем модуль библиотек. Для Drupal 8 это по-прежнему правильный способ сделать это; однако этот модуль находится в процессе огромных изменений, и он не совсем хорошо документирован, поэтому сделать это в первый раз - настоящая проблема.
В этом посте мы собираемся использовать библиотеку Chart.js в настраиваемом блоке. Первое, что нам нужно сделать, это загрузить и установить модуль библиотек. После этого, согласно документации, нам нужно проверить, есть ли определение библиотеки, которую мы хотим использовать в реестре библиотек; если он существует и работает у нас, мы экономим один шаг. Если его не существует (это была моя ситуация), нам нужно создать его (и, конечно же, вернуть его сообществу). Для этого мы должны создать json-файл с определением нашей библиотеки в папке public: // library-definitions. В нашем случае этот файл будет называться chart.js и будет иметь следующее содержимое:
{
"name": "Chart.js",
"type": "asset",
"vendor url": "http:\/\/www.chartjs.org",
"download url": "https:\/\/github.com\/chartjs\/Chart.js\/releases\/latest",
"variants": {
"minified": {
"js": {
"Chart.min.js": "Chart.min.js"
}
}
},
"js": {
"Chart.js": "Chart.js"
},
"version_detector": {
"id": "line_pattern",
"configuration": {
"file": "Chart.js",
"pattern": "\/Version: ([0-9a-zA-Z\\.-]+)\/"
}
}
}
В этом файле мы записываем человеческое имя библиотеки, тип библиотеки (актив) и некоторую другую информацию о библиотеке.
Не забудьте отправить файл через очередь задач после того, как вы его протестировали, чтобы другие люди могли извлечь из него пользу.
Следующим шагом будет загрузка библиотеки и размещение ее в нужной папке; в нашем случае это sites/all/assets/vendor/chart_js. Там мы должны разместить Chart.js и Chart.min.js
Конечно, чтобы использовать эту библиотеку, нам понадобится специальный файл js; Итак, мы создаем его внутри папки js (только для заказа) с желаемым именем. В этом посте мы следуем базовому примеру Chart.js; Итак, наш файл будет называться demo_chartjs.js и будет иметь это:
(function ($, Drupal) {
Drupal.behaviors.demoChartJsDemoChart = {
attach: function (context, settings) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
};
})(jQuery, Drupal);
Нет никаких различий в том, как работает javascript в Drupal 8 по сравнению с Drupal 7. Если хотите, можете ознакомиться с документацией.
Для Drupal 8 единственное, что вы можете прикрепить к любому массиву рендеринга, - это библиотеки, поэтому нам нужно определить библиотеку. Для этого, согласно официальной документации, нам нужно создать файл .libraries.yml. Поскольку наш модуль называется demo_chartjs, этот файл будет называться demo_chartjs.libraries.yml и иметь следующее содержимое:
demo_chartjs:
version: 1.x
js:
js/demo_chartjs.js: {}
Далее нам нужно создать шаблон для рендеринга необходимой разметки для нашей диаграммы. Итак, мы собираемся реализовать hook_theme в файле .module:
/**
* Implements hook_theme().
*/
function demo_chartjs_theme() {
return [
'demo_chartjs_demo_chart' => [
'variables' => [],
],
];
}
И добавляем наш файл шаблона в папку шаблонов внутри нашего модуля. Этот файл будет иметь имя demo-chartjs-demo-chart.html.twig и иметь следующее содержание:
{#
/**
* @file
* Template file for demo_chartjs_demo_chart.
*/
#}
<canvas id="myChart" width="400" height="400"></canvas>
Теперь осталось только создать наш блок; Итак, давайте создадим файл DemoChartJs.php в src/Plugin/Block и поместим туда его содержимое:
<?php namespace Drupal\demo_chartjs\Plugin\Block; use Drupal\Core\Block\BlockBase; use Drupal\Component\Utility\Xss; /** * Provides a 'DemoChartJs' block. * * @Block( * id = "demo_chart_js", * admin_label = @Translation("Demo chart js"), * ) */ class DemoChartJs extends BlockBase { /** * {@inheritdoc} */ public function build() { $build = []; $build['chart'] = [ '#theme' => 'demo_chartjs_demo_chart', '#attached' => [ 'library' => [ 'libraries/chart_js', 'demo_chartjs/demo_chartjs', ], ], ]; return $build; } }
Самая важная часть этого файла - функция сборки; там мы инструктируем Drupal использовать тему demo_chartjs_demo_chart, ранее определенную как рендеринг нашего шаблона. Мы также подключаем две библиотеки:
- библиотеки / chart_js: библиотека Chart.ks. Поскольку это внешняя библиотека; они всегда регистрируются как часть модуля библиотек.
- demo_chartjs / demo_chartjs: Наша библиотека, как определено в файле .libraries.yml. В него входит только наш js-файл.
Со всем предыдущим делом; пора протестировать наш блок. Разместите его на сайте, и у вас должна получиться красивая диаграмма, как показано на изображении заголовка этого сообщения.
Отказ от ответственности: модуль библиотек находится в постоянном развитии, поэтому некоторые вещи могут измениться; тем не менее, общие концепции, показанные здесь, я думаю, останутся прежними.
Надеюсь, это будет вам полезно.
Manatí - это консалтинговая компания из Коста-Рики, где мы создаем веб-сайты, стратегически разработанные для помощи организации в достижении целей.
Не пропустите проекты, новости и идеи от Manatí. Узнавайте о том, что мы делаем, подписывайтесь на нас в medium, twitter и facebook.
