如何在astro JS中使用文档和窗口元素？

Question

我想使用窗口或文档返回当前页面的路径默认 Astro.site.pathname 无法正常工作或没有正确的文档。

我的问题是如何在 Astro JS 中正确使用文档或窗口？

提前致谢！

Answer 1

如果您想使用 window 或 document 等内容，则需要在 中编写脚本。这样 Astro 就不会接触你的 JS 并将其直接包含在 HTML 中。位于页面顶部 --- --- 之间的 JS 将在构建时执行。

Answer 2

您还可以使用 const { pathname } = Astro.url 从 Astro 组件访问当前路径名。

Answer 3

文档中提到的脚本标签

https://docs.astro.build/en/guides/client-side-scripts/#using-script-in -astro

内联脚本

如果您不需要

https://docs.astro.build/en/guides/ client-side-scripts/#script-bundling

示例

此示例展示了如何在纯 Astro 中创建多个客户端计数器，这与纯 html 类似。请注意 document.querySelectorAll(".card") 中 document 的用法，

更多详细信息请参见 https://docs.astro.build/en/core-concepts/astro-components/

---
//Astro Front matter => Javascript
---
<!-- html -->

<!-- style -->

<!-- script -->
<script>
    console.log("int cards")
    const cards = document.querySelectorAll(".card")
    cards.forEach(card => {
        const plus = card.querySelector('button.plus')
        const minus = card.querySelector('button.minus')
        const value = card.querySelector(".value")
        plus.onclick  = ()=>{value.textContent = parseInt(value.textContent) + 1}
        minus.onclick = ()=>{value.textContent = parseInt(value.textContent) - 1}
    });
</script>

这里是完整示例存储库项目的链接：

https://github.com/MicroWebStacks/astro-examples#04_client-counters

和这里指向该存储库的直接 StackBlitz 项目的链接

https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/04_client-counters

Answer 4

默认情况下，Astro 将处理、优化和捆绑它在页面上看到的任何 和 标签。您可以使用 is:inline 指令选择退出此行为。

– Docs

您可以使用 is:inline 指令在您的 .astro 组件中如下所示：

---
// static build only
---

<script is:inline>
    console.log(document, window)
</script>