Загрузка astrowind - Загрузка исходного кода astrowind

astrowind

Другие категории

1.0.0

Скачать

АстроВинд

? Самая популярная и разветвленная тема Astro в 2022 и 2023 годах . ?

AstroWind — это бесплатный шаблон с открытым исходным кодом, позволяющий создать ваш веб-сайт с использованием Astro 5.0 + Tailwind CSS . Готов начать новый проект и разработан с учетом лучших веб-практик.

✅ Готовые к использованию оценки в отчетах PageSpeed Insights .
✅ Интеграция с Tailwind CSS, поддерживающей темный режим и RTL .
✅ Быстрый и оптимизированный для SEO блог с автоматическим RSS-каналом , поддержкой MDX , категориями и тегами , социальным обменом , ...
✅ Оптимизация изображений (с использованием новых Astro Assets и Unpic для CDN универсальных изображений).
✅ Генерация карты сайта проекта на основе ваших маршрутов.
✅ Теги Open Graph для обмена в социальных сетях.
✅Встроенная аналитика Google Analytics и интеграция Splitbee.

Оглавление

Демо
Скоро: AstroWind 2.0 – нам нужно ваше видение!
Начиная
- Структура проекта
- Команды
- Конфигурация
- Развертывать
Часто задаваемые вопросы
Связанные проекты
Содействие
Благодарности
Лицензия

Демо

? https://astrowind.vercel.app/

? Скоро: AstroWind 2.0 – нам нужно ваше видение!

Мы отправляемся в захватывающее путешествие вместе с AstroWind 2.0 , и мы хотим, чтобы вы стали его частью! В настоящее время мы делаем первые шаги в разработке этой новой версии, и ваши идеи неоценимы. Присоединяйтесь к обсуждению и делитесь своими отзывами, идеями и предложениями, которые помогут сформировать будущее AstroWind . Давайте вместе сделаем AstroWind 2.0 еще лучше!

Поделитесь своим мнением в нашем обсуждении!

Начиная

AstroWind пытается предоставить вам быстрый доступ к созданию веб-сайта с использованием Astro 5.0 + Tailwind CSS. Это бесплатная тема, ориентированная на простоту, передовой опыт и высокую производительность.

Очень мало ванильного JavaScript используется только для обеспечения базовой функциональности, поэтому каждый разработчик решает, какую среду (React, Vue, Svelte, Solid JS...) использовать и как достичь своих целей.

В этой версии шаблон поддерживает все параметры output конфигурации: static , hybrid и server , но блог работает только с prerender = true . Мы работаем над следующей версией и стремимся сделать ее полностью совместимой с SSR.

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

Внутри шаблона AstroWind вы увидите следующие папки и файлы:

 /
├── public/
│   ├── _headers
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── favicons/
│   │   ├── images/
│   │   └── styles/
│   │       └── tailwind.css
│   ├── components/
│   │   ├── blog/
│   │   ├── common/
│   │   ├── ui/
│   │   ├── widgets/
│   │   │   ├── Header.astro
│   │   │   └── ...
│   │   ├── CustomStyles.astro
│   │   ├── Favicons.astro
│   │   └── Logo.astro
│   ├── content/
│   │   ├── post/
│   │   │   ├── post-slug-1.md
│   │   │   ├── post-slug-2.mdx
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   │   ├── MarkdownLayout.astro
│   │   └── PageLayout.astro
│   ├── pages/
│   │   ├── [...blog]/
│   │   │   ├── [category]/
│   │   │   ├── [tag]/
│   │   │   ├── [...page].astro
│   │   │   └── index.astro
│   │   ├── index.astro
│   │   ├── 404.astro
│   │   ├-- rss.xml.ts
│   │   └── ...
│   ├── utils/
│   ├── config.yaml
│   └── navigation.js
├── package.json
├── astro.config.ts
└── ...

Astro ищет файлы .astro или .md в каталоге src/pages/ . Каждая страница отображается как маршрут на основе имени ее файла.

В src/components/ нет ничего особенного, но мы предпочитаем размещать туда любые компоненты Astro/React/Vue/Svelte/Preact.

Любые статические ресурсы, например изображения, можно поместить в каталог public/ если они не требуют какого-либо преобразования, или в каталог assets/ если они импортированы напрямую.

? ‍ Опытный космонавт? Удалите этот файл README.md . Обновите src/config.yaml и его содержимое. Веселиться!

Команды

Все команды запускаются из корня проекта, из терминала:

Команда	Действие
`npm install`	Устанавливает зависимости
`npm run dev`	Запускает локальный сервер разработки по адресу `localhost:4321`
`npm run build`	Создайте свой производственный сайт в `./dist/`
`npm run preview`	Предварительный просмотр сборки локально перед развертыванием
`npm run check`	Проверьте свой проект на наличие ошибок
`npm run fix`	Запускайте Eslint и форматируйте коды с помощью Prettier
`npm run astro ...`	Запускайте команды CLI, такие как `astro add` , `astro preview`

Конфигурация

Базовый файл конфигурации: ./src/config.yaml

 site :
  name : ' Example '
  site : ' https://example.com '
  base : ' / ' # Change this if you need to deploy to Github Pages, for example
  trailingSlash : false # Generate permalinks with or without "/" at the end

  googleSiteVerificationId : false # Or some value,

# Default SEO metadata
metadata :
  title :
    default : ' Example '
    template : ' %s — Example '
  description : ' This is the default meta description of Example website '
  robots :
    index : true
    follow : true
  openGraph :
    site_name : ' Example '
    images :
      - url : ' ~/assets/images/default.png '
        width : 1200
        height : 628
    type : website
  twitter :
    handle : ' @twitter_user '
    site : ' @twitter_user '
    cardType : summary_large_image

i18n :
  language : en
  textDirection : ltr

apps :
  blog :
    isEnabled : true # If the blog will be enabled
    postsPerPage : 6 # Number of posts per page

    post :
      isEnabled : true
      permalink : ' /blog/%slug% ' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
      robots :
        index : true

    list :
      isEnabled : true
      pathname : ' blog ' # Blog main path, you can change this to "articles" (/articles)
      robots :
        index : true

    category :
      isEnabled : true
      pathname : ' category ' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
      robots :
        index : true

    tag :
      isEnabled : true
      pathname : ' tag ' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
      robots :
        index : false

    isRelatedPostsEnabled : true # If a widget with related posts is to be displayed below each post
    relatedPostsCount : 4 # Number of related posts to display

analytics :
  vendors :
    googleAnalytics :
      id : null # or "G-XXXXXXXXXX"

ui :
  theme : ' system ' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"

Настроить дизайн

Чтобы настроить семейства шрифтов, цвета или другие элементы, обратитесь к следующим файлам:

src/components/CustomStyles.astro
src/assets/styles/tailwind.css

Развертывать

Развертывание в рабочей среде (вручную)

Вы можете создать оптимизированную производственную сборку с помощью:

npm run build

Теперь ваш сайт готов к развертыванию. Все сгенерированные файлы расположены в папке dist , которую вы можете развернуть на любом хостинге, который вы предпочитаете.

Развертывание в Netlify

Клонируйте этот репозиторий в свою учетную запись GitHub и разверните его в Netlify:

Развертывание в Верселе

Клонируйте этот репозиторий в свою учетную запись GitHub и разверните его в Vercel:

Часто задаваемые вопросы

Почему?

Связанные проекты

TailNext — бесплатный шаблон с использованием Next.js 14 и Tailwind CSS с новым App Router.
Qwind — бесплатный шаблон для создания вашего веб-сайта с использованием Qwik + Tailwind CSS.

Содействие

Если у вас есть какие-либо идеи, предложения или вы обнаружили какие-либо ошибки, не стесняйтесь открыть обсуждение, задать вопрос или создать запрос на включение. Это было бы очень полезно для всех нас, и мы были бы рады выслушать и принять меры.