Как использовать элемент документа и окна в astro JS?

Question

Я хочу использовать окно или документ для возврата пути к текущей странице по умолчанию. Astro.site.pathname работает неправильно или отсутствует соответствующая документация.

Мой вопрос: как правильно использовать документ или окно в Astro JS?

Заранее спасибо!

Answer 1

Вам нужно написать скрипт внутри <script is:inline></script>если вы хотите использовать такие вещи, как windowили же document. Таким образом, Astro не будет касаться вашего JS и включит его прямо в HTML. JS расположен в верхней части страницы между --- ---будет выполняться во время сборки.

Answer 2

Вы также можете получить доступ к текущему имени пути из компонента Astro, используяconst { pathname } = Astro.url.

Answer 3

Тег скрипта

<script>Тег, упомянутый в документации, достаточен для использования документа и окна, поскольку он предназначен для Javascript на стороне клиента.

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

Встроенный скрипт

<script is:inline>не рекомендуется, если он вам не нужен, потому что он предназначен для того, чтобы избежать связывания вашего скрипта, который редко требуется. И если вы используете компонент, содержащий этот сценарий, скажем, в 10 экземплярах (например, 10 карт), у вас будет 10 дублирований этого сценария, что приведет к снижению производительности при загрузке.

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

Пример

В этом примере показано, как создать несколько счетчиков на стороне клиента в чистом Astro, который похож на чистый html. Обратите внимание на использованиеdocumentвdocument.querySelectorAll(".card")

подробнее в 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.

– Документы

Вы можете использоватьis:inlineтакая директива в вашем.astroкомпоненты:

      ---
// static build only
---

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