מה זה ButterCMS
ButterCMS הוא CMS מבוסס ענן, תחילה API ללא ראש, המאפשר לך לבנות במהירות אפליקציות ואתרי אינטרנט המופעלים על ידי CMS. יש לו לוח מחוונים קל לשימוש ליצירה וניהול של תוכן. הוא מגיע עם מנוע בלוג בנוי מראש, API-ראשון, מותאם לקידום אתרים מהקופסה, המאפשר לך לבנות ולשלב במהירות מערכת בלוגים פונקציונלית עבור אתרי אינטרנט או אפליקציות. הוא משתלב בצורה חלקה ביישומים חדשים וקיימים והוא אחד ממערכות ה-CMS חסרות הראש הטובות ביותר שקיימות בחוץ.
הדרכה דרישות מוקדמות
להלן הדרישות העיקריות שיש לבצע יחד עם הדרכה זו:
- ידע בסיסי ב Next.js
- עורך קוד כגון Sublime או Visual Studio Code
- אייקונים מדהימים בגופן
- A ButterCMS חשבון ניסיון.
הגדרת סביבת הפיתוח
לפני שתתחיל, פתח מסוף ונווט למקום שבו ברצונך ליצור/לאחסן והפעל את הפקודה הזו למטה כדי להפעיל יישום create-next כדי לאתחל את הפרויקט.
$ 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 בשורש ספריית הפרויקט שלך והוסף את אסימון ה-API של ButterCMS כמשתנה סביבה:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
אתה יכול להשיג את שלך קרא ממשק API אסימון ממך לוח המחוונים של הגדרות.
הגדרת ButterCMS
לאחר יצירת חשבון ButterCMS, היכנס ללוח המחוונים שלך ב- ButterCMS אתר אינטרנט. אחת התכונות המרשימות ביותר של ButterCMS היא שהיא מגיעה עם מנוע בלוג בנוי מראש המשתלב בקלות עם אתרי האינטרנט או האפליקציות שלך באמצעות API מובנה היטב. ל-Blog Engine יש הגדרת תוכן אינטואיטיבית המיועדת ליצירת פוסטים בבלוג, כך שלא נדרשת הגדרה מהצד שלך; זו גישה של הכנס-הפעל. כדי להגדיר בלוג, היכנס ללוח המחוונים שלך ולחץ על הבלוג פוסטים בסרגל הצד השמאלי:
לאחר פתיחת הדף החדש, לחץ על פרסום חדש כפתור בפינה השמאלית העליונה של לוח המחוונים והוסף את פרטי הפוסט בבלוג שלך בדף שנפתח.
מנוע הבלוג ButterCMS מגיע עם א WYSIWYG עורך המאפשר לך ליצור בקלות תוכן לאתר הבלוג שלך. הוא מתהדר במספר תכונות המאפשרות לך להוסיף קובצי מדיה כמו סרטונים ותמונות, מספק עורך טקסט קל לשימוש וכולל קטע להגדרת כל המטא נתונים של הבלוג שלך.
בדף עריכת בלוג, הזן את כותרת הפוסט בבלוג שלך, הוסף תוכן באמצעות עורך הטקסט, וכלול תמונת שער, מידע מחבר, תגים רלוונטיים ונתוני SEO חשובים.
בתמונה למעלה מנוע הבלוג כולל קטע המאפשר הוספת קטגוריות ותגיות, תקציר הבלוג וקטע לקידום אתרים של הבלוג. תוכל לבצע את השלבים שלמעלה כדי להוסיף פוסטים נוספים בבלוג. לאחר הכנסת כל הפרטים של הבלוג שלך, לחץ על לפרסם לחצן בפינה השמאלית העליונה של לוח המחוונים שלך כדי לפרסם את הפוסט שלך.
שילוב ועיבוד נתונים מ-API של ButterCMS
אל תשכח שכדי לחבר את 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, עם שיטות עבודה מומלצות, סטנדרטים מקובלים בתעשייה ודף רמאות כלול. תפסיק לגוגל פקודות 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 והוסף את רכיב הכותרת התחתונה לדף שלך על ידי עטיפה של תוכן הדף בתוכו. כתוצאה מכך, רכיב ה-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, }, } }
הקוד למעלה מביא את נתוני הפוסטים מה-API של ButterCMS ומציג אותם בדף.
לאחר מכן, עלינו ליצור עמוד בלוג בודד שאליו כל פוסט בבלוג מקשר באמצעות מסלולים דינמיים. 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="/iw/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 מה- ריפו של גיטוב והוסיפו אותו לקובץ הפרויקט שלכם אם אתם עוקבים אחרי המדריך.
לאחר מכן הפעל את הפקודה למטה כדי להפעיל את האפליקציה שלך במצב פיתוח:
עמוד הבלוג שלך ייראה כך:
וכל עמוד פוסט בבלוג ייראה כך:
אתה יכול לקבל את בסיס הקוד של הדרכה זו כאן GitHub.
סיכום
במאמר זה, הלכנו על איך בקלות פיגום אתר בלוג או לשלב מנוע בלוג באתר האינטרנט שלך באמצעות Next.js ומנוע הבלוג ButterCMS. ButterCMS הוא CMS כל כך נהדר ללא ראש לבניית בלוגים; זה יחסוך לך את כאב הראש והזמן מיצירת בלוג באופן ידני. אתה יכול בקלות להקים בלוג עם כל שפת תכנות או מסגרת לבחירתך עם ButterCMS.
כדי ללמוד עוד על ButterCMS, אתה יכול לבדוק את ButterCMS תיעוד.
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- PlatoData.Network Vertical Generative Ai. העצים את עצמך. גישה כאן.
- PlatoAiStream. Web3 Intelligence. הידע מוגבר. גישה כאן.
- PlatoESG. רכב / רכבים חשמליים, פחמן, קלינטק, אנרגיה, סביבה, שמש, ניהול פסולת. גישה כאן.
- BlockOffsets. מודרניזציה של בעלות על קיזוז סביבתי. גישה כאן.
- מקור: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :יש ל
- :הוא
- :איפה
- ][עמ'
- $ למעלה
- 1
- 12
- 20
- 7
- 8
- a
- אודות
- מֵעַל
- לְקַבֵּל
- גישה
- חֶשְׁבּוֹן
- למעשה
- להוסיף
- נוסף
- לאחר
- תעשיות
- מאפשר
- מאפשר
- לאורך
- גם
- an
- ו
- אנונימי
- כל
- API
- האפליקציה
- בקשה
- יישומים
- גישה
- אפליקציות
- ARE
- מאמר
- AS
- At
- מחבר
- באופן אוטומטי
- זמין
- גִלגוּל
- לחכות
- מבוסס
- לחבוט
- BE
- להלן
- הטוב ביותר
- בלוג
- בלוג הודעות
- בלוגים
- מתגאה
- גוּף
- אוזן נעל
- גבול
- לִבנוֹת
- בִּניָן
- לַחְצָן
- by
- שיחה
- נקרא
- CAN
- יכול לקבל
- קטגוריות
- לבדוק
- ילדים
- בחירה
- קליק
- CloudFlare
- CMS
- קוד
- בסיס קוד
- מגיע
- רְכִיב
- רכיבים
- מסקנה
- לאשר
- לְחַבֵּר
- קונסול
- מכיל
- תוכן
- תוכן
- בפינה
- לכסות
- לִיצוֹר
- יוצרים
- CSS
- נוֹכְחִי
- לוח מחוונים
- נתונים
- דוד
- בְּרִירַת מֶחדָל
- מעוצב
- פרטים
- dev
- צעצועי התפתחות
- לְהַצִיג
- מוצג
- מציג
- דון
- עשה
- דינמי
- כל אחד
- בקלות
- קל לשימוש
- עורך
- או
- לאפשר
- מאפשר
- סוף
- נקודת קצה
- מנוע
- זן
- סביבה
- לבצע
- קיימים
- יצוא
- חיצוני
- שקר
- תכונות
- שלח
- קבצים
- להתמקד
- לעקוב
- הבא
- בעד
- מסגרת
- החל מ-
- פונקציה
- פונקציונלי
- ליצור
- נוצר
- לקבל
- Git
- GitHub
- Go
- גדול
- מדריך
- ידות על
- יש
- ראש
- כאן
- לרחף
- איך
- איך
- HTML
- HTTPS
- סמלים
- ID
- if
- תמונה
- תמונות
- חשוב
- מרשים
- in
- לכלול
- כלול
- כולל
- מדד
- בנפרד
- מידע
- בתוך
- להתקין
- לשלב
- משלב
- אל תוך
- אינטואיטיבי
- IT
- שֶׁלָה
- מפתח
- ידע
- שפה
- לשגר
- מערך
- לִלמוֹד
- למידה
- עזבו
- LG
- כמו
- קשר
- לינקדין
- קישורים
- ll
- היכנס
- סֵמֶל
- נראה
- נראה כמו
- ראשי
- עשייה
- ניהול
- באופן ידני
- אומר
- מדיה
- מידע נוסף
- דקות
- מצב
- יותר
- רוב
- צריך
- my
- שם
- נווט
- צורך
- חדש
- הבא
- Next.js
- לא
- of
- on
- ONE
- רק
- לפתוח
- נפתח
- or
- אחר
- שלנו
- הַחוּצָה
- שֶׁלוֹ
- עמוד
- דפים
- לעבור
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- הודעה
- הודעות
- מעשי
- העריכה
- תהליך
- תכנות
- פּרוֹיֶקט
- מספק
- לפרסם
- לאור
- מהירות
- מהר
- RE
- להגיב
- חומר עיוני
- רלוונטי
- טיוח
- נדרש
- דרישות
- תוצאה
- לַחֲזוֹר
- טַבַּעַת
- שורש
- מסלול
- נתיבים
- הפעלה
- s
- שמור
- Sdk
- בצורה חלקה
- סעיף
- SEO
- סט
- התקנה
- כמה
- Shadow
- גיליון
- צריך
- אתר
- So
- כמה
- משך
- לערום
- Stackabuse
- תקנים
- החל
- שלב
- צעדים
- עצור
- מִבְנֶה
- סטודיו
- כזה
- סיכום
- מערכת
- מסוף
- זֶה
- השמיים
- אותם
- אז
- שם.
- אלה
- זֶה
- דרך
- זמן
- כותרת
- ל
- אסימון
- מַעֲבָר
- מִשׁפָּט
- הדרכה
- להשתמש
- באמצעות
- באמצעות
- וידאו
- הלך
- רוצה
- we
- אתר
- אתרים
- אשר
- יצטרך
- עם
- בתוך
- XML
- אתה
- זפירנט