شعار زيفيرنت

ذكاء البيانات التوليدية

رمز

إنشاء مدونة باستخدام Next.js و ButterCMS

أعاد نشره أفلاطون
أعاد نشره أفلاطون

التاريخ:

المشاهدات: 202

ما هو ButterCMS

ButterCMS عبارة عن نظام CMS قائم على السحابة ، يعمل بواجهة برمجة التطبيقات ، بدون رأس يمكّنك من إنشاء تطبيقات ومواقع ويب مدعومة بنظام CMS بسرعة. يحتوي على لوحة تحكم سهلة الاستخدام لإنشاء المحتوى وإدارته. يأتي مزودًا بمحرك مدونة تم إنشاؤه مسبقًا من قبل واجهة برمجة التطبيقات (API) وهو مُحسّن لتحسين محركات البحث (SEO) خارج الصندوق ، والذي يمكّنك من إنشاء ودمج نظام مدونة وظيفي سريعًا لمواقع الويب أو التطبيقات. إنه يندمج بسلاسة في التطبيقات الجديدة والحالية وهو أحد أفضل أنظمة إدارة المحتوى بدون رأس المتاحة.

متطلبات البرنامج التعليمي

فيما يلي المتطلبات الرئيسية التي يجب اتباعها مع هذا البرنامج التعليمي:

  • المعرفة الأساسية ب Next.js
  • محرر كود مثل Sublime أو Visual Studio Code
  • رموز الخط رهيبة
  • A زبدةCMS حساب تجريبي.

تهيئة البيئة التنموية

قبل أن تبدأ ، افتح Terminal وانتقل إلى المكان الذي تريد إنشاء / تخزين وتشغيل هذا الأمر أدناه لتنفيذ create-next-app لتشغيل المشروع.

$ npx create-next-app my-blog

بعد ذلك ، ستظهر مطالبة تطلب منك تأكيد بعض التبعيات الإضافية. بعد ذلك ، سيؤدّي الأمر أعلاه تلقائيًا بنية مجلد لمشروعنا.

الخطوة التالية هي تكوين ButterCMS في مشروع Next.js باستخدام ButterCMS SDK باستخدام الأمر التالي:

$ npm install butter --save
# OR
$ yarn add buttercms

بعد ذلك ، قم بإنشاء حساب Butter. فوق هذا الصفحة لإنشاء حسابك. بعد ذلك ، لتوصيل ButterCMS بالتطبيق الخاص بك ، ستحتاج إلى حفظ مفتاح READ API Token كمتغير بيئة. قم بإنشاء ملف .env في جذر دليل المشروع الخاص بك وأضف رمز ButterCMS API المميز كمتغير بيئة:

NEXT_PUBLIC_API_KEY=YOUR_API_KEY

يمكنك الحصول على قراءة API رمز من الخاص بك لوحة القيادة.

إعداد ButterCMS

بعد إنشاء حساب ButterCMS ، قم بتسجيل الدخول إلى لوحة التحكم الخاصة بك على زبدةCMS موقع إلكتروني. تتمثل إحدى الميزات الأكثر إثارة للإعجاب في ButterCMS في أنها تأتي مع محرك مدونة مُصمم مسبقًا يتكامل بسهولة مع مواقع الويب أو التطبيقات الخاصة بك باستخدام واجهة برمجة تطبيقات جيدة التنظيم. يحتوي محرك المدونة على إعداد محتوى سهل الاستخدام مصمم لإنشاء منشورات المدونة ، لذلك لا يلزم الإعداد من نهايتك ؛ إنه نهج التوصيل والتشغيل. لإعداد مدونة ، انتقل إلى لوحة التحكم وانقر على منشورات المدونة من الشريط الجانبي الأيسر:

بمجرد فتح الصفحة الجديدة ، انقر فوق وظيفة جديدة الزر الموجود في الزاوية العلوية اليمنى من لوحة المعلومات وأضف معلومات منشور المدونة الخاصة بك على الصفحة التي تفتح.

يأتي محرك مدونة ButterCMS بامتداد WYSIWYG محرر يسمح لك بإنشاء محتوى لموقع مدونتك بسهولة. إنه يتميز بالعديد من الميزات التي تمكنك من إدراج ملفات الوسائط مثل مقاطع الفيديو والصور ، ويوفر محرر نصوص سهل الاستخدام ، ويتضمن قسمًا لإعداد جميع البيانات الوصفية لمدونتك.

في صفحة تحرير المدونة ، أدخل عنوان منشور المدونة الخاص بك ، وأضف محتوى باستخدام محرر النصوص ، وقم بتضمين صورة الغلاف ومعلومات المؤلف والعلامات ذات الصلة وبيانات تحسين محركات البحث المهمة.

في الصورة أعلاه ، يشتمل محرك المدونة على قسم يسمح لك بإضافة فئات وعلامات وملخص المدونة وقسم لتحسين محركات البحث في المدونة. يمكنك اتباع الخطوات المذكورة أعلاه لإضافة المزيد من مشاركات المدونة. بعد إدخال جميع تفاصيل مدونتك ، انقر فوق نشر الزر الموجود في الزاوية العلوية اليمنى من لوحة التحكم لنشر مشاركتك.

تكامل وتقديم البيانات من ButterCMS API

لا تنس أنه لربط ButterCMS بالتطبيق الخاص بك ، يجب عليك حفظ ملف قراءة API مفتاح كمتغير بيئة. بعد الانتهاء من إعداد المحتوى الخاص بك في ButterCMS ، افتح محرر التعليمات البرمجية وأنشئ مجلد مكونات في ملف SRC مجلد مشروعك التالي ، ثم أنشئ ملف تذييل مكون و تصميم المكون.

افتح مكون Footer.js وأضف الكود التالي:

 const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> (c) {new Date().getFullYear()} David Adeneye </p> <div className="social_icons"> <a href="https://twitter.com/davidadeneye" aria-label="Twitter" target="_blank" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/daacode" aria-label="GitHub" target="_blank" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/david-adeneye-490027188/" aria-label="LinkedIn" target="_blank" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;

تحقق من دليلنا العملي العملي لتعلم Git ، مع أفضل الممارسات ، والمعايير المقبولة في الصناعة ، وورقة الغش المضمنة. توقف عن أوامر Googling Git وفي الواقع تعلم ذلك!

سيضيف الكود أعلاه قسم التذييل للصفحة ، والذي سيتم عرضه في جميع صفحات المدونة.

في هذه المقالة ، سنستخدم أيقونات Font Awesome. لاستخدام Font Awesome ، يمكنك إما تثبيته في مشروعك أو استخدام CDN الخاص به. يمكنك إضافة رابط CDN إلى ملف _document.js ملف مثل هذا:

import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossOrigin="anonymous" referrerPolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> )
}

ثم قم بإنشاء مكون التخطيط وأضف مكون التذييل إلى صفحتك عن طريق تغليف محتوى صفحتك بداخله. نتيجة لذلك ، سيقبل مكون Layout الأطفال كدعائم ، مما يسمح لك بالوصول إلى محتويات صفحات Next.js الخاصة بك.

فتح Layout.js المكون وإضافة الكود التالي أدناه:


import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;

يمكنك الآن دمج مكون التخطيط في صفحاتك عن طريق تغليف محتوى الصفحة به.

ساعات العمل _app.js ملف لإضافة الكود التالي:

 import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}

ثم افتح ملف index.js ملف وإضافة الكود التالي:

import React, { useEffect, useState } from "react"; import Link from "next/link"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Blog({ posts }) { console.log(posts); return ( <> <div className="nav-container"> <div className="logo"> <Link href="/"> David Adeneye </Link> </div> <Link href="#" className="blog-menu"> My Blog </Link> <a href="" className="cta-btn">Subscribe</a> </div> <div className="blogpost-container"> {posts.data.map((post, index) => ( <div className="blogpost-box" key={index}> <div className="blogpost-img"> <img src={post.featured_image} alt="Blog" width={300} height={300}/> </div> <div className="blogpost-text"> <span className="blogpost-tag">{post.tags[0].name}</span> <a href={`/posts/${post.slug}`} className="blogpost-title">{post.title}</a> <p>{post.summary}</p> </div> <div className="blogpost-footer"> <div> <img src={post.author.profile_image} alt="avatar" /> <p className="blogpost-name">{ post.author.first_name + " " + post.author.last_name }</p> </div> <Link href={`/posts/${post.slug}`} className="blogpost-link"> Read More </Link> </div> </div> ))} </div> </> );
} export async function getStaticProps() { const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() return { props: { posts, }, } }

يجلب الكود أعلاه بيانات المنشور من ButterCMS API ويعرضها على الصفحة.

بعد ذلك ، نحتاج إلى إنشاء صفحة مدونة فردية ترتبط بها كل مشاركة مدونة باستخدام مسارات ديناميكية. يمكّنك Next.js من إنشاء صفحات بمسارات تعتمد على البيانات الخارجية. لإنشاء مسارات ديناميكية لمنشورات المدونة ، قم بإنشاء مجلد باسم المشاركات داخل src / صفحات مجلد. داخل المجلد الحالي ، قم بإنشاء ملف جديد باسم [المعرف] .js وأضف الكود التالي:

import React, { useEffect, useState } from "react"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Post({ post }) { console.log(post.data.title) return( <> <div className="blog-container"> <span className="blog-goBack"><a href="/ar/blog">Go back</a></span> <div className="blog-wrap"> <header> <p className="blog-date">Published {post.data.created}</p> <h1>{post.data.title}</h1> <div className="blog-tag"> <div></div> </div> </header> <img src={post.data.featured_image} alt="cover" /> <div className="blog-content" dangerouslySetInnerHTML={{__html: post.data.body }}></div> </div> </div> </> )
} // This function gets called at build time
export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.data.map((post) => ({ params: { id: post.slug }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } // This also gets called at build time
export async function getStaticProps({ params }) { // params contains the post `id`. // If the route is like /posts/1, then params.id is 1 const res = await fetch(`https://api.buttercms.com/v2/posts/${params.id}?auth_token=${read_token}`) const post = await res.json() // Pass post data to the page via props return { props: { post } } }

في الكود أعلاه ، سيتم إنشاء كل صفحة بناءً على ملف معرف المعلمات: post.slug.

ملاحظة: لا تنس نسخ ملف style / global.css من ملف جيثو الريبو وقم بإضافته إلى ملف المشروع الخاص بك إذا كنت تتابع مع البرنامج التعليمي.

ثم قم بتشغيل الأمر أدناه لتشغيل تطبيقك في وضع dev:

ستبدو صفحة المدونة الخاصة بك كما يلي:

وستبدو كل صفحة نشر مدونة على النحو التالي:

يمكنك الحصول على التعليمات البرمجية لهذا البرنامج التعليمي هنا على جيثب.

وفي الختام

في هذه المقالة ، استعرضنا كيفية إنشاء موقع ويب للمدونة بسهولة أو دمج محرك مدونة في موقع الويب الخاص بك باستخدام Next.js ومحرك مدونة ButterCMS. ButterCMS هو عبارة عن نظام CMS مقطوع الرأس رائع لبناء المدونات ؛ سيوفر عليك المتاعب والوقت من إنشاء مدونة يدويًا. يمكنك بسهولة إعداد مدونة بأي لغة برمجة أو حزمة إطارات من اختيارك باستخدام ButterCMS.

لمعرفة المزيد حول ButterCMS ، يمكنك التحقق من ButterCMS توثيق.

بقعة_صورة

أحدث المعلومات الاستخباراتية

بقعة_صورة

حقوق النشر @ 2024 Plato Technologies Inc.