时间戳

首页 > 解决方案 > 无法在 WordPress 网站中使用 Barba js 进行简单的页面转换

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

问题描述

我正在为 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>

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

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

当我单击导航栏中的链接时，会出现leave控制台输出，但随后会再次加载整个页面，就好像 Barba 从未出现过一样。我从来没有看到enter输出。

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

我感谢您的帮助。

标签： phpwordpressbarbajs

解决方案

原来问题出在 Barba 中的默认超时。它设置为 2000 毫秒，而我的页面花费的时间比这更长。如果页面花费的时间超过了超时时间，Barba 就会放弃并刷新整个页面。

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

推荐阅读