Unduh astrowind - unduh kode sumber astrowind

astrowind

Kategori lainnya

1.0.0

Unduh

AstroWind

? Tema Astro yang paling banyak dibintangi & bercabang pada tahun 2022 & 2023 . ?

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

✅ Skor siap produksi dalam laporan PageSpeed Insights .
✅ Integrasi dengan Tailwind CSS yang mendukung mode Gelap dan RTL .
✅ Blog cepat dan ramah SEO dengan umpan RSS otomatis, dukungan MDX , Kategori & Tag , Berbagi Sosial , ...
✅ Optimasi Gambar (menggunakan Astro Assets dan Unpic baru untuk CDN gambar Universal).
✅ Pembuatan peta situs proyek berdasarkan rute Anda.
✅ Buka tag Grafik untuk berbagi media sosial.
✅ Analytics bawaan Google Analytics, dan integrasi Splitbee.

Daftar isi

Demo
Mendatang: AstroWind 2.0 – Kami Membutuhkan Visi Anda!
Memulai
- Struktur proyek
- Perintah
- Konfigurasi
- Menyebarkan
Pertanyaan yang Sering Diajukan
Proyek Terkait
Berkontribusi
Ucapan Terima Kasih
Lisensi

Demo

? https://astrowind.vercel.app/

? Mendatang: AstroWind 2.0 – Kami Membutuhkan Visi Anda!

Kami memulai perjalanan yang mengasyikkan dengan AstroWind 2.0 , dan kami ingin Anda menjadi bagian darinya! Saat ini kami sedang mengambil langkah pertama dalam mengembangkan versi baru ini dan wawasan Anda sangat berharga. Bergabunglah dalam diskusi dan bagikan masukan, ide, dan saran Anda untuk membantu membentuk masa depan AstroWind . Mari kita jadikan AstroWind 2.0 lebih baik lagi, bersama-sama!

Bagikan Masukan Anda dalam Diskusi Kami!

Memulai

AstroWind mencoba memberi Anda akses cepat untuk membuat situs web menggunakan Astro 5.0 + Tailwind CSS. Ini adalah tema gratis yang berfokus pada kesederhanaan, praktik baik, dan kinerja tinggi.

Sangat sedikit javascript vanilla yang digunakan hanya untuk menyediakan fungsionalitas dasar sehingga setiap pengembang memutuskan kerangka kerja mana (React, Vue, Svelte, Solid JS...) yang akan digunakan dan bagaimana mencapai tujuan mereka.

Dalam versi ini template mendukung semua opsi dalam konfigurasi output , static , hybrid dan server , tetapi blog hanya berfungsi dengan prerender = true . Kami sedang mengerjakan versi berikutnya dan bertujuan untuk membuatnya sepenuhnya kompatibel dengan SSR.

Struktur proyek

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

 /
├── 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 mencari file .astro atau .md di direktori src/pages/ . Setiap halaman diekspos sebagai rute berdasarkan nama filenya.

Tidak ada yang istimewa tentang src/components/ , tetapi di situlah kami ingin meletakkan komponen Astro/React/Vue/Svelte/Preact.

Aset statis apa pun, seperti gambar, dapat ditempatkan di direktori public/ jika tidak memerlukan transformasi apa pun, atau di direktori assets/ jika diimpor secara langsung.

? ‍ Astronot berpengalaman? Hapus file ini README.md . Perbarui src/config.yaml 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 `localhost:4321`
`npm run build`	Bangun situs produksi Anda ke `./dist/`
`npm run preview`	Pratinjau build Anda secara lokal, sebelum diterapkan
`npm run check`	Periksa proyek Anda apakah ada kesalahan
`npm run fix`	Jalankan Eslint dan format kode dengan Prettier
`npm run astro ...`	Jalankan perintah CLI seperti `astro add` , `astro preview`

Konfigurasi

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

Sesuaikan Desain

Untuk menyesuaikan kelompok Font, Warna, atau lebih banyak Elemen, lihat file berikut:

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

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 terapkan ke Vercel:

Pertanyaan yang Sering Diajukan

Mengapa?

Proyek terkait

TailNext - Template gratis menggunakan Next.js 14 dan Tailwind CSS dengan App Router baru.
Qwind - Template gratis untuk membuat website Anda menggunakan Qwik + Tailwind CSS.

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.