qwind

? Qwind

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

Merkmale

• ✅ Integration mit Tailwind CSS, das den Dunkelmodus unterstützt.
• ✅ Produktionsreife Ergebnisse in Lighthouse- und PageSpeed ​​Insights-Berichten.
• ✅ Bildoptimierung und Schriftoptimierung .

Inhaltsverzeichnis

• Demo
• Erste Schritte
  • Projektstruktur
  • Befehle
  • Konfiguration
  • Einsetzen
• Roadmap
• Mitwirken
• Danksagungen
• Lizenz

Demo

? https://qwind.pages.dev/

Erste Schritte

Dieses Projekt verwendet Qwik mit QwikCity. QwikCity ist lediglich ein zusätzlicher Satz von Tools zu Qwik, der die Erstellung einer vollständigen Website, einschließlich verzeichnisbasierter Weiterleitung, Layouts und mehr, erleichtert.

Projektstruktur

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

 /
├── adaptors/
|   └── static/
|       └── vite.config.ts
├── public/
│   ├── favicon.svg
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── images/
|   |   └── styles/
|   |       └── global.css
│   ├── components/
│   │   ├── atoms/
│   │   ├── core/
│   │   ├── icons/
|   |   └── widgets/
|   |       ├── Hero.tsx
|   |       ├── Features.tsx
|   |       └── ...
│   ├── content/
│   |   └── blog/
│   |       ├── post-slug-1.md
│   |       ├── post-slug-2.md
│   |       └── ...
│   ├── routes/
│   |   ├── blog/
│   |   ├── index.tsx
|   |   ├── layout.tsx
|   |   ├-- service-worker.ts
│   |   └-- ...
│   ├── config.mjs
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   └── root.tsx
├── package.json
└── ...

• src/routes : Stellt das verzeichnisbasierte Routing bereit, das eine Hierarchie von layout.tsx Layoutdateien und eine index.tsx Datei als Seite umfassen kann. Darüber hinaus sind index.ts Dateien Endpunkte. Weitere Informationen finden Sie in den Routing-Dokumenten.

• src/components : Empfohlenes Verzeichnis für Komponenten.

• public : Alle statischen Assets, wie z. B. Bilder, können im öffentlichen Verzeichnis abgelegt werden. Weitere Informationen finden Sie im öffentlichen Vite-Verzeichnis.

Erfahrener Qwik-Experte? Löschen Sie diese Datei. Aktualisieren Sie config.mjs und Inhalte. 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 unter 127.0.0.1:5173/
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 fmt	Formatieren Sie Codes mit Prettier
npm run lint	Führen Sie Eslint aus
npm run qwik ...	Führen Sie CLI-Befehle wie qwik add und qwik build aus

Konfiguration

Grundlegende Konfigurationsdatei: ./src/config.mjs

 export const SITE = {
  name : "Example" ,

  origin : "https://example.com" ,
  basePathname : "/" , // Change this if you need to deploy to Github Pages, for example
  trailingSlash : true , // Generate permalinks with or without "/" at the end
} ;

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:

Roadmap

Base

• Erstellen Sie Dienstprogramme, um Permalinks zu generieren, die auf die Domäne und den Basispfadnamen zugeschnitten sind.
• Vereinfachen Sie die Optimierung von Bildern.
• Erstellen Sie eine Komponente, um SEO einfacher und intuitiver zu gestalten.
• Erstellen Sie mit MDX konfigurierbare Blogs mit Kategorien, Tags und Autoren.
• Fügen Sie häufiger verwendete Seiten hinzu (Portfolio, Dienste, Kontakt, Dokumente ...).
• Suchen oder erstellen Sie eine Bibliothek, um mehr Symbolquellen zur Verfügung zu haben.
• Refaktorieren Sie Code, der noch nicht den Qwik-Konventionen entspricht.

Fortschrittlich

• Erreichen Sie einen perfekten Google Page Speed-Score von 100 %.
• Fügen Sie ein komplexes Javascript-Beispiel-Widget auf der Startseite ein, um die Qwik-Funktionen zu demonstrieren.
• Erstellen Sie ein kleines, anschauliches Admin-Backend.

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.

Danksagungen

Ursprünglich von onWidget erstellt und von einer Community von Mitwirkenden gepflegt.

Lizenz

Qwind ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der LIZENZ-Datei.