Gatsby JS: интеграция галереи cubeportfolio и перерисовка после onRouteUpdate

Question

У меня был старый php-сайт, использующий купленную мной тему, в которой используется галерея изображений cubeportfolio 4.1 ... см. Плагин: здесь и здесь .

Я перестраиваю сайт как статический сайт с помощью gatsby, и мне пришлось перестраивать компонент галереи путем:

• перемещения всех статических ресурсов (css, js и т. Д.) В мой/static папка gatsby
• жестко соединяет все необходимые ссылки js и css, как в моем html.jsx файле
• , извлекает мои графические ресурсы из graphql и перестраивает галерею с очень простыми компонентами реакции

Удивительно, но это работает, и галерея изображений cubeportfolio заполняет и изменяет размеры всех изображений в идеальную сетку.Также работают мыши и пр.

проблема:

, когда я ухожу и возвращаюсь на домашнюю страницу (т. Е. Меняю маршруты), сетка cubeportfolio не перерисовываетсясам!Активы изображений просто сбрасываются на страницу, и ничто не мешает им перетасовать их в сетку элементов с соответствующим измененным размером.Итак, все, что я знаю на данный момент, это то, что есть где-то немного javascript, который должен быть повторно запущен, но это не .

Гуглить, янашел фрагмент и попытался добавить следующее к gatsby-browser.js:

exports.onRouteUpdate = () => {
   // force cubeportfolio to redraw
   $(window).trigger('resize.cbp');
}

Это не сработало.Любая помощь приветствуется.

Answer 1

ОК, разобрался.Я нашел код, который использовала старая тема для настройки cubeportfolio.Он был в одном из статических js-файлов, поэтому я думаю, что он был загружен один раз при запуске, а затем последующие возвраты на страницу с галереей не обязательно перезагружали js-файл.

Исправлено - поднять этот коди переместите его на gatsby-browser.js:

exports.onRouteUpdate = ({location}) => {
   // force cubeportfolio to redraw
   if (location.pathname === '/') { // or path to whatever page has cubeportfolio
     $('#grid-container').cubeportfolio({...}); // pass needed options
   }
}