栈（Stacks）

栈允许你创建内联占位符，供其他模板向其推送内容。例如，你可以为内联 JavaScript 创建一个栈，组件/局部模板就可以把 script 标签推送到其中。

栈从 [email protected] 开始提供。在使用之前，请确保更新包版本。

@stack 标签会创建一个具名栈（必须唯一），其他模板可以向其中推送内容。

components/layouts/main.edge


```edge
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @stack('js')
  </head>
  <body>
    <main>
      @stack('world')
      @!dialog()
    </main>
  </body>
</html>

你可以使用以下四个标签之一来与栈交互：@pushTo、@pushOnceTo、@pushToTop 和 @pushOnceToTop。

@pushTo 和 @pushToTop 你可以随意使用任意多次，每次都会把标签内的内容推送到栈中。

@pushOnceTo 标签会把内容推送到前面创建的栈中。由于你可能会在同一页面上多次使用该组件，我们使用 pushOnceTo 标签来确保 script 标签只被推送一次。否则，你最终会得到多个 script 标签。

compontents/modal.edge

<dialog x-data="alpineModal">
</dialog>

@pushOnceTo('js')
  <script>
    Alpine.data('alpineModal', function () {
      return {
        show() {},
        hide() {},
      }
    })
  </script>
@end

下面是输出的 HTML。

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      Alpine.data('alpineModal', function () {
        return {
          show() {},
          hide() {},
        }
      })
    </script>
  </head>
  <body>
    <main>
      <dialog x-data="alpineModal">
      </dialog>
    </main>
  </body>
</html>

现在让我们用一些内容来填充 world 栈：

compontents/hello-world.edge


@pushTo('world')
  <p>hello!</p>
@end

现在，我们的输出将如下所示：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      Alpine.data('alpineModal', function () {
        return {
          show() {},
          hide() {},
        }
      })
    </script>
  </head>
  <body>
    <main>
      <dialog x-data="alpineModal">
      </dialog>
      <p>hello!</p>
    </main>
  </body>
</html>

如果我们想在 <p> 上方添加内容，可以使用 @pushToTop 而不是 @pushTo。

compontents/hello-world.edge


@pushTo('world')
  <p>hello!</p>
@end

@pushToTop('world')
  <h1>hey!</h1>
@end

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      Alpine.data('alpineModal', function () {
        return {
          show() {},
          hide() {},
        }
      })
    </script>
  </head>
  <body>
    <main>
      <dialog x-data="alpineModal">
      </dialog>
      <p>hey!</p>
      <p>hello!</p>
    </main>
  </body>
</html>

结合 pushToTop 和 pushOnceTo，pushToTopOnce 会将内容仅推送到栈顶部一次，即使你多次使用它也是如此。