خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

چگونه با استفاده از react-markdown یک وبلاگ Next.js Markdown ایجاد کنیم

ارشیا یوسفی ادیب ۳ اردیبهشت, ۱۴۰۳ 4 min read

با این راهنمای گام به گام، در کمترین زمان یک وبلاگ پایه راه اندازی و راه اندازی کنید.

ابزارهای کم کد مانند وردپرس فرآیند ایجاد وبلاگ را ساده می کند. می توانید از یک موضوع از پیش ساخته شده استفاده کنید و در عرض چند ساعت شروع به نوشتن پست های وبلاگ کنید. اگر می خواهید کنترل بیشتری بر روی کد خود داشته باشید و زمان زیادی در اختیار دارید، بهتر است وبلاگ خود را از ابتدا بسازید. حتی می توانید از چارچوبی مانند Next.js برای ساده سازی فرآیند استفاده کنید.

بیاموزید که چگونه یک وبلاگ Next.js ساده بسازید که پست‌های علامت‌گذاری شده را ارائه کند.

ایجاد پروژه Next.js

Next.js یک چارچوب React است که نحوه ساخت برنامه‌ها را ساده می‌کند. این ابزارها و تنظیمات زیادی را در اختیار شما قرار می دهد و به شما این امکان را می دهد که بلافاصله پس از نصب آن کد را شروع کنید.

ساده ترین راه برای شروع با Next.js اجرای دستور create-next-app در ترمینال است:

npx create-next-app markdown-blog

این دستور یک پروژه Next.js ایجاد می کند که حاوی تمام فایل های لازم برای شروع است.

اول از همه، فایل index.js را به شکل زیر پاک کنید:

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 ایجاد کنید

وبلاگ فایل های علامت گذاری را که به صورت محلی در پوشه پروژه ذخیره شده اند ارائه می کند. بنابراین، یک پوشه جدید در ریشه به نام محتوا برای ذخیره فایل ها ایجاد کنید. در این پوشه یک فایل جدید به نام create-active-link-nextjs.md ایجاد کنید و موارد زیر را اضافه کنید:

---
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

نام فایل علامت گذاری بخشی از URL پست خواهد بود، بنابراین مطمئن شوید که یک نام خوب است. همچنین به محتویات بین خط تیره توجه کنید. این ابرداده پست است و به آن موضوع جلو می گویند.

مطلب مرتبط:   مالکیت در رست چیست؟

تجزیه فایل های Markdown

برای هر پست وبلاگ، باید محتوای علامت گذاری شده و موضوع اصلی را تجزیه کنید. برای Markdown، از react-markdown و برای داده های ماده جلویی، از ماده خاکستری استفاده کنید.

React-markdown یک مؤلفه React است که بر اساس remark ساخته شده است که با خیال راحت نشانه گذاری را به HTML تبدیل می کند. کتابخانه ماده خاکستری ماده جلویی را تجزیه می کند و YAML را به یک شی تبدیل می کند.

برای نصب react-markdown و gray-matter دستور زیر را در ترمینال اجرا کنید.

npm install react-markdown gray-matter

در یک پوشه جدید به نام utils، یک فایل جدید به نام md.js ایجاد کنید. شما توابع کمکی ایجاد خواهید کرد که محتوای پست وبلاگ را در این فایل برمی گرداند.

دریافت همه پست های منتشر شده

در md.js کد زیر را اضافه کنید تا تمام پست های پوشه محتوا برگردد.

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() :

  • با استفاده از ماژول path مسیر کامل پوشه محتوا را دریافت کنید.
  • با استفاده از متد ()fs.readdirSync فایل های موجود در پوشه محتوا را دریافت کنید.
  • فایل ها را فیلتر کنید تا فقط فایل هایی با پسوند md.
  • با استفاده از روش نقشه، محتویات هر فایل، از جمله موضوع جلویی را بازیابی کنید.
  • یک آرایه حاوی ماده جلویی و اسلاگ (نام فایل بدون پسوند md.) هر فایل را برگردانید.

برای دریافت فقط پست‌های منتشر شده، می‌توانید همه پست‌ها را فیلتر کنید و فقط آن‌هایی را که کلید isPublished آنها در قسمت جلویی تنظیم شده است را روی true برگردانید.

export const getAllPublished = (folder:string) => {
    const posts = getAllPosts(folder)
 
    const published = posts.filter((post) => {
      return post.frontmatter.isPublished === true
    })
 
    return published
  }

در md.js، تابع getSinglePost() را برای بازیابی محتویات یک پست اضافه کنید.

export const getSinglePost = (slug:string, folder:string) => {
  const source = getFileContent(`${slug}.md`, folder);
  const { data: frontmatter, content } = matter(source);
 
  return {
    frontmatter,
    content,
  };
};

این تابع تابع getFileContent() را برای دریافت محتویات هر فایل فراخوانی می کند. سپس با استفاده از بسته ماده خاکستری، تابع ماده جلویی و محتوای نشانه گذاری را بازیابی می کند.

مطلب مرتبط:   اندروید استودیو روی ویندوز کار نمی کند؟ در اینجا نحوه رفع آن آمده است

نمایش تمام پست های وبلاگ

Next.js گزینه های رندر مختلفی را ارائه می دهد که یکی از آنها تولید استاتیک است. تولید استاتیک نوعی پیش رندر است که در آن Next.js تمام صفحات HTML را در طول زمان ساخت تولید می کند. شما از آن برای ایجاد صفحات استاتیک سریع استفاده می کنید.

برای اطلاعات بیشتر در مورد رندر، اسناد رسمی Nextjs را بررسی کنید.

Next.js یک صفحه را در زمان ساخت با استفاده از ابزارهای برگردانده شده توسط تابع getStaticProps از قبل رندر می کند. در این مورد، ابزارها مجموعه ای از پست های منتشر شده خواهند بود.

export const getStaticProps = async () => {
  const posts = getAllPublished("posts");
 
  return {
    props: { posts },
  };
};

فایل index.js را برای نمایش لیستی از پست های وبلاگ تغییر دهید.

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 از پست های برگشتی توسط getStaticProps استفاده می کند. با استفاده از تابع نقشه روی آنها تکرار می شود و برای هر پست، عنوان، پیوندی به پست کامل و توضیحات نمایش داده می شود.

مطلب مرتبط:   3 تکنیک جالب پردازش صدا با استفاده از JES

نمایش یک پست وبلاگ

همانطور که گفته شد، نام فایل پست ها به عنوان مسیرهای URL استفاده خواهد شد. این مسیرها نیز پویا هستند، بنابراین باید آنها را در طول زمان ساخت تولید کنید. Next.js به شما امکان می دهد این کار را با استفاده از تابع getStaticPaths() انجام دهید.

به عنوان مثال، در این کد، مسیرها از نام فایل های علامت گذاری تولید می شوند.

export const getStaticPaths = async () => {
  const paths = getAllPublished("posts").map(({ slug }) => ({ params: { slug } }));
 
  return {
    paths,
    fallback: false,
  };
};

توجه داشته باشید که از داده‌های ارسالی استفاده می‌کنید که توسط تابع کمکی getAllPublished() که قبلا ایجاد کرده‌اید، استفاده می‌کنید.

شما همچنین گزینه false را روی false قرار می دهید که برای مسیرهایی که وجود ندارند خطای 404 را برمی گرداند.

getStaticPaths() معمولاً با getStaticProps() استفاده می شود که محتویات هر پست را بر اساس پارامترها بازیابی می کند.

export const getStaticProps = async ({ params }) => {
  const post = await getSinglePost(params.slug, "posts");
 
  return {
    props: { ...post },
  };
};

برای رندر کردن علامت گذاری به HTML، از react-markdown استفاده کنید.

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>
  );
};

این مؤلفه محتوای هر پست وبلاگ و URL مربوط به آن را نمایش می دهد.

در صورت ایجاد یک وبلاگ توسعه دهنده، می توانید قابلیت برجسته سازی نحوی را برای هر جزء اضافه کنید.

سبک دادن به وبلاگ Next.js Markdown

تا کنون، شما یک وبلاگ علامت گذاری Next.js ایجاد کرده اید که لیستی از پست های وبلاگ را نمایش می دهد و محتوای آن پست را ارائه می دهد. برای اینکه وبلاگ زیباتر به نظر برسد، باید سبک های CSS را اضافه کنید.

Next.js پشتیبانی خوبی از CSS دارد و می‌توانید از کتابخانه‌های CSS-in-JS مانند کامپوننت‌های سبک‌دهی شده استفاده کنید. اگر ترجیح می دهید CSS را از JS جدا کنید، می توانید از ماژول های CSS استفاده کنید.

Tags: