Cách tạo một Blog Markdown Next.js Sử dụng react-markdown
Các công cụ mã thấp như WordPress đơn giản hóa quá trình tạo blog. Bạn có thể sử dụng một chủ đề được tạo sẵn và bắt đầu viết các bài đăng trên blog sau vài giờ. Nếu bạn muốn kiểm soát nhiều hơn mã của mình và có chút thời gian trong tay, tốt hơn là bạn nên xây dựng blog của mình từ đầu. Bạn thậm chí có thể sử dụng một khuôn khổ như Next.js để đơn giản hóa quy trình.
Tìm hiểu cách tạo một blog Next.js đơn giản hiển thị các bài đăng đánh dấu.
Mục Lục
Tạo một dự án Next.js
Next.js là một khung công tác React giúp đơn giản hóa cách bạn xây dựng ứng dụng. Nó cung cấp nhiều công cụ và cấu hình sẵn có, cho phép bạn bắt đầu viết mã ngay sau khi cài đặt.
Cách đơn giản nhất để bắt đầu với Next.js là chạy lệnh create-next-app trong terminal:
npx create-next-app markdown-blog
Lệnh này tạo một dự án Next.js chứa tất cả các tệp cần thiết để bắt đầu.
Điều đầu tiên, hãy dọn dẹp index.js tệp trông như thế này:
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>
)
}
Tạo bài đăng trên blog Markdown
Blog sẽ hiển thị các tệp đánh dấu được lưu trữ cục bộ trong thư mục dự án. Vì vậy, hãy tạo một thư mục mới ở gốc có tên là Nội dung để lưu trữ các tệp. Trong thư mục này, hãy tạo một tệp mới có tên là create-active-link-nextjs.md và thêm những thứ sau:
title: How To create an active link in Nextjs
description: Customizing active links using useRouter()
isPublished: true
publishedDate: 2022/07/22
tags:
- next
Tên của tệp đánh dấu sẽ là một phần của URL bài đăng, vì vậy hãy đảm bảo rằng đó là một tên tốt. Ngoài ra, hãy lưu ý nội dung giữa các dấu gạch ngang. Đây là siêu dữ liệu của bài đăng và được gọi là vấn đề chính.
Phân tích cú pháp tệp đánh dấu
Đối với mỗi bài đăng trên blog, bạn phải phân tích cú pháp nội dung đánh dấu và vấn đề chính. Đối với Markdown, sử dụng phản ứng đánh dấu và đối với dữ liệu vật chất phía trước, sử dụng chất xám.
React-markdown là một thành phần React được xây dựng dựa trên nhận xét giúp chuyển đổi markdown thành HTML một cách an toàn. Thư viện chất xám phân tích cú pháp vật chất phía trước và chuyển đổi YAML thành một đối tượng.
Thực thi lệnh sau trong terminal để cài đặt react-markdown và chất xám.
npm install react-markdown gray-matter
Trong một thư mục mới có tên utils, hãy tạo một tệp mới có tên md.js. Bạn sẽ tạo các hàm trợ giúp trả về nội dung bài đăng trên blog trong tệp này.
Nhận tất cả các bài đã xuất bản
Trong md.js, hãy thêm mã sau để trả về tất cả các bài đăng trong thư mục nội dung.
import fs from "fs";
import path from "path";
import matter from "gray-matter";export const getPath = (folder:string) => {
return path.join(process.cwd(), `/${folder}`);
}
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)
.filter((path) => /\.md?$/.test(path))
.map((fileName) => {
const source = getFileContent(fileName, folder);
const slug = fileName.replace(/\.md?$/, "");
const { data } = matter(source);
return {
frontmatter: data,
slug: slug,
};
});
};
Trong hàm getAllPosts ():
- Nhận đường dẫn đầy đủ đến thư mục nội dung bằng cách sử dụng mô-đun đường dẫn.
- Lấy các tệp trong thư mục nội dung bằng phương thức fs.readdirSync ().
- Lọc các tệp để chỉ bao gồm các tệp có phần mở rộng .md.
- Truy xuất nội dung của từng tệp, bao gồm cả vấn đề phía trước bằng phương pháp bản đồ.
- Trả về một mảng có chứa chất phía trước và slug (tên tệp không có phần mở rộng .md) của mỗi tệp.
Để chỉ nhận các bài đăng đã xuất bản, bạn có thể lọc tất cả các bài đăng và chỉ trả lại những bài có khóa isPublished trong vấn đề phía trước được đặt thành true.
export const getAllPublished = (folder:string) => {
const posts = getAllPosts(folder)const published = posts.filter((post) => {
return post.frontmatter.isPublished === true
})
return published
}
Trong md.js, hãy thêm hàm getSinglePost () để lấy nội dung của một bài đăng.
export const getSinglePost = (slug:string, folder:string) => {
const source = getFileContent(`${slug}.md`, folder);
const { data: frontmatter, content } = matter(source);return {
frontmatter,
content,
};
};
Hàm này gọi hàm getFileContent () để lấy nội dung của mỗi tệp. Sau đó, bằng cách sử dụng gói chất xám, hàm lấy chất liệu phía trước và nội dung đánh dấu.
Hiển thị tất cả các bài đăng trên blog
Next.js cung cấp các tùy chọn kết xuất khác nhau, một trong số chúng là tạo tĩnh. Tạo tĩnh là một loại kết xuất trước trong đó Next.js tạo tất cả các trang HTML trong thời gian xây dựng. Bạn sử dụng nó để tạo các trang tĩnh nhanh chóng.
Kiểm tra tài liệu Nextjs chính thức để biết thêm thông tin về kết xuất.
Next.js sẽ kết xuất trước một trang tại thời điểm xây dựng bằng cách sử dụng các đạo cụ được trả về bởi hàm getStaticProps. Trong trường hợp này, đạo cụ sẽ là một loạt các bài đăng đã xuất bản.
export const getStaticProps = async () => {
const posts = getAllPublished("posts");return {
props: { posts },
};
};
Sửa đổi tệp index.js để hiển thị danh sách các bài đăng trên blog.
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;
Thành phần Home sử dụng các bài đăng được trả về bởi getStaticProps. Nó lặp lại chúng bằng cách sử dụng chức năng bản đồ và đối với mỗi bài đăng, nó hiển thị tiêu đề, liên kết đến bài đăng đầy đủ và mô tả.
Hiển thị một bài đăng trên blog
Như đã đề cập, tên tệp của bài đăng sẽ được sử dụng làm đường dẫn URL. Các đường dẫn này cũng động, vì vậy bạn cần tạo chúng trong thời gian xây dựng. Next.js cho phép bạn thực hiện việc này bằng cách sử dụng hàm getStaticPaths ().
Ví dụ, trong mã này, các đường dẫn được tạo từ tên của các tệp đánh dấu.
export const getStaticPaths = async () => {
const paths = getAllPublished("posts").map(({ slug }) => ({ params: { slug } }));return {
paths,
fallback: false,
};
};
Lưu ý rằng bạn đang sử dụng dữ liệu bài đăng được trả về bởi hàm trợ giúp getAllPublished () mà bạn đã tạo trước đó.
Bạn cũng đang đặt dự phòng thành false, trả về lỗi 404 cho các đường dẫn không tồn tại.
getStaticPaths () thường được sử dụng với getStaticProps () để truy xuất nội dung của mỗi bài đăng dựa trên các tham số.
export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.slug, "posts");return {
props: { ...post },
};
};
Để hiển thị đánh dấu xuống HTML, hãy sử dụng phản ứng đánh dấu.
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>
);
};
Thành phần này sẽ hiển thị nội dung của mỗi bài đăng trên blog và URL tương ứng của nó.
Nếu tạo blog nhà phát triển, bạn có thể thêm khả năng làm nổi bật cú pháp cho từng thành phần.
Tạo kiểu cho Blog Markdown Next.js
Cho đến nay, bạn đã tạo một blog đánh dấu Next.js hiển thị danh sách các bài đăng trên blog và hiển thị nội dung của bài đăng đó. Để blog trông đẹp hơn, bạn nên thêm các kiểu CSS.
Next.js có hỗ trợ CSS tốt và bạn có thể chọn sử dụng các thư viện CSS-in-JS như các thành phần được tạo kiểu. Nếu bạn muốn tách CSS khỏi JS, bạn có thể sử dụng mô-đun CSS.