astro ink

Astro Ink adalah tema minimal yang dibuat untuk melayani kebutuhan blog berbasis penurunan harga minimalis. Ini dikirimkan dengan hampir semua komponen Astro dasar yang mungkin Anda perlukan saat membuat blog pribadi yang ringan, berperforma tinggi, yang berfokus pada pengiriman lebih sedikit Javascript secara default.

Ini sangat terinspirasi oleh tema Tinta Hugo dan berusaha untuk tetap ringan, sekaligus memberikan dasar untuk blog yang indah dan minimalis.

Fitur

• Minimal, Renyah, Penurunan Harga-Blog Siap selalu diperbarui ke versi terbaru Astro (saat ini rilis 2.x ).
• Svelte Ready - Dalam upayanya untuk tetap ringan, berperforma tinggi, dan lebih mudah didekati dari POV Astro, Svelte digunakan untuk komponen interaktif seperti pengalih tema
• Modular - Strukturnya sangat modular, dengan komponen hanya melakukan satu pekerjaan, dan satu pekerjaan dengan baik.
• Koleksi Konten Astro 2.0 + Halaman Dinamis - Siap dengan Next.js seperti halaman dinamis, untuk mendukung sistem klasifikasi berbasis tag dengan hasil paginasi, semuanya dapat dikonfigurasi
• Mode Gelap & Kode Warna - Mendukung mode gelap, dan 6+ mode warna yang dipilih menggunakan tailwind.config.js . Anda dapat meneruskan THEME_KEY dengan skrip/perintah dev atau build , misalnya: THEME_KEY=purpleheart astro build/dev untuk mengubah tema warna yang digunakan. Semua tema yang tersedia dapat ditemukan di tailwind.theme.config.js. Untuk menyesuaikan bagian blog, tambahkan kelas prose-{color} Tailwind Typography seperti yang dirujuk di sini
• Netlify CMS - Tambahkan/Edit/Perbarui semua posting di direktori /blog dengan mengunjungi your-site.netlify.com/admin contoh: astro-ink.netlify.app/admin dengan kredensial Netlify Anda. Dibutuhkan Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration ) dan Git Gateway (https://app.netlify.com/sites/your-site/settings/identity #layanan) diaktifkan.
• Postingan Mendatang (dengan Tindakan Github) - Buat postingan di direktori /src/drafts dengan date mendatang dalam format YYYY-MM-DD , dan biarkan Github Action yang dibuat khusus menangani penerbitan otomatis pada tanggal yang Anda tentukan. Anda dapat mengonfigurasi interval pemeriksaan di Github Action.
• Pencarian Sisi Klien - Izinkan pengguna Anda membuka postingan blog Anda dengan cepat dengan fitur pencarian sisi klien. Lunr.js
• Lihat prestasi counter. Redis/Upstash Redis - Konfigurasikan host Redis Anda, tempatkan URL koneksinya di konsol penyedia hosting Anda (Vercel, Netlify, dll.) atau dalam file .env (pengembangan lokal), hapus komentar pada kode koneksi di sini dan terapkan. Situs Anda didukung dengan penghitung tampilan dinamis. Lihat .env.example untuk memahami berbagai nilai lingkungan yang perlu Anda konfigurasi.
• Halaman Media dengan dukungan saluran YT - Tampilkan konten saluran YT Anda dengan mudah di halaman media hanya dengan memasukkan id saluran Anda di konstanta ytChannelId file konfigurasi. Secara opsional, nonaktifkan thumbnail gambar dari daftar video saluran YT Anda dengan menyetel USE_MEDIA_THUMBNAIL ke false .
• Kartu Penulis - Tambahkan kartu Penulis berbasis postingan atau seluruh situs dengan mudah, yang menyertakan tombol ikuti Twitter dengan menyetel USE_AUTHOR_CARD ke true di dalam file konfigurasi.
• Hamparan gambar bertema - Secara opsional, Anda dapat mengaktifkan overlay, yang dapat menambahkan gradien bertema bagus di atas gambar postingan Anda dengan menyetel USE_POST_IMG_OVERLAY ke true di dalam file konfigurasi.

Bagaimana memulainya?

Cukup kloning templat ini , dan mulailah bekerja dari klon Anda. Anda memiliki semua perintah NPM umum seperti dev , build , dll. Lihat package.json untuk melihat daftar semua perintah yang tersedia.

Catatan: Gunakan npx degit one-aalam/astro-ink untuk mengkloning template tanpa riwayat git apa pun

Catatan: Templat ini menghasilkan keluaran server (siap SSR) secara default. Jika Anda ingin bangunan static

• ubah output menjadi static dari server di astro.config.js
• hapus adapter: vercel()
• hapus API penghitung tampilan
• setel USE_VIEW_STATS ke false di dalam config.ts

Catatan: Sebelum menjalankan npm run dev untuk pertama kalinya -

• buat file .env dengan menjalankan mv .env.example .env (jika Anda menggunakan distro Linux atau Mac)
• atur variabel SITE_URI sebagai SITE_URI=http://localhost:4321 ( di mana 4321 adalah port tempat proyek Anda berjalan )

Dibangun dengan Tinta Astro

• jamesperkins.dev - Situs pribadi pengembang, instruktur YouTube James R Perkins
• highlandcows.github.io Blog pribadi Nick Jacob

tahu situs yang dibangun dengan Astro Ink? Beri tahu saya di Twitter

Ingin belajar Astro sambil membuat Tinta?

Tema ini awalnya dibangun dengan versi alfa pertama, dan kemudian versi beta dari Astro Framework. Jika Anda baru memulai dengan Astro , Anda sebenarnya dapat mempelajari Astro sambil membangun tema ini dengan mengikuti serangkaian blog yang saya tulis yang mengajarkan Anda dasar-dasar Astro!

Kunjungi aalam.in/blog dan ketahui

• Cara mengatur Astro dan menjalankannya dengan default penting untuk penataan gaya, pembuatan prototipe, dan penerapan tambahan
• Mengelola komponen presentasi dan membuat halaman Astro
• Memasukkan data lokal dan jarak jauh ke halaman Astro
• Menempatkan interaktivitas di tempat yang benar-benar tidak dapat Anda lakukan tanpanya di Astro
• Membuat halaman dinamis berbasis data dan hasil paginasi di Astro
• Tulis konten situs Astro Anda dengan CMS berbasis Git