react-router - Gatsby JS : integrating cubeportfolio gallery and redrawing after onRouteUpdate

Question

我有一个旧的 php 网站使用我购买的主题，它使用 cubeportfolio 4.1 图片库...参见插件:here和 here .

我正在使用 gatsby 将站点重建为静态站点，并且不得不通过以下方式重建图库组件:

• 将所有静态 Assets (css、js 等)移动到我的 /static gatsby 文件夹
• 将所有必要的 js 和 css 链接硬连接到我的 html.jsx 文件中
• 从 graphql 获取我的图像 Assets 并使用非常基本的 React 组件重建图库

令人惊奇的是，cubeportfolio 图片库将所有图片填充并调整大小，形成一个完美的网格。鼠标悬停等也有效。

问题:

当我离开并返回主页(即更改路线)时，cubeportfolio 网格不会自行重绘!图像 Assets 只是转储到页面上，没有任何东西可以将它们洗牌到适当调整大小的元素的网格中。所以，目前我所知道的是，某处有一些 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
   }
}