Bu adım adım kılavuzla kısa sürede temel bir blogu kurun ve çalıştırın.
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 yazıları yazmaya başlayabilirsiniz. Kodunuz üzerinde daha fazla kontrol sahibi olmak istiyorsanız ve biraz zamanınız varsa, blogunuzu sıfırdan oluşturmak daha iyidir. Süreci basitleştirmek için Next.js gibi bir çerçeve bile kullanabilirsiniz.
İşaretleme gönderileri oluşturan basit bir Next.js blogunun nasıl oluşturulacağını öğrenin.
Next.js Projesi Oluşturma
Next.js, uygulamaları oluşturma şeklinizi basitleştiren bir React çerçevesidir. Kurulumdan hemen sonra kod yazmaya başlamanıza olanak tanıyan, kutudan çıktığı gibi birçok araç ve yapılandırma sağlar.
Next.js’yi kullanmaya başlamanın en basit yolu, bir terminalde create-next-app komutunu çalıştırmaktır:
npx create-next-app markdown-blog
Bu komut, başlatmak için gerekli tüm dosyaları içeren bir Next.js projesi oluşturur.
İlk önce, index.js dosyasını şöyle görünecek şekilde temizleyin :
import Head from ‘next/head’
import styles from ‘../styles/Home.module.css’
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name=”description” content=”Generated by create next app” />
<link rel=”icon” href=”/favicon.ico” />
</Head>
</div>
)
}
Markdown Blog Yazıları Oluşturun
Blog, proje klasöründe yerel olarak depolanan işaretleme dosyalarını işleyecektir. Bu nedenle, dosyaları depolamak için kökte içerik adlı yeni bir klasör oluşturun. Bu klasörde create-active-link-nextjs.md adında yeni bir dosya oluşturun ve aşağıdakileri ekleyin:
—
title: How To create an active link in Nextjs
description: Customizing active links using useRouter()
isPublished: true
publishedDate: 2022/07/22
tags:
– next
—
## Main content
İşaretleme dosyasının adı, gönderi URL’sinin bir parçası olacaktır, bu nedenle iyi olduğundan emin olun. Ayrıca, tireler arasındaki içeriği not edin. Bu, gönderinin meta verileridir ve ön konu olarak adlandırılır.
Markdown Dosyalarını Ayrıştırma
Her blog gönderisi için, markdown içeriğini ve ön konuyu ayrıştırmalısınız. İşaretleme için tepki işaretlemeyi kullanın 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.
Reaksiyon işaretleme ve gri maddeyi kurmak için terminalde aşağıdaki komutu yürütün.
npm install react-markdown gray-matter
utils adlı yeni bir klasörde, md.js adlı yeni bir dosya oluşturun. Bu dosyada blog yazısı içeriğini döndüren yardımcı işlevler oluşturacaksınız.
Yayınlanan Tüm Gönderileri Alın
md.js’de, içerik klasöründeki tüm gönderileri döndürmek için aşağıdaki kodu ekleyin.
import fs from “fs”;
import path from “path”;
import matter from “gray-matter”;
export const getPath = (folder:string) => {
return path.join(process.cwd(), `/${folder}`); // Get full path
}
export const getFileContent = (filename:string, folder:string) => {
const POSTS_PATH = getPath(folder)
return fs.readFileSync(path.join(POSTS_PATH, filename), “utf8”);
};
export const getAllPosts = (folder:string) => {
const POSTS_PATH = getPath(folder)
return fs
.readdirSync(POSTS_PATH) // get files in directory
.filter((path) => /\.md?$/.test(path)) // only .md files
.map((fileName) => { // map over each file
const source = getFileContent(fileName, folder); // retrieve the file contents
const slug = fileName.replace(/\.md?$/, “”); // get the slug from the filename
const { data } = matter(source); // extract frontmatter
return {
frontmatter: data,
slug: slug,
};
});
};
getAllPosts() işlevinde:
Yol modülünü kullanarak içerik klasörünün tam yolunu alın.
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 konu da 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ün.
Yalnızca yayınlanan gönderileri almak için tüm gönderileri filtreleyebilir ve yalnızca ön konuda isPublished anahtarı true olarak ayarlanmış olanları döndürebilirsiniz.
export const getAllPublished = (folder:string) => {
const posts = getAllPosts(folder)
const published = posts.filter((post) => {
return post.frontmatter.isPublished === true
})
return published
}
md.js’de, tek bir gönderinin içeriğini almak için getSinglePost() işlevini ekleyin.
export const getSinglePost = (slug:string, folder:string) => {
const source = getFileContent(`${slug}.md`, folder);
const { data: frontmatter, content } = matter(source);
return {
frontmatter,
content,
};
};
Bu işlev, her dosyanın içeriğini almak için getFileContent() işlevini çağırır. Ardından, gri madde paketini kullanarak işlev, ön maddeyi ve indirim içeriğini alır.
Tüm Blog Yazılarını Görüntüle
Next.js, biri statik oluşturma olmak üzere farklı oluşturma seçenekleri sunar. Statik oluşturma, Next.js’nin derleme 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.
Oluşturma hakkında daha fazla bilgi için resmi Nextjs belgelerine bakın.
Next.js, getStaticProps işlevi tarafından döndürülen sahne öğelerini kullanarak derleme zamanında bir sayfayı önceden oluşturacaktır. Bu durumda, aksesuarlar bir dizi yayınlanmış gönderi olacaktır.
export const getStaticProps = async () => {
const posts = getAllPublished(“posts”);
return {
props: { posts },
};
};
Blog gönderilerinin bir listesini görüntülemek için index.js dosyasını değiştirin.
import Head from “next/head”;
import Link from “next/link”;
import { getAllPublished } from “../utils/md”;
function Home({ posts }) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name=”description” content=”Generated by create next app” />
<link rel=”icon” href=”/favicon.ico” />
</Head>
<div>
{posts.map((post) => (
<article key={post.slug}>
<p>[ {post.frontmatter.tags.join(“, “)} ]</p>
<Link href={`posts/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{” “}
<p>{post.frontmatter.description}</p>
</article>
))}
</div>
</div>
);
}
export const getStaticProps = async () => {
const posts = getAllPublished(“content”);
return {
props: { posts },
};
};
export default Home;
Home bileşeni, getStaticProps tarafından döndürülen gönderileri kullanır. Harita işlevini kullanarak bunları yineler ve her gönderi için bir başlık, tam gönderiye bir bağlantı ve bir açıklama görüntüler.
Bir Blog Yazısı Görüntüle
Belirtildiği gibi, gönderilerin dosya adları URL yolları olarak kullanılacaktır. Bu yollar da dinamiktir, bu nedenle bunları derleme süresi boyunca oluşturmanız gerekir. Next.js, bunu getStaticPaths() işlevini kullanarak yapmanızı sağlar.
Örneğin, bu kodda yollar, markdown dosyalarının adlarından oluşturulur.
export const getStaticPaths = async () => {
const paths = getAllPublished(“posts”).map(({ slug }) => ({ params: { slug } }));
return {
paths,
fallback: false,
};
};
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, var olmayan yollar için 404 hatası döndüren yedeği false olarak ayarlıyorsunuz.
getStaticPaths() genellikle, her gönderinin içeriğini paramlara dayalı olarak alan getStaticProps() ile birlikte kullanılır.
export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.slug, “posts”);
return {
props: { …post },
};
};
İşaretlemeyi HTML’ye dönüştürmek için tepki işaretlemeyi kullanın.
import ReactMarkdown from ‘react-markdown’
import { getAllPosts, getSinglePost } from “../../utils/md”;
const Post = ({ content, frontmatter }) => {
return (
<div>
<p>{frontmatter.tags.join(‘, ‘)}</p>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publishedDate}</span>
<ReactMarkdown>{content}</ReactMarkdown>
</div>
);
};
Bu bileşen, her bir blog gönderisinin içeriğini ve buna karşılık gelen URL’yi oluşturacaktır.
Bir geliştirici blogu oluşturuyorsanız, her bileşen için sözdizimi vurgulama özelliği ekleyebilirsiniz.
Next.js Markdown Blogunun Stilini Oluşturma
Ş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 stillendirilmiş bileşenler gibi JS içinde CSS kitaplıkları kullanmayı seçebilirsiniz. CSS’yi JS’den ayırmayı tercih ederseniz, CSS modüllerini kullanabilirsiniz.