כלים בעלי קוד נמוך כמו וורדפרס מפשטים את תהליך יצירת הבלוג. אתה יכול להשתמש בערכת נושא מוכנה מראש ולהתחיל לכתוב פוסטים בבלוג תוך מספר שעות. אם אתה רוצה יותר שליטה על הקוד שלך ויש לך קצת זמן בידיים שלך, עדיף לבנות את הבלוג שלך מאפס. אתה יכול אפילו להשתמש במסגרת כמו Next.js כדי לפשט את התהליך.

למד כיצד לבנות בלוג פשוט של Next.js המציג פוסטים של סימון.

יצירת פרויקט Next.js

Next.js היא מסגרת React שמפשטת את אופן בניית האפליקציות. הוא מספק כלים ותצורות רבות מחוץ לקופסה, ומאפשר לך להתחיל לכתוב קוד מיד לאחר התקנתו.

הדרך הפשוטה ביותר להתחיל עם Next.js היא על ידי הפעלת הפקודה create-next-app בטרמינל:

npx לִיצוֹר-הַבָּא-בלוג סימון אפליקציה

פקודה זו יוצרת פרויקט Next.js המכיל את כל הקבצים הדרושים להתחלה.

דבר ראשון, נקה את index.js הקובץ ייראה כך:

יְבוּא רֹאשׁ מ 'הבא/ראש'
יְבוּא סגנונות מ '../styles/Home.module.css'
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
לַחֲזוֹר (
<div className={styles.container}>
<רֹאשׁ>
<כותרת>צור את האפליקציה הבאה</title>
<מטא שם="תיאור" תוכן="נוצר על ידי צור את האפליקציה הבאה" />
<קישור rel="סמל" href="/favicon.ico" />
</Head>
</div>
 )
}
instagram viewer

צור פוסטים בבלוג של Markdown

הבלוג יעבד קבצי סימון מאוחסן באופן מקומי בתיקיית הפרויקט. אז, צור תיקייה חדשה בשורש בשם תוֹכֶן כדי לאחסן את הקבצים. בתיקייה זו, צור קובץ חדש בשם create-active-link-nextjs.md והוסיפו את הדברים הבאים:


כותרת: כיצד לִיצוֹר פעיל קישורב Nextjs
תיאור: התאמה אישית של קישורים פעילים באמצעות useRouter()
מתפרסם: נָכוֹן
תאריך פרסום: 2022/07/22
תגיות:
 - הבא

## תוכן עיקרי

השם של קובץ הסימון יהיה חלק מכתובת האתר של הפוסט, אז ודא שהוא טוב. כמו כן, שימו לב לתוכן בין המקפים. זהו המטא נתונים של הפוסט והוא נקרא העניין הקדמי.

ניתוח קבצי Markdown

עבור כל פוסט בבלוג, עליך לנתח את תוכן הסימון ואת העניין הקדמי. עבור Markdown, השתמש ב-react-markdown ובנתוני החומר הקדמי, השתמש ב-grey-matter.

React-markdown הוא רכיב React בנוי על הערה הממיר בבטחה סימון ל-HTML. ספריית החומר האפור מנתחת חומר קדמי וממירה את YAML לאובייקט.

בצע את הפקודה הבאה בטרמינל כדי להתקין react-markdown ו-grey-matter.

npm להתקין להגיב-סימון חומר אפור

בתיקייה חדשה בשם utils, צור קובץ חדש בשם md.js. אתה תיצור פונקציות עוזר המחזירות תוכן של פוסטים בבלוג בקובץ זה.

קבל את כל הפוסטים שפורסמו

ב-md.js, הוסף את הקוד הבא כדי להחזיר את כל הפוסטים בתיקיית התוכן.

יְבוּא fs מ "fs";
יְבוּא נָתִיב מ "נָתִיב";
יְבוּא חוֹמֶר מ "חומר אפור";
יְצוּאconst getPath = (תיקיה: מחרוזת) => {
לַחֲזוֹר path.join (process.cwd(), `/${folder}`); // קבל נתיב מלא 
}


יְצוּאconst getFileContent = (שם קובץ: מחרוזת, תיקייה:string) => {
const POSTS_PATH = getPath (תיקיה)
 החזר fs.readFileSync (path.join (POSTS_PATH, שם קובץ), "utf8");
};


יְצוּאconst getAllPosts = (תיקיה: מחרוזת) => {
const POSTS_PATH = getPath (תיקיה)
לַחֲזוֹר fs
 ‎.readdirSync (POSTS_PATH) // קבל קבצים בספרייה
 .filter((נתיב) => /\\.md?$/‎.test (נתיב)) // רק קבצי .md
 .map((fileName) => { // מפה על כל קובץ
const source = getFileContent (שם קובץ, תיקיה); // אחזר את תוכן הקובץ
const slug = fileName.replace(/\\.md?$/, ""); // קבל את הקליעה משם הקובץ
const { נתונים } = חומר (מקור); // לחלץ frontmatter
לַחֲזוֹר {
 נושא חזית: נתונים,
 שבלול: שבלול,
 };
 });
};

בפונקציה getAllPosts():

  • קבל את הנתיב המלא לתיקיית התוכן באמצעות מודול הנתיב.
  • קבל את הקבצים בתיקיית התוכן באמצעות שיטת fs.readdirSync().
  • סנן את הקבצים כך שיכלול רק קבצים עם סיומת .md.
  • אחזר את התוכן של כל קובץ, כולל העניין הקדמי בשיטת המפה.
  • החזר מערך המכיל את החומר הקדמי ואת ה-slug (שם הקובץ ללא סיומת .md) של כל קובץ.

כדי לקבל רק את הפוסטים שפורסמו, אתה יכול לסנן את כל הפוסטים ולהחזיר רק את אלה שהמפתח שלהם isPublished בעניין הקדמי מוגדר כ-true.

יְצוּאconst getAllPublished = (תיקיה: מחרוזת) => {
const פוסטים = getAllPosts (תיקיה)
const Published = posts.filter((post) => {
לַחֲזוֹר post.frontmatter.מתפרסם נָכוֹן
 })
לַחֲזוֹר יצא לאור
 }

ב-md.js, הוסף את הפונקציה getSinglePost() כדי לאחזר את התוכן של פוסט בודד.

יְצוּאconst getSinglePost = (שבלול: מחרוזת, תיקייה:string) => {
const source = getFileContent(`${סלוג}.md`, תיקיה);
const { נתונים: frontmatter, תוכן } = עניין (מקור);
לַחֲזוֹר {
 עניין חזיתי,
 תוֹכֶן,
 };
};

פונקציה זו קוראת לפונקציה getFileContent() כדי לקבל את התוכן של כל קובץ. לאחר מכן באמצעות חבילת החומר האפור, הפונקציה מאחזרת את החומר הקדמי ואת תוכן הסימון.

הצג את כל הפוסטים בבלוג

Next.js מספק אפשרויות רינדור שונות, אחת מהן היא יצירה סטטית. יצירה סטטית היא סוג של עיבוד מקדים שבו Next.js מייצר את כל דפי ה-HTML במהלך זמן הבנייה. אתה משתמש בו כדי ליצור דפים סטטיים מהירים.

בדוק את תיעוד רשמי של Nextjs למידע נוסף על עיבוד.

Next.js יעבד מראש דף בזמן הבנייה באמצעות האביזרים המוחזרים על ידי הפונקציה getStaticProps. במקרה זה, האביזרים יהיו מערך של פוסטים שפורסמו.

יְצוּאconst getStaticProps = אסינכרון () => {
 const posts = getAllPublished("פוסטים");
לַחֲזוֹר {
 אביזרים: { פוסטים },
 };
};

שנה את הקובץ index.js כדי להציג רשימה של פוסטים בבלוג.

יְבוּא רֹאשׁ מ "הבא/ראש";
יְבוּא קישור מ "הבא/קישור";
יְבוּא { getAllPublished } מ "../utils/md";
פוּנקצִיָהבית({ פוסטים }) {
לַחֲזוֹר (
<div className={styles.container}>
<רֹאשׁ>
<כותרת>צור את האפליקציה הבאה</title>
<מטא שם="תיאור" תוכן="נוצר על ידי צור את האפליקציה הבאה" />
<קישור rel="סמל" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<מאמר מפתח={post.slug}>
<ע>[ {post.frontmatter.tags.join(", ")} ]</p>
`פוסטים/${post.slug}`}>
<א>{post.frontmatter.title}</א>
</Link>{""}
<ע>{post.frontmatter.description}</p>
</article>
 ))}
</div>
</div>
 );
}


יְצוּאconst getStaticProps = אסינכרון () => {
 const posts = getAllPublished("תוֹכֶן");


לַחֲזוֹר {
 אביזרים: { פוסטים },
 };
};
יְצוּאבְּרִירַת מֶחדָל בית;

רכיב הבית משתמש בפוסטים המוחזרים על ידי getStaticProps. הוא חוזר עליהם באמצעות פונקציית המפה, ולכל פוסט הוא מציג כותרת, קישור לפוסט המלא ותיאור.

הצג פוסט בבלוג

כאמור, שמות הקבצים של הפוסטים ישמשו נתיבי URL. נתיבים אלה הם גם דינמיים, אז אתה צריך ליצור אותם במהלך זמן הבנייה. Next.js מאפשר לך לעשות זאת באמצעות הפונקציה getStaticPaths()‎.

לדוגמה, בקוד זה, הנתיבים נוצרים משמות קבצי הסימון.

יְצוּאconst getStaticPaths = אסינכרון () => {
 const paths = getAllPublished("פוסטים").map(({ slug }) => ({ params: { slug } }));
לַחֲזוֹר {
 שבילים,
 לסגת: שֶׁקֶר,
 };
};

שים לב שאתה משתמש בנתוני הפוסטים המוחזרים על ידי פונקציית העזר getAllPublished() שיצרת בעבר.

אתה גם מגדיר fallback ל-false, מה שמחזיר א שגיאה 404 בשבילים שלא קיימים.

getStaticPaths() משמש בדרך כלל עם getStaticProps() אשר מאחזר את התוכן של כל פוסט בהתבסס על הפרמטרים.

יְצוּאconst getStaticProps = אסינכרון ({ params }) => {
const פוסט = לְהַמתִין getSinglePost (params.slug, "פוסטים");
לַחֲזוֹר {
 אביזרים: { ...פוסט },
 };
};

כדי להציג את הסימון ל-HTML, השתמש ב-react-markdown.

יְבוּא ReactMarkdown מ 'סימון תגובה'
יְבוּא { getAllPosts, getSinglePost } מ "../../utils/md";
const פוסט = ({ תוכן, frontmatter }) => {
לַחֲזוֹר (
<div>
<ע>{frontmatter.tags.join(', ')}</p>
<h2>{frontmatter.title}</h2>
<לְהַקִיף>{frontmatter.publishedDate}</span>
<ReactMarkdown>{תוֹכֶן}</ReactMarkdown>
</div>
 );
};

רכיב זה יציג את התוכן של כל פוסט בבלוג ואת כתובת האתר המתאימה לו.

אם תיצור בלוג מפתחים, אתה יכול הוסף הדגשת תחביר יכולת לכל רכיב.

עיצוב הבלוג של Next.js Markdown

עד כה, יצרת בלוג סימון של Next.js שמציג רשימה של פוסטים בבלוג ומציג את התוכן של הפוסט הזה. כדי שהבלוג ייראה יפה יותר, כדאי להוסיף סגנונות CSS.

ל-Next.js יש תמיכה טובה ב-CSS, ואתה יכול לבחור להשתמש בספריות CSS-in-JS כמו רכיבים מעוצבים. אם אתה מעדיף להפריד בין CSS ל-JS, אתה יכול להשתמש במודולי CSS.