WordPress gibi düşük kodlu araçlar, blog oluşturma sürecini basitleştirir. Önceden hazırlanmış bir tema kullanabilir ve birkaç saat içinde blog gönderileri yazmaya başlayabilirsiniz. Kodunuz üzerinde daha fazla kontrole sahip olmak ve biraz boş zamanınız olmasını istiyorsanız, blogunuzu sıfırdan oluşturmak daha iyidir. Süreci basitleştirmek için Next.js gibi bir çerçeve bile kullanabilirsiniz.

İndirim gönderilerini işleyen basit bir Next.js blogunun nasıl oluşturulacağını öğrenin.

Next.js Projesi Oluşturma

Next.js, uygulama oluşturma şeklinizi basitleştiren bir React çerçevesidir. Kurulumdan hemen sonra kod yazmaya başlamanıza izin veren birçok araç ve yapılandırmayı kutudan çıkarır çıkarmaz sağlar.

Next.js'yi kullanmaya başlamanın en basit yolu, bir terminalde create-next-app komutunu çalıştırmaktır:

npx yaratmak-Sonraki-app markdown-blog

Bu komut, başlamak için gerekli tüm dosyaları içeren bir Next.js projesi oluşturur.

Her şeyden önce, temizleyin index.js dosya şöyle görünecek:

içe aktarmak KAFA itibaren "sonraki / kafa"
içe aktarmak stiller itibaren '../styles/Home.module.css'





instagram viewer

ihracatvarsayılanişlevEv() {
geri dönmek (
<div className={styles.container}>
<KAFA>
<başlık>Sonraki Uygulamayı Oluştur</title>
<meta adı="Tanım" içerik="Create next app tarafından oluşturuldu" />
<bağlantı rel="simge" href="/favicon.ico" />
</Head>
</div>
 )
}

Markdown Blog Gönderileri Oluşturun

Blog oluşturulacak işaretleme dosyaları yerel olarak proje klasöründe saklanır. Bu nedenle, kökte adlı yeni bir klasör oluşturun. içerik dosyaları saklamak için. Bu klasörde, adlı yeni bir dosya oluşturun. create-active-link-nextjs.md ve şunları ekleyin:


başlık: Nasıl Yapılır yaratmak aktif bağlantıiçinde Sonrakijs
açıklama: useRouter() kullanarak etkin bağlantıları özelleştirme
yayınlandı: doğru
yayınlanmaTarih: 2022/07/22
etiketler:
 - Sonraki

## Ana içerik

İşaretleme dosyasının adı gönderi URL'sinin bir parçası olacak, bu yüzden iyi olduğundan emin olun. Ayrıca, tireler arasındaki içeriği not edin. Bu, gönderinin meta verileridir ve ön madde olarak adlandırılır.

İşaretleme Dosyalarını Ayrıştırma

Her blog gönderisi için, işaretleme içeriğini ve ön konuyu ayrıştırmanız gerekir. Markdown için tepki işaretlemesini ve ön madde verileri için gri maddeyi kullanın.

React-markdown, işaretlemeyi güvenli bir şekilde HTML'ye dönüştüren, açıklama üzerine kurulu bir React bileşenidir. Gri madde kitaplığı ön maddeyi ayrıştırır ve YAML'yi bir nesneye dönüştürür.

React-markdown ve grey-maddeyi yüklemek için terminalde aşağıdaki komutu yürütün.

npm düzenlemek Tepki işaretleme gri madde

utils adlı yeni bir klasörde md.js adlı yeni bir dosya oluşturun. Bu dosyada blog gönderisi içeriğini döndüren yardımcı işlevler oluşturacaksınız.

Yayınlanan Tüm Gönderileri Alın

İçerik klasöründeki tüm gönderileri döndürmek için md.js'de aşağıdaki kodu ekleyin.

içe aktarmak fs itibaren "fs";
içe aktarmak yol itibaren "yol";
içe aktarmak konu itibaren "gri madde";
ihracatsabit getPath = (klasör: dizi) => {
geri dönmek yol.join (işlem.cwd()), `/${klasör}`); // Tam yolu al 
}


ihracatsabit getFileContent = (dosyaadı: dizi, dosya:dize) => {
sabit POSTS_PATH = getPath (klasör)
 fs.readFileSync döndürür (path.join (POSTS_PATH, dosya adı), "utf8");
};


ihracatsabit getAllPosts = (klasör: dizi) => {
sabit POSTS_PATH = getPath (klasör)
geri dönmek fs
 .readdirSync (POSTS_PATH) // dizindeki dosyaları al
 .filter((yol) => /\\.md?$/.test (yol) // sadece .md dosyaları
 .map((dosyaAdı) => { // her dosya üzerinde eşleme
sabit kaynak = getFileContent (dosyaAdı, klasör); // dosya içeriğini al
sabit bilgi = dosyaAdı.değiştir(/\\.md?$/, ""); // dosya adından slug'u al
sabit { veri } = madde (kaynak); // ön maddeyi çıkar
geri dönmek {
 ön madde: veri,
 sülük: sülük,
 };
 });
};

getAllPosts() işlevinde:

  • Yol modülünü kullanarak içerik klasörüne giden tam yolu bulun.
  • fs.readdirSync() yöntemini kullanarak içerik klasöründeki dosyaları alın.
  • Dosyaları yalnızca .md uzantılı dosyaları içerecek şekilde filtreleyin.
  • Harita yöntemini kullanarak ön madde de dahil olmak üzere her dosyanın içeriğini alın.
  • Her dosyanın ön maddesini ve bilgisini (.md uzantısı olmayan dosya adı) içeren bir dizi döndürür.

Yalnızca yayınlanan gönderileri almak için, tüm gönderileri filtreleyebilir ve yalnızca ön konudaki isPublished anahtarı true olarak ayarlanmış olanları döndürebilirsiniz.

ihracatsabit getAllPublished = (klasör: dizi) => {
sabit gönderiler = getAllPosts (klasör)
sabit yayınlandı = posts.filter((post) => {
geri dönmek post.frontmatter.isPublished doğru
 })
geri dönmek yayınlanan
 }

Tek bir gönderinin içeriğini almak için md.js'de getSinglePost() işlevini ekleyin.

ihracatsabit getSinglePost = (bilgi: dizi, dosya:dize) => {
sabit kaynak = getFileContent(`${slug}.md`, dosya);
sabit { veri: ön madde, içerik } = madde (kaynak);
geri dönmek {
 ön madde,
 içerik,
 };
};

Bu işlev, her dosyanın içeriğini almak için getFileContent() işlevini çağırır. Ardından işlev, gri madde paketini kullanarak ön maddeyi ve işaretleme içeriğini alır.

Tüm Blog Yazılarını Görüntüle

Next.js, biri statik oluşturma olmak üzere farklı işleme seçenekleri sunar. Statik oluşturma, Next.js'nin oluşturma süresi boyunca tüm HTML sayfalarını oluşturduğu bir ön işleme türüdür. Hızlı statik sayfalar oluşturmak için kullanırsınız.

Kontrol et resmi Nextjs belgeleri oluşturma hakkında daha fazla bilgi için.

Next.js, getStaticProps işlevi tarafından döndürülen donanımları kullanarak derleme zamanında bir sayfayı önceden oluşturur. Bu durumda, aksesuarlar bir dizi yayınlanmış gönderi olacaktır.

ihracatsabit getStaticProps = zaman uyumsuz () => {
 sabit gönderiler = getAllPublished("gönderiler");
geri dönmek {
 aksesuarlar: { gönderiler },
 };
};

Blog gönderilerinin listesini görüntülemek için index.js dosyasını değiştirin.

içe aktarmak KAFA itibaren "sonraki/baş";
içe aktarmak Bağlantı itibaren "sonraki/bağlantı";
içe aktarmak {getAllPublished} itibaren "../utils/md";
işlevEv({ gönderiler }) {
geri dönmek (
<div className={styles.container}>
<KAFA>
<başlık>Sonraki Uygulamayı Oluştur</title>
<meta adı="Tanım" içerik="Create next app tarafından oluşturuldu" />
<bağlantı rel="simge" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<makale anahtarı={post.slug}>
<P>[ {post.frontmatter.tags.join(", ")} ]</P>
`gönderiler/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<P>{post.frontmatter.description}</P>
</article>
 ))}
</div>
</div>
 );
}


ihracatsabit getStaticProps = zaman uyumsuz () => {
 sabit gönderiler = getAllPublished("içerik");


geri dönmek {
 aksesuarlar: { gönderiler },
 };
};
ihracatvarsayılan Ev;

Home bileşeni, getStaticProps tarafından döndürülen gönderileri kullanır. Harita işlevini kullanarak bunların üzerinde yinelenir ve her gönderi için bir başlık, tam gönderiye bir bağlantı ve bir açıklama görüntüler.

Blog Yazısı Görüntüle

Belirtildiği gibi, gönderilerin dosya adları URL yolu olarak kullanılacaktır. Bu yollar da dinamiktir, bu nedenle bunları oluşturma süresi boyunca oluşturmanız gerekir. Next.js, getStaticPaths() işlevini kullanarak bunu yapmanızı sağlar.

Örneğin, bu kodda yollar, işaretleme dosyalarının adlarından oluşturulur.

ihracatsabit getStaticPaths = zaman uyumsuz () => {
 const yolları = getAllPublished("gönderiler").map(({ bilgi }) => ({ parametreler: { bilgi } }));
geri dönmek {
 yollar,
 geri çekilmek: YANLIŞ,
 };
};

Daha önce oluşturduğunuz getAllPublished() yardımcı işlevi tarafından döndürülen gönderi verilerini kullandığınızı unutmayın.

Ayrıca geri dönüşü false olarak ayarlıyorsunuz, bu da 404 hata var olmayan yollar için.

getStaticPaths() genellikle parametrelere dayalı olarak her gönderinin içeriğini alan getStaticProps() ile birlikte kullanılır.

ihracatsabit getStaticProps = zaman uyumsuz ({ parametreler }) => {
sabit gönderi = beklemek getSinglePost (params.slug, "gönderiler");
geri dönmek {
 aksesuarlar: { ...yazı },
 };
};

İşaretlemeyi HTML'ye dönüştürmek için tepki işaretlemesini kullanın.

içe aktarmak ReactMarkdown itibaren "tepki işaretleme"
içe aktarmak { getAllPosts, getSinglePost } itibaren "../../utils/md";
sabit Gönderi = ({ içerik, ön madde }) => {
geri dönmek (
<div>
<P>{frontmatter.tags.join(', ')}</P>
<h2>{ön madde.başlık}</h2>
<açıklık>{frontmatter.publishedDate}</span>
<ReactMarkdown>{içerik}</ReactMarkdown>
</div>
 );
};

Bu bileşen, her blog gönderisinin içeriğini ve karşılık gelen URL'sini oluşturacaktır.

Bir geliştirici blogu oluşturuyorsanız, şunları yapabilirsiniz: sözdizimi vurgulama ekle Her bileşen için yetenek.

Next.js Markdown Blogunu Şekillendirme

Şimdiye kadar, blog gönderilerinin bir listesini görüntüleyen ve bu gönderinin içeriğini işleyen bir Next.js işaretleme blogu oluşturdunuz. Blogun daha güzel görünmesi için CSS stilleri eklemelisiniz.

Next.js iyi bir CSS desteğine sahiptir ve stilli bileşenler gibi CSS-in-JS kitaplıklarını kullanmayı seçebilirsiniz. CSS'yi JS'den ayırmayı tercih ederseniz, CSS modüllerini kullanabilirsiniz.