nextjs blog theme

Starter blog yang dapat disesuaikan menggunakan:

• Next.js v15 (router halaman)
• Tailwind v3.x
• Netlify Visual Editor
• Dukungan MDX bawaan
• Termasuk desain modern dengan tema gelap & terang

Ambillah demo.

Klik di sini untuk menonton walkthrough template!

Daftar isi:

• Memulai
  • Menyiapkan secara lokal
  • Menggunakan Wizard
• Mengkonfigurasi blog
• Menambahkan posting baru
• Netlify Visual Editor
• Pengujian
  • Termasuk pengujian default
  • Menghapus renovasi

Memulai

---

Anda dapat memulai dengan proyek ini dengan dua cara: secara lokal atau menggunakan Wizard Setup.

Menyiapkan secara lokal

Jika Anda melakukannya secara lokal, mulailah dengan mengklik tombol Gunakan Template ini di GitHub. Ini akan membuat repositori baru dengan file template ini di akun GitHub Anda. Setelah selesai, klon repositori baru Anda dan navigasikan ke sana di terminal Anda.

Dari sana, Anda dapat menginstal dependensi proyek dengan menjalankan:

yarn install

Akhirnya, Anda dapat menjalankan proyek Anda secara lokal dengan:

yarn run dev

Buka browser Anda dan kunjungi http: // localhost: 3000, proyek Anda harus berjalan!

Menggunakan Penyihir Setup

Melalui Wisaya Pengaturan, Anda dapat membuat blog Anda dalam beberapa klik dan menggunakan Netlify.

Mengkonfigurasi blog

Konfigurasi didasarkan pada variabel lingkungan untuk memudahkan diintegrasikan dengan platform JamStack apa pun, seperti Netlify.

Berikut adalah variabel yang dapat Anda edit:

Variabel	Keterangan	Opsi
BLOG_NAME	Nama blog Anda, ditampilkan di bawah avatar
BLOG_TITLE	header utama ( h1 ) di halaman beranda
BLOG_FOOTER_TEXT	teks di footer
BLOG_THEME	Tema untuk diteruskan ke Tailwind	bawaan
BLOG_FONT_HEADINGS	font-family untuk semua judul HTML, dari h1 ke h6	sans-serif (default), serif, monospace
BLOG_FONT_PARAGRAPHS	keluarga font untuk semua elemen html lainnya	sans-serif (default), serif, monospace

Semua variabel Env dapat dikonfigurasi melalui wizard atau melalui pengaturan variabel lingkungan proyek. Anda dapat melakukan ini di Netlify Dashaboard Anda (Pengaturan Situs/Build & Deploy/Variabel Lingkungan/Lingkungan).

bejamas_env-vars_short.mp4

[ALT: Panduan video pengeditan env vars]

Jika menetapkan variabel lingkungan bukan secangkir teh Anda, default dapat diubah di utils/global-data.js . Anda juga dapat menghapus variabel dan informasi blog kode keras di mana variabel -variabel ini digunakan dalam basis kode.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS digunakan dalam tailwind-preset.js
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT digunakan di pages/index.js & pages/posts/[slug].js melalui objek globalData .

Menambahkan posting baru

Semua posting disimpan di /posts . Untuk membuat posting baru, buat file baru dengan ekstensi .mdx .

Karena posting ditulis dalam format MDX , Anda dapat melewati alat peraga dan komponen. Itu berarti Anda dapat menggunakan komponen React di dalam posting Anda untuk membuatnya lebih interaktif. Pelajari lebih lanjut tentang cara melakukannya di Dokumen MDX tentang Konten.

nextjs-bejamas-blog_new-post.mp4

[ALT: Panduan video menambahkan posting blog baru]

Netlify Visual Editor

Template ini dikonfigurasi untuk bekerja dengan pengeditan visual dan sumber konten GIT.

Kembangkan dengan Netlify Visual Editor secara lokal

Proses pengembangan yang khas adalah dimulai dengan bekerja secara lokal. Kloning repositori ini, lalu jalankan npm install di direktori root -nya.

Jalankan server pengembangan berikutnya.js:

cd nextjs-blog-theme
npm run dev

Instal Netlify Visual Editor CLI. Kemudian buka jendela Terminal baru di direktori proyek yang sama dan jalankan Netlify Visual Editor Dev Server:

npm install -g @stackbit/cli
stackbit dev

Ini menghasilkan URL editor visual Netlify Anda sendiri. Buka ini, daftar, atau masuk, dan Anda akan diarahkan ke editor visual Netlify untuk proyek baru Anda.

Langkah selanjutnya

Berikut adalah beberapa saran tentang apa yang harus dilakukan selanjutnya jika Anda baru mengenal Netlify Visual Editor:

• Pelajari Ikhtisar Netlify Visual Editor
• Periksa dokumentasi referensi editor visual netlify

Pengujian

Termasuk pengujian default

Kami telah menyertakan beberapa perkakas yang membantu kami mempertahankan templat ini. Template ini saat ini menggunakan:

• Renovate - Untuk secara teratur memperbarui ketergantungan kami

Jika tim Anda tidak tertarik dengan alat ini, Anda dapat menghapusnya dengan mudah!

Menghapus renovasi

Untuk menjaga proyek kami tetap mutakhir dengan dependensi, kami menggunakan alat yang disebut Renovate. Jika Anda tidak tertarik dengan alat ini, hapus file renovate.json dan lakukan itu ke cabang utama Anda.

Mendukung

Jika Anda terjebak di sepanjang jalan, dapatkan bantuan di forum dukungan kami.