nextjs netlify blog template

Template blogging next.js untuk netlify adalah boilerplate untuk membangun blog dengan hanya tumpukan netlify.

Ada beberapa boilerplate atau tutorial untuk kombinasi Next.js dan Netlify on GitHub. Sumber daya ini memiliki dokumentasi dan tutorial yang baik untuk memulai Next.js dan Netlify dengan cepat, tetapi mereka terlalu sederhana untuk membangun blog dengan fitur standar seperti penandaan.

Template blogging selanjutnya.

Demo

Menyebarkan lingkungan Anda dengan mengklik di sini:

Atau akses situs demo berikut:

Template Blog Next.js untuk Netlify

Fitur

• Tagging : mengatur konten dengan tag
• Penulis : Menampilkan nama penulis yang menulis posting
• Pagination : Batasi jumlah posting per halaman
• CMS : Dibangun dengan CMS untuk memungkinkan editor memodifikasi konten dengan cara tercepat
• SEO Dioptimalkan : Metadata bawaan seperti JSON-LD
• Kode pendek : Perpanjakan Penulisan Konten dengan Komponen Bereaksi Seperti Kode WordPress

Dependensi

• Naskah
• Next.js
• Netlify
• Mdx

Memulai

Untuk membuat blog Anda menggunakan templat, buka terminal Anda, cd ke dalam direktori yang ingin Anda buat aplikasi, dan jalankan perintah berikut:

 npx create-next-app your-blog --example "https://github.com/wutali/nextjs-netlify-blog-template"

Setelah itu, atur proyek Anda sebagai mengikuti blog Netlify:

Panduan langkah demi langkah: Menyebarkan Netlify

Kustomisasi

Template ini hanyalah templat dan boilerplate di mana pengguna dapat menyesuaikan apa pun setelah proyek dikloning dan dimulai. Instruksi berikut memperkenalkan titik kustomisasi umum seperti menambahkan metadata baru atau menerapkan tema desain baru.

Halaman penataan dengan tema yang disesuaikan

Semua kode sumber yang terkait dengan blog berada di bawah direktori komponen dan halaman. Anda dapat memodifikasinya secara bebas jika Anda ingin menerapkan tema desain Anda. Semua komponen menggunakan modul gaya-JSX dan CSS untuk menentukan gaya mereka, tetapi Anda dapat memilih perpustakaan penataan apa pun untuk merancang tema Anda.

Pohon direktori yang berisi kode sumber blog dijelaskan di bawah ini:

 meta: yaml files defining metadata like authors or tags
public: images, favicons and other static assets
src
├── assets: other assets using inside of components
├── components: pieces of components consisting of pages
├── content: mdx files for each post page
├── lib: project libraries like data fetching or pagination
└── pages: page components managing by Next.js

Mengorganisir konten berdasarkan kategori

Metadata kategori yang terkait dengan konten memiliki hubungan yang sama dengan yang penulis. Kemudian referensi implementasi ini untuk menambahkan metadata baru:

• Publik/admin/config.yml: Definisi metadata penulis untuk netlify CMS
• SRC/LIB/AUTHORS.TSX: Mengambil metadata dan mendefinisikan fungsi utilitas untuk komponen
• Meta/Penulis.YML: Konten Penulis dikelola oleh Netlify CMS
• SRC/KOMPONEN/POSTLAYOUT.TSX: Menampilkan konten penulis untuk setiap halaman

Anda mengerti bahwa mereka memiliki empat langkah untuk menambahkan metadata kategori pada proyek Anda setelah Anda membaca kode sumber di atas:

1. Tentukan metadata kategori pada file konfigurasi netlify di atas
2. Buat file kosong yang dinamai dengan categories.yml di bawah direktori meta
3. Buat modul baru untuk pengambilan kategori metadata
4. Tampilkan kategori metadata pada src/komponen/postlayout.tsx atau komponen lain yang Anda inginkan

Hanya itu yang harus Anda lakukan. Setelah itu, Anda dapat mengakses Netlify CMS dan membuat kategori baru kapan saja.

Pengaturan Lokal untuk Netlify CMS

Modifikasi config.yml dan index.html di bawah direktori publik/admin sebagai instruksi berikut:

Netlify CMS - Opsi Konfigurasi #Locale

Referensi

• Dokumentasi Netlify CMS
• Membangun Blog Markdown Dengan 9.4 Berikutnya dan Netlify
• Tema Hugo - Codex
• Template starter selanjutnya
• Membangun Blog dengan NextJs dan Netlify CMS
• Unicons

Lisensi

Mit