astrowind Download - astrowind Quellcode herunterladen

astrowind

Andere Kategorien

1.0.0

Herunterladen

AstroWind

? Das meistgespielte und am meisten gespaltene Astro-Thema in den Jahren 2022 und 2023 . ?

AstroWind ist eine kostenlose Open-Source-Vorlage zum Erstellen Ihrer Website mit Astro 5.0 + Tailwind CSS . Bereit für den Start eines neuen Projekts und unter Berücksichtigung von Web-Best Practices entworfen.

✅ Produktionsreife Ergebnisse in PageSpeed Insights -Berichten.
✅ Integration mit Tailwind CSS, das den Dark-Modus und RTL unterstützt.
✅ Schneller und SEO-freundlicher Blog mit automatischem RSS-Feed , MDX- Unterstützung, Kategorien und Tags , Social Share , ...
✅ Bildoptimierung (mit neuen Astro Assets und Unpic für Universal Image CDN).
✅ Erstellung einer Projekt-Sitemap basierend auf Ihren Routen.
✅ Öffnen Sie Graph-Tags zum Teilen in sozialen Medien.
✅ Analytics integriert in Google Analytics und Splitbee-Integration.

Inhaltsverzeichnis

Demo
Demnächst: AstroWind 2.0 – Wir brauchen Ihre Vision!
Erste Schritte
- Projektstruktur
- Befehle
- Konfiguration
- Einsetzen
Häufig gestellte Fragen
Verwandte Projekte
Mitwirken
Danksagungen
Lizenz

Demo

? https://astrowind.vercel.app/

? Demnächst: AstroWind 2.0 – Wir brauchen Ihre Vision!

Wir begeben uns mit AstroWind 2.0 auf eine aufregende Reise und möchten, dass Sie ein Teil davon sind! Wir unternehmen derzeit die ersten Schritte zur Entwicklung dieser neuen Version und Ihre Erkenntnisse sind von unschätzbarem Wert. Nehmen Sie an der Diskussion teil und teilen Sie Ihr Feedback, Ihre Ideen und Vorschläge, um die Zukunft von AstroWind mitzugestalten. Lassen Sie uns gemeinsam AstroWind 2.0 noch besser machen!

Teilen Sie Ihr Feedback in unserer Diskussion!

Erste Schritte

AstroWind versucht, Ihnen einen schnellen Zugriff auf die Erstellung einer Website mit Astro 5.0 + Tailwind CSS zu ermöglichen. Es handelt sich um ein kostenloses Theme, das sich auf Einfachheit, bewährte Praktiken und hohe Leistung konzentriert.

Es wird nur sehr wenig Vanilla-Javascript verwendet, um grundlegende Funktionen bereitzustellen, sodass jeder Entwickler entscheiden kann, welches Framework (React, Vue, Svelte, Solid JS...) er verwenden möchte und wie er seine Ziele angeht.

In dieser Version unterstützt die Vorlage alle Optionen in der output , static , hybrid und server , aber der Blog funktioniert nur mit prerender = true . Wir arbeiten an der nächsten Version und wollen sie vollständig mit SSR kompatibel machen.

Projektstruktur

In der AstroWind -Vorlage sehen Sie die folgenden Ordner und Dateien:

 /
├── 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 sucht im Verzeichnis src/pages/ nach .astro oder .md Dateien. Jede Seite wird basierend auf ihrem Dateinamen als Route angezeigt.

Es gibt nichts Besonderes an src/components/ , aber dort platzieren wir gerne alle Astro/React/Vue/Svelte/Preact-Komponenten.

Alle statischen Assets wie Bilder können im Verzeichnis public/ abgelegt werden, wenn sie keiner Transformation bedürfen, oder im Verzeichnis assets/ wenn sie direkt importiert werden.

? ‍ Erfahrener Astronaut? Löschen Sie diese Datei README.md . Aktualisieren Sie src/config.yaml und den Inhalt. Viel Spaß!

Befehle

Alle Befehle werden im Stammverzeichnis des Projekts von einem Terminal aus ausgeführt:

Befehl	Aktion
`npm install`	Installiert Abhängigkeiten
`npm run dev`	Startet den lokalen Entwicklungsserver bei `localhost:4321`
`npm run build`	Erstellen Sie Ihren Produktionsstandort auf `./dist/`
`npm run preview`	Sehen Sie sich Ihren Build lokal in der Vorschau an, bevor Sie ihn bereitstellen
`npm run check`	Überprüfen Sie Ihr Projekt auf Fehler
`npm run fix`	Führen Sie Eslint aus und formatieren Sie Codes mit Prettier
`npm run astro ...`	Führen Sie CLI-Befehle wie `astro add` oder `astro preview` aus

Konfiguration

Grundlegende Konfigurationsdatei: ./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"

Design anpassen

Informationen zum Anpassen von Schriftfamilien, Farben oder weiteren Elementen finden Sie in den folgenden Dateien:

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

Einsetzen

Bereitstellung in der Produktion (manuell)

Sie können einen optimierten Produktions-Build erstellen mit:

npm run build

Jetzt kann Ihre Website bereitgestellt werden. Alle generierten Dateien befinden sich im Ordner dist , den Sie auf jedem beliebigen Hosting-Dienst Ihrer Wahl bereitstellen können.

Auf Netlify bereitstellen

Klonen Sie dieses Repository auf Ihrem eigenen GitHub-Konto und stellen Sie es auf Netlify bereit:

Bereitstellung in Vercel

Klonen Sie dieses Repository auf Ihrem eigenen GitHub-Konto und stellen Sie es auf Vercel bereit:

Häufig gestellte Fragen

Warum?

Mitwirken

Wenn Sie Ideen oder Vorschläge haben oder Fehler finden, können Sie gerne eine Diskussion oder ein Problem eröffnen oder eine Pull-Anfrage erstellen. Das wäre für uns alle sehr nützlich und wir würden gerne zuhören und Maßnahmen ergreifen.