ButterCMS چیست؟
ButterCMS یک CMS مبتنی بر ابر، اول API و بدون هد است که به شما امکان میدهد به سرعت برنامهها و وبسایتهای مبتنی بر CMS بسازید. دارای داشبوردی با کاربری آسان برای ایجاد و مدیریت محتوا. این با یک موتور وبلاگ از پیش ساخته شده با اولین API ارائه می شود که به صورت خارج از جعبه برای SEO بهینه شده است، که به شما امکان می دهد به سرعت یک سیستم وبلاگ کاربردی را برای وب سایت ها یا برنامه ها بسازید و یکپارچه کنید. این یکپارچه با برنامه های جدید و موجود ادغام می شود و یکی از بهترین CMS های بدون هد موجود است.
پیش نیازهای آموزشی
در زیر الزامات اصلی برای دنبال کردن همراه با این آموزش آورده شده است:
- دانش پایه از Next.js
- یک ویرایشگر کد مانند Sublime یا Visual Studio Code
- نمادهای بسیار جذاب قلم
- A ButterCMS حساب آزمایشی
راه اندازی محیط توسعه
قبل از شروع، یک ترمینال را باز کنید و به جایی که میخواهید ایجاد/ذخیره کنید بروید و دستور زیر را اجرا کنید تا 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
شما می توانید خود را دریافت کنید READ API توکن از شما داشبورد تنظیمات.
راه اندازی ButterCMS
پس از ایجاد یک حساب کاربری ButterCMS، وارد داشبورد خود شوید ButterCMS سایت اینترنتی. یکی از چشمگیرترین ویژگی های ButterCMS این است که با یک موتور وبلاگ از پیش ساخته شده است که به راحتی با وب سایت ها یا برنامه های شما با استفاده از یک API ساختاریافته یکپارچه می شود. موتور وبلاگ دارای یک راه اندازی محتوای بصری است که برای ایجاد پست های وبلاگ طراحی شده است، بنابراین هیچ راه اندازی از انتهای شما لازم نیست. این یک رویکرد پلاگین و بازی است. برای راه اندازی یک وبلاگ، به داشبورد خود بروید و روی پست های وبلاگ از نوار کناری سمت چپ کلیک کنید:
پس از باز شدن صفحه جدید، روی آن کلیک کنید مطلب جدید در گوشه سمت راست بالای داشبورد را فشار دهید و اطلاعات پست وبلاگ خود را به صفحه ای که باز می شود اضافه کنید.
موتور وبلاگ ButterCMS همراه با یک WYSIWYG ویرایشگری که به شما امکان می دهد به راحتی برای سایت وبلاگ خود محتوا ایجاد کنید. دارای چندین ویژگی است که به شما امکان می دهد فایل های رسانه ای مانند فیلم ها و تصاویر را وارد کنید، یک ویرایشگر متن با استفاده آسان را ارائه می دهد و شامل بخشی برای تنظیم تمام ابرداده های وبلاگ شما است.
در صفحه ویرایش وبلاگ، عنوان پست وبلاگ خود را وارد کنید، محتوا را با استفاده از ویرایشگر متن اضافه کنید و یک تصویر جلد، اطلاعات نویسنده، برچسب های مربوطه و داده های مهم SEO را در آن قرار دهید.
در تصویر بالا، موتور وبلاگ شامل بخشی است که به شما امکان می دهد دسته ها و برچسب ها را اضافه کنید، خلاصه وبلاگ و بخشی برای سئوی وبلاگ. برای افزودن پست های وبلاگ بیشتر می توانید مراحل بالا را دنبال کنید. پس از درج تمام جزئیات وبلاگ خود، روی آن کلیک کنید منتشر کردن در گوشه سمت راست بالای داشبورد خود را فشار دهید تا پست خود را منتشر کنید.
یکپارچه سازی و ارائه داده ها از ButterCMS API
فراموش نکنید که برای اتصال ButterCMS به برنامه خود، باید خود را ذخیره کنید API را بخوانید کلید به عنوان یک متغیر محیطی پس از آماده سازی محتوای خود در ButterCMS، ویرایشگر کد خود را باز کنید و یک پوشه کامپوننت در آن ایجاد کنید. " پوشه پروژه Next خود را، سپس یک را ایجاد کنید پاورقی جز component و طرح جزء.
کامپوننت 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 را با بهترین روش ها، استانداردهای پذیرفته شده در صنعت و برگه تقلب شامل بررسی کنید. دستورات Google 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 را ایجاد کنید و با قرار دادن محتوای صفحه خود در آن، مولفه Footer را به صفحه خود اضافه کنید. در نتیجه، مؤلفه Layout کودکان را به عنوان ابزار میپذیرد و به شما امکان میدهد به محتوای صفحات Next.js خود دسترسی داشته باشید.
باز کردن Layout.js کامپوننت و کد زیر را اضافه کنید:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
اکنون می توانید مولفه 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/pages پوشه در پوشه فعلی، یک فایل جدید به نام ایجاد کنید [id].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="/fa/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 } } }
در کد بالا، هر صفحه بر اساس آن تولید می شود شناسه params: post.slug.
توجه: فراموش نکنید که فایل style/global.css را کپی کنید repo Github و اگر همراه با آموزش دنبال می کنید، آن را به فایل پروژه خود اضافه کنید.
سپس دستور زیر را اجرا کنید تا برنامه خود را در حالت dev اجرا کنید:
صفحه وبلاگ شما به شکل زیر خواهد بود:
و هر صفحه پست وبلاگ به شکل زیر خواهد بود:
می توانید پایگاه کد این آموزش را از اینجا دریافت کنید گیتهاب.
نتیجه
در این مقاله، نحوه ساخت آسان یک وب سایت وبلاگ یا ادغام موتور وبلاگ در وب سایت خود را با استفاده از Next.js و موتور وبلاگ ButterCMS توضیح داده ایم. ButterCMS یک CMS بدون هد عالی برای ساخت وبلاگ است. از سردرد و زمان ایجاد وبلاگ به صورت دستی صرفه جویی می کند. با ButterCMS به راحتی می توانید با هر زبان برنامه نویسی یا پشته فریم ورک دلخواه خود یک وبلاگ راه اندازی کنید.
برای کسب اطلاعات بیشتر در مورد ButterCMS، می توانید ButterCMS را بررسی کنید مستندات.
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- PlatoData.Network Vertical Generative Ai. به خودت قدرت بده دسترسی به اینجا.
- PlatoAiStream. هوش وب 3 دانش تقویت شده دسترسی به اینجا.
- PlatoESG. خودرو / خودروهای الکتریکی، کربن ، CleanTech، انرژی، محیط، خورشیدی، مدیریت پسماند دسترسی به اینجا.
- BlockOffsets. نوسازی مالکیت افست زیست محیطی. دسترسی به اینجا.
- منبع: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- : دارد
- :است
- :جایی که
- ][پ
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- درباره ما
- بالاتر
- پذیرفتن
- دسترسی
- حساب
- واقعا
- اضافه کردن
- اضافی
- پس از
- معرفی
- اجازه دادن
- اجازه می دهد تا
- در امتداد
- همچنین
- an
- و
- ناشناس
- هر
- API
- نرم افزار
- کاربرد
- برنامه های کاربردی
- روش
- برنامه های
- هستند
- مقاله
- AS
- At
- نویسنده
- بطور خودکار
- در دسترس
- نماد
- در انتظار
- مستقر
- بر هم زدن
- BE
- در زیر
- بهترین
- بلاگ
- پست های وبلاگ
- وبلاگ ها
- می افتد
- بدن
- خود راه انداز
- مرز
- ساختن
- بنا
- دکمه
- by
- صدا
- نام
- CAN
- می توانید دریافت کنید
- دسته
- بررسی
- فرزندان
- انتخاب
- کلیک
- CloudFlare را
- اس ام اس
- رمز
- پایه کد
- می آید
- جزء
- اجزاء
- نتیجه
- تکرار
- اتصال
- کنسول
- شامل
- محتوا
- محتویات
- گوشه
- پوشش
- ایجاد
- ایجاد
- CSS
- جاری
- داشبورد
- داده ها
- داود
- به طور پیش فرض
- طراحی
- جزئیات
- برنامه نویس
- پروژه
- نمایش دادن
- نمایش داده
- صفحه نمایش
- دان
- انجام شده
- پویا
- هر
- به آسانی
- آسان برای استفاده
- سردبیر
- هر دو
- قادر ساختن
- را قادر می سازد
- پایان
- نقطه پایانی
- موتور
- وارد
- محیط
- اجرا کردن
- موجود
- صادرات
- خارجی
- غلط
- امکانات
- پرونده
- فایل ها
- تمرکز
- به دنبال
- پیروی
- برای
- چارچوب
- از جانب
- تابع
- تابعی
- تولید می کنند
- تولید
- دریافت کنید
- رفتن
- GitHub
- Go
- بزرگ
- راهنمایی
- دست
- آیا
- سر
- اینجا کلیک نمایید
- در تردید بودن
- چگونه
- چگونه
- HTML
- HTTPS
- آیکون
- ID
- if
- تصویر
- تصاویر
- مهم
- موثر
- in
- شامل
- مشمول
- شامل
- شاخص
- فرد
- اطلاعات
- داخل
- نصب
- ادغام
- ادغام
- به
- حسی
- IT
- ITS
- کلید
- دانش
- زبان
- راه اندازی
- طرح
- یاد گرفتن
- یادگیری
- ترک کرد
- LG
- پسندیدن
- ارتباط دادن
- لینک
- لینک ها
- ll
- ورود به سیستم
- آرم
- نگاه کنيد
- شبیه
- اصلی
- ساخت
- مدیریت
- دستی
- به معنی
- رسانه ها
- متاداده
- دقیقه
- حالت
- بیش
- اکثر
- باید
- my
- تحت عنوان
- هدایت
- نیاز
- جدید
- بعد
- Next.js
- نه
- of
- on
- ONE
- فقط
- باز کن
- باز می شود
- or
- دیگر
- ما
- خارج
- خود
- با ما
- صفحات
- عبور
- افلاطون
- هوش داده افلاطون
- PlatoData
- پست
- پست ها
- عملی
- آماده
- روند
- برنامه نويسي
- پروژه
- فراهم می کند
- منتشر کردن
- منتشر شده
- به سرعت
- سریعا
- RE
- واکنش نشان می دهند
- خواندن
- مربوط
- تفسیر
- ضروری
- مورد نیاز
- نتیجه
- برگشت
- حلقه
- ریشه
- مسیر
- مسیرها
- دویدن
- s
- ذخیره
- sdk
- یکپارچه
- بخش
- جستجوگرها
- تنظیم
- برپایی
- چند
- سایه
- ورق
- باید
- سایت
- So
- برخی از
- محدوده
- پشته
- Stackabuse
- استانداردهای
- آغاز شده
- گام
- مراحل
- توقف
- ساختار
- استودیو
- چنین
- خلاصه
- سیستم
- پایانه
- که
- La
- آنها
- سپس
- آنجا.
- اینها
- این
- از طریق
- زمان
- عنوان
- به
- رمز
- انتقال
- محاکمه
- آموزش
- توییتر
- استفاده کنید
- با استفاده از
- از طريق
- فیلم های
- راه می رفت
- می خواهم
- we
- سایت اینترنتی
- وب سایت
- که
- اراده
- با
- در داخل
- XML
- شما
- شما
- زفیرنت