barba.js (pjax) を使ってみる

1. このページの目的

barba.js v2 (pjax) を使ってみる。

（PJAX は、ドキュメント通りに書いても動かないのでやめた。）

2. デモ

この部分は切り替わらない。

最初のページです。

この部分の内容は切り替わる。

foo.php

3. このページで使っているコード

barba の読み込み

<script defer src="https://unpkg.com/@barba/core"></script>

ページの表示エリア

<div data-barba="wrapper">
  <p>この部分は切り替わらない。</p>
  <div data-barba="container" data-barba-namespace="home">
    <h3>最初のページです。</h3>
    <p>この部分の内容は切り替わる。</p>
    <p><a href="./foo.php">./foo.php</a></p>
  </div>
</div>

barba の実行

<script>
barba.init({
  // ...
})
</script>

foo.php

<div data-barba="wrapper">
  <div data-barba="container" data-barba-namespace="sample-page">
    <h3>foo.php</h3>
    <p><a href=".">最初のページへ</a></p>
  </div>
</div>

4. PHPの場合のコード例

ヘッダ・フッタ部分はどのページでも共通なので template.php に任せ、各ページの php ファイルにはメインとなるコンテンツだけを書くような構成にする。

template.php

<?php
if (!isset($content)) {
  exit();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  ...
</head>
<body>
  <header>
    <h1>...</h1>
  </header>

  <?php echo $content; ?>

  <footer>
    ...
  </footer>
  <script defer src="https://unpkg.com/@barba/core"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
  barba.init({
    // ...
  });
});
</body>
</html>

index.php

<?php
$content = <<<EOT
<main data-barba="container" data-barba-namespace="home">
  <h3>最初のページです。</h3>
  <p>この部分の内容は切り替わる。</p>
  <p><a href="./foo.php">foo.php</a></p>
</main>
EOT;
require __DIR__ . '/template.php';

foo.php

<?php
$content = <<<EOT
<main data-barba="container" data-barba-namespace="home">
  <h3>foo.php ページです。</h3>
  <p>この部分の内容は切り替わる。</p>
  <p><a href=".">Home</a></p>
</main>
EOT;
require __DIR__ . '/template.php';

5. メモ

CWV への影響

6. 参考