تعمل أدوات التعليمات البرمجية المنخفضة مثل WordPress على تبسيط عملية إنشاء المدونة. يمكنك استخدام موضوع معد مسبقًا والبدء في كتابة منشورات المدونة في غضون ساعات. إذا كنت تريد المزيد من التحكم في التعليمات البرمجية الخاصة بك ولديك بعض الوقت بين يديك ، فمن الأفضل إنشاء مدونتك من البداية. يمكنك حتى استخدام إطار عمل مثل Next.js لتبسيط العملية.
تعرف على كيفية إنشاء مدونة Next.js بسيطة تعرض منشورات التخفيضات.
إنشاء مشروع Next.js
Next.js هو إطار عمل React يبسط كيفية إنشاء التطبيقات. يوفر العديد من الأدوات والتكوينات خارج الصندوق ، مما يسمح لك بالبدء في كتابة الكود فور تثبيته.
إن أبسط طريقة لبدء استخدام Next.js هي تشغيل أمر create-next-app في محطة طرفية:
npx يخلق-التالي-app markdown-blog
ينشئ هذا الأمر مشروع Next.js يحتوي على جميع الملفات الضرورية للبدء.
أول الأشياء أولاً ، قم بتنظيف ملف index.js ملف ليبدو مثل هذا:
يستورد رأس من "التالي / الرأس"
يستورد الأنماط من "../styles/Home.module.css"
يصدّرتقصيروظيفةبيت() {
يعود (
<div className = {styles.container}>
<رأس>
<عنوان>إنشاء التطبيق التالي</title>
<اسم التعريف = "وصف" المحتوى ="تم إنشاؤه عن طريق إنشاء التطبيق التالي" />
<ارتباط rel ="أيقونة" href ="/favicon.ico" />
</Head>
</div>
)
}
إنشاء مشاركات مدونة Markdown
سيتم عرض المدونة ملفات تخفيض السعر مخزنة محليًا في مجلد المشروع. لذلك ، قم بإنشاء مجلد جديد في الجذر يسمى محتوى لتخزين الملفات. في هذا المجلد ، قم بإنشاء ملف جديد يسمى إنشاء-ارتباط-نشط- nextjs.md وأضف ما يلي:
العنوان: How To يخلق نشط وصلةفي Nextjs
الوصف: تخصيص الروابط النشطة باستخدام useRouter ()
يتم نشر: حقيقي
تاريخ النشر: 2022/07/22
العلامات:
- التالي
## المحتوى الرئيسي
سيكون اسم ملف markdown جزءًا من عنوان URL المنشور ، لذا تأكد من أنه جيد. لاحظ أيضًا المحتويات بين الشرطات. هذه هي البيانات الوصفية للمنشور وتسمى المادة الأمامية.
تحليل ملفات Markdown
لكل منشور مدونة ، يجب عليك تحليل محتوى التخفيضات والمادة الأمامية. بالنسبة إلى Markdown ، استخدم علامة رد الفعل ولبيانات المادة الأمامية ، استخدم المادة الرمادية.
React-markdown هو مكون React مبني على ملاحظة تقوم بتحويل markdown بأمان إلى HTML. مكتبة المادة الرمادية تحلل المادة الأمامية وتحول YAML إلى كائن.
نفّذ الأمر التالي في الجهاز لتثبيت علامة رد الفعل والمادة الرمادية.
npm ثَبَّتَ رد فعل - تخفيض السعر - مسألة رمادية
في مجلد جديد يسمى utils ، قم بإنشاء ملف جديد يسمى md.js. ستقوم بإنشاء وظائف مساعدة تقوم بإرجاع محتوى منشور المدونة في هذا الملف.
احصل على جميع المشاركات المنشورة
في md.js ، أضف الكود التالي لإرجاع جميع المشاركات في مجلد المحتوى.
يستورد خ من "FS" ؛
يستورد طريق من "طريق"؛
يستورد موضوع من "مسالة رمادية او غير واضحة"؛يصدّرمقدار ثابت getPath = (folder: string) => {
يعود path.join (process.cwd () ، `/$ {folder}`); // احصل على المسار الكامل
}يصدّرمقدار ثابت getFileContent = (اسم الملف: سلسلة ، مجلد: string) => {
مقدار ثابت POSTS_PATH = getPath (مجلد)
إرجاع fs.readFileSync (path.join (POSTS_PATH ، اسم الملف) ، "utf8");
};يصدّرمقدار ثابت getAllPosts = (المجلد: سلسلة) => {
مقدار ثابت POSTS_PATH = getPath (مجلد)
يعود خ
.readdirSync (POSTS_PATH) // الحصول على الملفات في الدليل
.filter ((مسار) => /\\.md?$/.test (مسار)) // فقط ملفات .md
.map ((fileName) => { // الخريطة فوق كل ملف
مقدار ثابت المصدر = getFileContent (اسم الملف ، المجلد) ؛ // استرداد محتويات الملف
مقدار ثابت slug = fileName.replace (/\\.md?$/, ""); // الحصول على سبيكة من اسم الملف
مقدار ثابت {data} = مادة (مصدر) ؛ // استخراج المادة الأمامية
يعود {
المسألة الأمامية: البيانات ،
سبيكة: سبيكة ،
};
});
};
في دالة getAllPosts ():
- احصل على المسار الكامل لمجلد المحتوى باستخدام وحدة المسار.
- احصل على الملفات في مجلد المحتوى باستخدام طريقة fs.readdirSync ().
- قم بتصفية الملفات لتضمين الملفات ذات الملحق .md فقط.
- استرجع محتويات كل ملف ، بما في ذلك المادة الأمامية باستخدام طريقة الخريطة.
- قم بإرجاع مصفوفة تحتوي على المادة الأمامية و slug (اسم الملف بدون الامتداد .md) لكل ملف.
للحصول على المنشورات المنشورة فقط ، يمكنك تصفية جميع المنشورات وإرجاع فقط تلك التي تم تعيين مفتاح isPublished في المقدمة على true.
يصدّرمقدار ثابت getAllPublished = (folder: string) => {
مقدار ثابت المشاركات = getAllPosts (مجلد)مقدار ثابت تم النشر = posts.filter ((post) => {
يعود post.frontmatter.is تم نشره حقيقي
})
يعود نشرت
}
في md.js ، أضف وظيفة getSinglePost () لاسترداد محتويات منشور واحد.
يصدّرمقدار ثابت getSinglePost = (slug: string، مجلد: string) => {
مقدار ثابت المصدر = getFileContent (`$ {slug}.md`، مجلد)؛
مقدار ثابت { بيانات: frontmatter، content} = مادة (مصدر) ؛
يعود {
أمامي
محتوى،
};
};
تستدعي هذه الوظيفة دالة getFileContent () للحصول على محتويات كل ملف. ثم باستخدام حزمة المواد الرمادية ، تسترد الوظيفة المادة الأمامية ومحتوى تخفيض السعر.
عرض جميع مشاركات المدونة
يوفر Next.js خيارات عرض مختلفة ، أحدها إنشاء ثابت. التوليد الثابت هو نوع من العرض المسبق حيث يقوم Next.js بإنشاء جميع صفحات HTML أثناء وقت الإنشاء. يمكنك استخدامه لإنشاء صفحات ثابتة سريعة.
تفحص ال وثائق Nextjs الرسمية لمزيد من المعلومات حول التقديم.
سيقوم Next.js بتصيير الصفحة مسبقًا في وقت الإنشاء باستخدام الخاصيات التي يتم إرجاعها بواسطة دالة getStaticProps. في هذه الحالة ، ستكون الدعائم عبارة عن مجموعة من المشاركات المنشورة.
يصدّرمقدار ثابت getStaticProps = غير متزامن () => {
مشاركات const = getAllPublished ("دعامات");
يعود {
الدعائم: {مشاركات} ،
};
};
قم بتعديل ملف index.js لعرض قائمة منشورات المدونة.
يستورد رأس من "التالي / الرأس" ؛
يستورد وصلة من "التالي / الرابط" ؛
يستورد {getAllPublished} من "../utils/md" ؛وظيفةبيت({ دعامات }) {
يعود (
<div className = {styles.container}>
<رأس>
<عنوان>إنشاء التطبيق التالي</title>
<اسم التعريف ="وصف" المحتوى ="تم إنشاؤه عن طريق إنشاء التطبيق التالي" />
<ارتباط rel ="أيقونة" href ="/favicon.ico" />
</Head>
<شعبة>
{posts.map ((post) => (
<مفتاح المقالة = {post.slug}>
<ص>[{post.frontmatter.tags.join (", ")} ]</ ص>
`المشاركات /$ {post.slug}`}>
<أ>{post.frontmatter.title}</أ>
</Link>{""}
<ص>{post.frontmatter.description}</ ص>
</article>
))}
</div>
</div>
);
}يصدّرمقدار ثابت getStaticProps = غير متزامن () => {
مشاركات const = getAllPublished ("محتوى");يعود {
الدعائم: {مشاركات} ،
};
};
يصدّرتقصير بيت؛
يستخدم مكوِّن الصفحة الرئيسية التدوينات التي تم إرجاعها بواسطة getStaticProps. يتكرر عليها باستخدام وظيفة الخريطة ، ويعرض لكل منشور عنوانًا ، ورابطًا إلى المنشور الكامل ، ووصفًا.
اعرض منشور مدونة
كما ذكرنا ، سيتم استخدام أسماء ملفات المنشورات كمسارات URL. هذه المسارات ديناميكية أيضًا ، لذلك تحتاج إلى إنشائها أثناء وقت الإنشاء. يتيح لك Next.js القيام بذلك باستخدام دالة getStaticPaths ().
على سبيل المثال ، في هذا الرمز ، يتم إنشاء المسارات من أسماء ملفات markdown.
يصدّرمقدار ثابت getStaticPaths = غير متزامن () => {
مسارات const = getAllPublished ("دعامات"). الخريطة (({slug}) => ({params: {slug}})) ؛
يعود {
مسارات،
تراجع: خطأ شنيع,
};
};
لاحظ أنك تستخدم بيانات المنشورات التي تم إرجاعها بواسطة وظيفة المساعد getAllPublished () التي أنشأتها من قبل.
أنت تقوم أيضًا بتعيين الرجوع إلى خطأ ، والذي يقوم بإرجاع ملف 404 خطأ للمسارات غير الموجودة.
عادةً ما يتم استخدام getStaticPaths () مع getStaticProps () الذي يسترد محتويات كل منشور بناءً على المعلمات.
يصدّرمقدار ثابت getStaticProps = غير متزامن ({params}) => {
مقدار ثابت آخر = انتظر getSinglePost (params.slug ، "المشاركات") ؛
يعود {
الدعائم: {... post}،
};
};
لتصيير العلامة إلى HTML ، استخدم علامة رد الفعل.
يستورد رياكت من "رد فعل تخفيض السعر"
يستورد {getAllPosts، getSinglePost} من "../../utils/md" ؛
مقدار ثابت إرسال = ({content، frontmatter}) => {
يعود (
<شعبة>
<ص>{frontmatter.tags.join (', ')}</ ص>
<h2>{frontmatter.title}</h2>
<فترة>{frontmatter.publishedDate}</span>
<رياكت>{محتوى}</ReactMarkdown>
</div>
);
};
سيعرض هذا المكون محتويات كل منشور في المدونة وعنوان URL المقابل له.
في حالة إنشاء مدونة مطور ، يمكنك ذلك إضافة تسليط الضوء على بناء الجملة القدرة لكل مكون.
تصميم مدونة Next.js Markdown
لقد قمت حتى الآن بإنشاء مدونة تمييز Next.js تعرض قائمة منشورات المدونة وتعرض محتويات ذلك المنشور. لجعل المدونة تبدو أجمل ، يجب عليك إضافة أنماط CSS.
يحتوي Next.js على دعم CSS جيد ، ويمكنك اختيار استخدام مكتبات CSS-in-JS مثل المكونات المصممة. إذا كنت تفضل فصل CSS عن JS ، فيمكنك استخدام وحدات CSS النمطية.
