qwind

? angin Qwind

Qwind adalah template gratis dan sumber terbuka untuk membuat situs web Anda menggunakan Qwik + Tailwind CSS . Siap untuk memulai proyek baru dan dirancang dengan mempertimbangkan praktik terbaik.

Fitur

• ✅ Integrasi dengan Tailwind CSS yang mendukung mode Gelap .
• ✅ Skor siap produksi dalam laporan Lighthouse dan PageSpeed ​​Insights.
• ✅ Pengoptimalan gambar dan pengoptimalan Font .

Daftar isi

• Demo
• Memulai
  • Struktur proyek
  • Perintah
  • Konfigurasi
  • Menyebarkan
• Peta jalan
• Berkontribusi
• Ucapan Terima Kasih
• Lisensi

Demo

? https://qwind.pages.dev/

Memulai

Proyek ini menggunakan Qwik dengan QwikCity. QwikCity hanyalah seperangkat alat tambahan di atas Qwik untuk mempermudah pembuatan situs lengkap, termasuk perutean berbasis direktori, tata letak, dan banyak lagi.

Struktur proyek

Di dalam template Qwind , Anda akan melihat folder dan file berikut:

 /
├── 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 : Menyediakan perutean berbasis direktori, yang dapat mencakup hierarki file tata letak layout.tsx , dan file index.tsx sebagai halaman. Selain itu, file index.ts adalah titik akhir. Silakan lihat dokumen perutean untuk info lebih lanjut.

• src/components : Direktori yang direkomendasikan untuk komponen.

• public : Aset statis apa pun, seperti gambar, dapat ditempatkan di direktori publik. Silakan lihat direktori publik Vite untuk informasi lebih lanjut.

Pakar qwik berpengalaman? Hapus berkas ini. Perbarui config.mjs dan isinya. Selamat bersenang-senang!

Perintah

Semua perintah dijalankan dari root proyek, dari terminal:

Memerintah	Tindakan
npm install	Menginstal dependensi
npm run dev	Memulai server pengembang lokal di 127.0.0.1:5173/
npm run build	Bangun situs produksi Anda ke ./dist/
npm run preview	Pratinjau build Anda secara lokal, sebelum diterapkan
npm run fmt	Format kode dengan Prettier
npm run lint	Jalankan Eslint
npm run qwik ...	Jalankan perintah CLI seperti qwik add , qwik build

Konfigurasi

File konfigurasi dasar: ./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
} ;

Menyebarkan

Penerapan ke produksi (manual)

Anda dapat membuat build produksi yang dioptimalkan dengan:

npm run build

Sekarang, situs web Anda siap untuk diterapkan. Semua file yang dihasilkan terletak di folder dist , yang mana Anda dapat menyebarkan folder tersebut ke layanan hosting apa pun yang Anda inginkan.

Terapkan ke Netlify

Kloning repositori ini di akun GitHub Anda dan terapkan ke Netlify:

Terapkan ke Vercel

Kloning repositori ini di akun GitHub Anda dan sebarkan ke Vercel:

Peta jalan

Basis

• Buat utilitas untuk menghasilkan tautan permanen yang disesuaikan dengan domain dan nama jalur dasar.
• Sederhanakan cara mengoptimalkan gambar.
• Buat komponen untuk membuat SEO lebih sederhana dan intuitif.
• Buat blog yang dapat dikonfigurasi dengan kategori, tag, dan penulis menggunakan MDX.
• Tambahkan halaman yang lebih sering digunakan (Portofolio, Layanan, Kontak, Dokumen ...).
• Temukan atau buat perpustakaan agar lebih banyak sumber ikon tersedia.
• Refactor beberapa kode yang belum mengikuti konvensi Qwik.

Canggih

• Raih skor Kecepatan Laman Google 100% sempurna.
• Sisipkan widget contoh javascript kompleks di halaman beranda untuk mendemonstrasikan fitur Qwik.
• Buat backend admin ilustratif kecil.

Berkontribusi

Jika Anda mempunyai ide, saran, atau menemukan bug, jangan ragu untuk membuka diskusi, masalah, atau membuat permintaan tarik. Itu akan sangat bermanfaat bagi kita semua dan kita akan dengan senang hati mendengarkan dan mengambil tindakan.

Ucapan Terima Kasih

Awalnya dibuat oleh onWidget dan dikelola oleh komunitas kontributor.

Lisensi

Qwind dilisensikan di bawah lisensi MIT — lihat file LISENSI untuk detailnya.