Astro Шаблон

Скачать

https://github.com/spaceappru/astro-template

Структура проекта

• Директорияbuild/ — собранный проект

  • Директорияcss/

    • custom-style.css — основной файл стилей
  • Директорияfonts/

    • …
  • Директорияimg/

    • …
  • Директорияjs/

    • general.js — основной файл скриптов
    • front-page.js — скрипты только для главной страницы
  • index.html
• Директорияpublic/ — публичные файлы

  • Директорияfonts/ — шрифты

    • Директорияiconly/ — иконочный шрифт

      • …
  • Директорияimg/ — изображения

    • …
  • Директорияjs/ — скомпилированные скрипты

    • general.js
    • front-page.js
• Директорияsrc/ — исходный код

  • Директорияcomponents/ — все компоненты

    • Layout.astro — главный layout
  • Директорияpages/ — все страницы

    • index.astro — главная страница
  • Директорияscripts/ — скрипты

    • Директорияentity/ — скрипты для компиляции

      • general.ts — общие скрипты для всех страниц
      • front-page.ts — скрипты для главной страницы
    • Директорияlib/ — отдельные скрипты

      • ymap3.ts — Яндекс.Карта
  • Директорияstyles/ — стили

    • global.css — глобальные стили
    • mixins.scss — SASS функции и миксины

Страницы

Страницы добавляются в директорию src/pages.

Код-стайл

Название файла страницы должно быть в нотациии kebab-case, т.е. в нижнем регистре с разделёнными словами через тире.

• Директорияsrc/ — исходный код

  • Директорияpages/ — все страницы

    • index.astro — главная страница
    • contacts.astro — страница контакты
    • product-detail.astro — детальная страница продукта

После сборки проекта, соответствующие html-файлы должны появиться в директории build.

• Директорияbuild/ — собранный проект

  • …
  • index.html — главная страница
  • contacts.html — страница контакты
  • product-detail.html — детальная страница продукта

Компоненты

Layout.astro

Основной компонент проекта, содержит базовый шаблон для всех страниц. В нём подключаются стили и скрипты, общие компоненты для всех страниц: Header, Footer и т.д.

• Директорияsrc/ — исходный код

  • Директорияcomponents/ — все компоненты

    • Layout.astro — главный layout

Компонент Layout.astro должен подключаться в каждой странице и быть родительским компонентом для остальных компонентов на странице.

index.astro

---
import Layout from "@components/Layout.astro";
import Hero from "@components/Hero.astro";
import Gallery from "@components/Gallery.astro";
import ContactForm from "@components/ContactForm.astro";
---

<Layout title="Главная страница" scripts={["front-page"]}>
  <Hero />
  <Gallery />
  <ContactForm />
</Layout>

Скрипты

Все скрипты пишутся в отдельных .ts файлах на языке TypeScript в директории src/scripts.

• Директорияsrc/ — исходный код

  • Директорияscripts/ — скрипты

    • Директорияentity/ — скрипты для компиляции

      • general.ts — общие скрипты для всех страниц
      • front-page.ts — скрипты для главной страницы
    • Директорияlib/ — отдельные скрипты

      • mask-phone.ts — макса телефона для input
      • ymap3.ts — Яндекс.Карта

Код-стайл

Название файла скрипта должно быть в нотациии kebab-case, т.е. в нижнем регистре с разделёнными словами через тире

Добавление скрипта на страницу

Скрипты для подключения на страницы добавляются в директорию src/scripts/entity.

После сборки проекта (или скриптов отдельно), каждый ts-файл из директории src/scripts/entity транспилируется в js-файл в директории public/js и build/js.

Для добавления скрипта на страницу нужно создать новый файл в директории src/scripts/entity

• Директорияsrc/ — исходный код

  • Директорияscripts/ — скрипты

    • Директорияentity/ — скрипты для компиляции

      • general.ts — общие скрипты для всех страниц
      • front-page.ts — скрипты для главной страницы
      • product-detail.ts — скрипт для новой страницы

Код-стайл

Название файла скрипта для страницы должно совпадать с названием Astro-файла страницы

И передать название (без расширения файла) в массив пропса scripts компонента Layout

product-detail.astro

---
import Layout from "@components/Layout.astro";
---

<Layout title="Новая страница" scripts={["product-detail"]}>
  ...
</Layout>

Вы можете подключить несколько скриптов, но рекомендуется к одной странице подключать только один скрипт.

Заметка

Скрипт general.ts не нужно подключать, он уже есть на каждой странице

Импорт скриптов

Скрипты для отдельных функций и компонентов добавляются в директорию src/scripts/lib и импортируются в скрипты src/scripts/entity.

• Директорияsrc/ — исходный код

  • Директорияscripts/ — скрипты

    • Директорияentity/ — скрипты для компиляции

      • front-page.ts — скрипты для главной страницы
    • Директорияlib/ — отдельные скрипты

      • mask-phone.ts — макса телефона для input

front-page.ts

import "@lib/mask-phone";