Question

我正在为WP开发自定义主题，需要进行类似于此网站https://www.instrument.com/

的页面转换

Barba.js似乎是用于这些目的的完美解决方案。但是，整个DOM树总是刷新，而不仅仅是内容。

这就是我所拥有的：

header.php

<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <?php wp_head();?>
  </head>
  <body data-barba="wrapper"
    <?php
      if ( get_field('is_dark_theme') ) {
        body_class( 'bg-dark text-light' );
      } else {
        body_class();
      }
      ?>
  >

  <nav>
    ...
  </nav>

  <main data-barba="container" data-barba-namespace="home">

footer.php

    </main>
  </div>

  <?php wp_footer();?>

  </body>
</html>

在body标记关闭之前注入的主脚本文件中，我具有以下内容：

(function () {
  barba.init({
    transitions: [{
      name: 'default-transition',
      leave() {
        console.log('leave');
      },
      enter() {
        console.log('enter');
      }
    }]
  });
})();

当我单击导航栏中的链接时，会显示一个leave控制台输出，但随后整个页面会重新加载，就像Barba从未在那儿一样。我从没看到enter的输出。

首先可以将Barba与WP一起使用吗？如果是这样，我在做什么错了？

感谢您的帮助。

Answer 1

结果发现问题出在Barba中的the default timeout。设置为2000毫秒，我的页面花费了更长的时间。如果页面花费的时间超过超时时间，Barba会放弃并刷新整个页面。

我将超时设置为更高的值，并且效果很好。

无法在WordPress网站中使用Barba js进行简单的页面转换

1 个答案: