बटरसीएमएस क्या है?
बटरसीएमएस एक क्लाउड-आधारित, एपीआई-प्रथम, हेडलेस सीएमएस है जो आपको तेजी से सीएमएस-संचालित ऐप्स और वेबसाइट बनाने में सक्षम बनाता है। इसमें सामग्री बनाने और प्रबंधित करने के लिए उपयोग में आसान डैशबोर्ड है। यह एक प्रीबिल्ट, एपीआई-फर्स्ट ब्लॉग इंजन के साथ आता है जो एसईओ-अनुकूलित आउट-ऑफ-द-बॉक्स है, जो आपको वेबसाइटों या ऐप्स के लिए एक कार्यात्मक ब्लॉग सिस्टम को जल्दी से बनाने और एकीकृत करने में सक्षम बनाता है। यह नए और मौजूदा अनुप्रयोगों में सहजता से एकीकृत होता है और वहां उपलब्ध सर्वोत्तम हेडलेस सीएमएस में से एक है।
ट्यूटोरियल पूर्वापेक्षाएँ
इस ट्यूटोरियल के साथ अनुसरण करने योग्य मुख्य आवश्यकताएँ नीचे दी गई हैं:
- का बुनियादी ज्ञान Next.js
- एक कोड संपादक जैसे कि सबलाइम या विज़ुअल स्टूडियो कोड
- फ़ॉन्ट विस्मयकारी प्रतीक
- A बटरसीएमएस परीक्षण खाता।
विकास परिवेश की स्थापना
आरंभ करने से पहले, एक टर्मिनल खोलें और जहां आप बनाना/स्टोर करना चाहते हैं वहां नेविगेट करें और प्रोजेक्ट को बूटस्ट्रैप करने के लिए क्रिएट-नेक्स्ट-ऐप निष्पादित करने के लिए नीचे दिए गए इस कमांड को चलाएं।
$ npx create-next-app my-blog
फिर, एक संकेत प्रदर्शित होगा, जिसमें आपसे कुछ अतिरिक्त निर्भरताओं की पुष्टि करने का अनुरोध किया जाएगा। उसके बाद, उपरोक्त आदेश स्वचालित रूप से हमारे प्रोजेक्ट के लिए एक फ़ोल्डर संरचना तैयार कर देगा।
अगला कदम निम्नलिखित कमांड का उपयोग करके हमारे नेक्स्ट.जेएस प्रोजेक्ट में बटरसीएमएस एसडीके के साथ बटरसीएमएस को कॉन्फ़िगर करना है:
$ npm install butter --save
# OR
$ yarn add buttercms
इसके बाद बटर अकाउंट बनाएं। इसे क्लिक करें संपर्क अपना खाता बनाने के लिए. फिर, बटरसीएमएस को अपने एप्लिकेशन से कनेक्ट करने के लिए, आपको पर्यावरण चर के रूप में रीड एपीआई टोकन कुंजी को सहेजना होगा। अपनी प्रोजेक्ट निर्देशिका के मूल में एक .env फ़ाइल बनाएं और अपने बटरसीएमएस एपीआई टोकन को पर्यावरण चर के रूप में जोड़ें:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
आप अपने प्राप्त कर सकते हैं एपीआई पढ़ें आपकी ओर से टोकन सेटिंग्स डैशबोर्ड.
बटरसीएमएस की स्थापना
बटरसीएमएस खाता बनाने के बाद, अपने डैशबोर्ड पर लॉग इन करें बटरसीएमएस वेबसाइट। बटरसीएमएस की सबसे प्रभावशाली विशेषताओं में से एक यह है कि यह एक पूर्व-निर्मित ब्लॉग इंजन के साथ आता है जो एक अच्छी तरह से संरचित एपीआई का उपयोग करके आसानी से आपकी वेबसाइटों या एप्लिकेशन के साथ एकीकृत होता है। ब्लॉग इंजन में ब्लॉग पोस्ट बनाने के लिए डिज़ाइन किया गया एक सहज सामग्री सेटअप है, इसलिए आपकी ओर से किसी सेटअप की आवश्यकता नहीं है; यह एक प्लग-एंड-प्ले दृष्टिकोण है। ब्लॉग सेट करने के लिए, अपने डैशबोर्ड में जाएँ और बाएँ साइडबार से ब्लॉग पोस्ट पर क्लिक करें:
नया पेज खुलने पर पर क्लिक करें नई पोस्ट डैशबोर्ड के ऊपरी-दाएँ कोने पर बटन और खुलने वाले पृष्ठ पर अपने ब्लॉग पोस्ट की जानकारी जोड़ें।
बटरसीएमएस ब्लॉग इंजन एक के साथ आता है WYSIWYG संपादक जो आपको आसानी से अपने ब्लॉग साइट के लिए सामग्री बनाने की अनुमति देता है। इसमें कई विशेषताएं हैं जो आपको वीडियो और छवियों जैसी मीडिया फ़ाइलों को सम्मिलित करने में सक्षम बनाती हैं, एक उपयोग में आसान टेक्स्ट संपादक प्रदान करती है, और इसमें आपके सभी ब्लॉग मेटाडेटा को सेट करने के लिए एक अनुभाग शामिल है।
ब्लॉग संपादन पृष्ठ पर, अपने ब्लॉग पोस्ट का शीर्षक दर्ज करें, टेक्स्ट संपादक का उपयोग करके सामग्री जोड़ें, और एक कवर छवि, लेखक की जानकारी, प्रासंगिक टैग और महत्वपूर्ण एसईओ डेटा शामिल करें।
उपरोक्त छवि में, ब्लॉग इंजन में एक अनुभाग शामिल है जो आपको श्रेणियां और टैग, ब्लॉग सारांश और ब्लॉग के एसईओ के लिए एक अनुभाग जोड़ने की अनुमति देता है। अधिक ब्लॉग पोस्ट जोड़ने के लिए आप उपरोक्त चरणों का पालन कर सकते हैं। अपने ब्लॉग की सारी जानकारी डालने के बाद क्लिक करें प्रकाशित करना अपनी पोस्ट प्रकाशित करने के लिए अपने डैशबोर्ड के ऊपरी-दाएँ कोने पर बटन।
बटरसीएमएस एपीआई से डेटा को एकीकृत और प्रस्तुत करना
यह न भूलें कि अपने बटरसीएमएस को अपने एप्लिकेशन से कनेक्ट करने के लिए, आपको अपना सहेजना होगा एपीआई पढ़ें पर्यावरण चर के रूप में कुंजी। बटरसीएमएस में अपनी सामग्री तैयार करने के बाद, अपना कोड संपादक खोलें और इसमें एक घटक फ़ोल्डर बनाएं " अपने अगले प्रोजेक्ट का फ़ोल्डर, फिर एक बनाएं पाद घटक और ख़ाका घटक.
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 कमांड को रोकें और वास्तव में सीखना यह!
उपरोक्त कोड पृष्ठ के पाद लेख अनुभाग को जोड़ देगा, जो सभी ब्लॉग पृष्ठों पर प्रदर्शित किया जाएगा।
इस लेख में, हम फ़ॉन्ट विस्मयकारी आइकन का उपयोग करेंगे। फ़ॉन्ट विस्मयकारी का उपयोग करने के लिए, आप या तो इसे अपने प्रोजेक्ट में इंस्टॉल कर सकते हैं या इसके सीडीएन का उपयोग कर सकते हैं। आप अपने में 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> )
}
फिर लेआउट घटक बनाएं और अपने पृष्ठ की सामग्री को उसमें लपेटकर फ़ुटर घटक को अपने पृष्ठ में जोड़ें। परिणामस्वरूप, लेआउट घटक बच्चों को प्रॉप्स के रूप में स्वीकार करेगा, जिससे आप अपने नेक्स्ट.जेएस पेजों की सामग्री तक पहुंच सकेंगे।
ओपन लेआउट.जे.एस घटक और नीचे निम्नलिखित कोड जोड़ें:
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, }, } }
उपरोक्त कोड बटरसीएमएस एपीआई से पोस्ट डेटा लाता है और उन्हें पेज पर प्रदर्शित करता है।
इसके बाद, हमें एक व्यक्तिगत ब्लॉग पेज बनाने की आवश्यकता है, जिससे प्रत्येक ब्लॉग पोस्ट गतिशील मार्गों का उपयोग करके लिंक हो। Next.js आपको बाहरी डेटा पर निर्भर पथों वाले पेज बनाने में सक्षम बनाता है। ब्लॉग पोस्ट के लिए डायनामिक रूट बनाने के लिए, नाम का एक फ़ोल्डर बनाएं प्रविष्टियाँ अंदर src / पृष्ठों फ़ोल्डर. वर्तमान फ़ोल्डर के भीतर, नाम से एक नई फ़ाइल बनाएं [आईडी].जेएस और निम्नलिखित कोड जोड़ें:
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="/hi/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 } } }
उपरोक्त कोड में, प्रत्येक पृष्ठ के आधार पर तैयार किया जाएगा पैराम्स आईडी: पोस्ट.स्लग.
ध्यान दें: style/global.css फ़ाइल को कॉपी करना न भूलें गितुब रेपो और यदि आप ट्यूटोरियल का अनुसरण कर रहे हैं तो इसे अपनी प्रोजेक्ट फ़ाइल में जोड़ें।
फिर अपने ऐप को डेव मोड में लॉन्च करने के लिए नीचे दिया गया कमांड चलाएँ:
आपका ब्लॉग पेज इस तरह दिखेगा:
और प्रत्येक ब्लॉग पोस्ट पेज इस तरह दिखेगा:
आप इस ट्यूटोरियल के लिए कोडबेस यहां से प्राप्त कर सकते हैं Github.
निष्कर्ष
इस लेख में, हमने नेक्स्ट.जेएस और बटरसीएमएस ब्लॉग इंजन का उपयोग करके किसी ब्लॉग वेबसाइट को आसानी से कैसे तैयार किया जाए या अपनी वेबसाइट में ब्लॉग इंजन को कैसे एकीकृत किया जाए, इसके बारे में बताया है। ब्लॉग बनाने के लिए बटरसीएमएस एक बेहतरीन हेडलेस सीएमएस है; यह आपको मैन्युअल रूप से ब्लॉग बनाने से होने वाले सिरदर्द और समय से बचाएगा। आप बटरसीएमएस के साथ अपनी पसंद की किसी भी प्रोग्रामिंग भाषा या फ्रेमवर्क स्टैक के साथ आसानी से एक ब्लॉग स्थापित कर सकते हैं।
बटरसीएमएस के बारे में अधिक जानने के लिए, आप बटरसीएमएस की जांच कर सकते हैं दस्तावेज़ीकरण.
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोडेटा.नेटवर्क वर्टिकल जेनरेटिव एआई। स्वयं को शक्तिवान बनाएं। यहां पहुंचें।
- प्लेटोआईस्ट्रीम। Web3 इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- प्लेटोईएसजी. ऑटोमोटिव/ईवीएस, कार्बन, क्लीनटेक, ऊर्जा, पर्यावरण, सौर, कचरा प्रबंधन। यहां पहुंचें।
- BlockOffsets. पर्यावरणीय ऑफसेट स्वामित्व का आधुनिकीकरण। यहां पहुंचें।
- स्रोत: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :हैस
- :है
- :कहाँ
- ][पी
- $यूपी
- 1
- 12
- 20
- 7
- 8
- a
- About
- ऊपर
- स्वीकार करें
- पहुँच
- लेखा
- वास्तव में
- जोड़ना
- अतिरिक्त
- बाद
- सब
- की अनुमति दे
- की अनुमति देता है
- साथ में
- भी
- an
- और
- गुमनाम
- कोई
- एपीआई
- अनुप्रयोग
- आवेदन
- अनुप्रयोगों
- दृष्टिकोण
- क्षुधा
- हैं
- लेख
- AS
- At
- लेखक
- स्वतः
- उपलब्ध
- अवतार
- का इंतजार
- आधारित
- खूब जोर से पीटना
- BE
- नीचे
- BEST
- ब्लॉग
- वेबदैनिकी डाक
- ब्लॉग
- दावा
- परिवर्तन
- जूते का फीता
- सीमा
- निर्माण
- इमारत
- बटन
- by
- कॉल
- बुलाया
- कर सकते हैं
- पा सकते हैं
- श्रेणियाँ
- चेक
- बच्चे
- चुनाव
- क्लिक करें
- CloudFlare
- सीएमएस
- कोड
- codebase
- आता है
- अंग
- घटकों
- निष्कर्ष
- पुष्टि करें
- जुडिये
- कंसोल
- शामिल हैं
- सामग्री
- अंतर्वस्तु
- कोना
- आवरण
- बनाना
- बनाना
- सीएसएस
- वर्तमान
- डैशबोर्ड
- तिथि
- डेविड
- चूक
- बनाया गया
- विवरण
- देव
- विकास
- डिस्प्ले
- दिखाया गया है
- प्रदर्शित करता है
- डॉन
- किया
- गतिशील
- से प्रत्येक
- आसानी
- आसान करने के लिए उपयोग
- संपादक
- भी
- सक्षम
- सक्षम बनाता है
- समाप्त
- endpoint
- इंजन
- दर्ज
- वातावरण
- निष्पादित
- मौजूदा
- निर्यात
- बाहरी
- असत्य
- विशेषताएं
- पट्टिका
- फ़ाइलें
- फोकस
- का पालन करें
- निम्नलिखित
- के लिए
- ढांचा
- से
- समारोह
- कार्यात्मक
- उत्पन्न
- उत्पन्न
- मिल
- जाना
- GitHub
- Go
- महान
- गाइड
- हाथों पर
- है
- सिर
- यहाँ उत्पन्न करें
- मंडराना
- कैसे
- How To
- एचटीएमएल
- HTTPS
- माउस
- ID
- if
- की छवि
- छवियों
- महत्वपूर्ण
- प्रभावशाली
- in
- शामिल
- शामिल
- शामिल
- अनुक्रमणिका
- व्यक्ति
- करें-
- अंदर
- स्थापित
- एकीकृत
- एकीकृत
- में
- सहज ज्ञान युक्त
- IT
- आईटी इस
- कुंजी
- ज्ञान
- भाषा
- लांच
- ख़ाका
- जानें
- सीख रहा हूँ
- बाएं
- LG
- पसंद
- LINK
- लिंक्डइन
- लिंक
- ll
- लॉग इन
- प्रतीक चिन्ह
- देखिए
- हमशक्ल
- मुख्य
- निर्माण
- प्रबंध
- मैन्युअल
- साधन
- मीडिया
- मेटाडाटा
- मिनट
- मोड
- अधिक
- अधिकांश
- चाहिए
- my
- नामांकित
- नेविगेट करें
- आवश्यकता
- नया
- अगला
- Next.js
- नहीं
- of
- on
- ONE
- केवल
- खुला
- खोलता है
- or
- अन्य
- हमारी
- आउट
- अपना
- पृष्ठ
- पृष्ठों
- पास
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- पद
- पोस्ट
- व्यावहारिक
- तैयारी
- प्रक्रिया
- प्रोग्रामिंग
- परियोजना
- प्रदान करता है
- प्रकाशित करना
- प्रकाशित
- जल्दी से
- तेजी
- RE
- प्रतिक्रिया
- पढ़ना
- प्रासंगिक
- प्रतिपादन
- अपेक्षित
- आवश्यकताएँ
- परिणाम
- वापसी
- अंगूठी
- जड़
- मार्ग
- मार्गों
- रन
- s
- सहेजें
- एसडीके
- मूल
- अनुभाग
- एसईओ
- सेट
- व्यवस्था
- कई
- छाया
- चादर
- चाहिए
- साइट
- So
- कुछ
- विस्तार
- धुआँरा
- स्टैकब्यूज
- मानकों
- शुरू
- कदम
- कदम
- रुकें
- संरचना
- स्टूडियो
- ऐसा
- सारांश
- प्रणाली
- अंतिम
- कि
- RSI
- उन
- फिर
- वहाँ।
- इन
- इसका
- यहाँ
- पहर
- शीर्षक
- सेवा मेरे
- टोकन
- संक्रमण
- परीक्षण
- ट्यूटोरियल
- उपयोग
- का उपयोग
- के माध्यम से
- वीडियो
- चला
- करना चाहते हैं
- we
- वेबसाइट
- वेबसाइटों
- कौन कौन से
- मर्जी
- साथ में
- अंदर
- एक्सएमएल
- आप
- आपका
- जेफिरनेट