Ce este ButterCMS
ButterCMS este un CMS fără cap, bazat pe cloud, bazat pe API, care vă permite să construiți rapid aplicații și site-uri web bazate pe CMS. Are un tablou de bord ușor de utilizat pentru crearea și gestionarea conținutului. Vine cu un motor de blog preconstruit, primul API, care este optimizat pentru SEO imediat, care vă permite să construiți și să integrați rapid un sistem de blog funcțional pentru site-uri web sau aplicații. Se integrează perfect în aplicațiile noi și existente și este unul dintre cele mai bune CMS-uri fără cap disponibile.
Cerințe preliminare pentru tutorial
Mai jos sunt principalele cerințe de urmat împreună cu acest tutorial:
- Cunoașterea de bază a Next.js
- Un editor de cod, cum ar fi Sublime sau Visual Studio Code
- Icoane Font minunat
- A ButterCMS cont de probă.
Crearea mediului de dezvoltare
Înainte de a începe, deschideți un terminal și navigați până unde doriți să creați/storezi și rulați această comandă de mai jos pentru a executa create-next-app pentru a porni proiectul.
$ npx create-next-app my-blog
Apoi, se va afișa o solicitare care vă solicită să confirmați unele dependențe suplimentare. După aceea, comanda de mai sus va crea automat o structură de foldere pentru proiectul nostru.
Următorul pas este să configurați ButterCMS în proiectul nostru Next.js cu ButterCMS SDK utilizând următoarea comandă:
$ npm install butter --save
# OR
$ yarn add buttercms
După aceea, creați un cont Butter. Faceți clic pe aceasta legătură pentru a vă crea contul. Apoi, pentru a conecta ButterCMS la aplicația dvs., va trebui să salvați cheia READ API Token ca variabilă de mediu. Creați un fișier .env la rădăcina directorului de proiect și adăugați simbolul API ButterCMS ca variabilă de mediu:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Îți poți lua CITIȚI API-ul Token de la dvs tabloul de bord pentru setări.
Configurarea ButterCMS
După ce ați creat un cont ButterCMS, conectați-vă la tabloul de bord din ButterCMS site-ul web. Una dintre cele mai impresionante caracteristici ale ButterCMS este că vine cu un motor de blog pre-construit care se integrează cu ușurință cu site-urile sau aplicațiile dvs. folosind un API bine structurat. Blog Engine are o configurație intuitivă de conținut concepută pentru a crea postări pe blog, așa că nu este necesară nicio configurare din partea dvs.; este o abordare plug-and-play. Pentru a crea un blog, accesați tabloul de bord și faceți clic pe Postările de blog din bara laterală din stânga:
Odată ce noua pagină se deschide, faceți clic pe Postare noua butonul din colțul din dreapta sus al tabloului de bord și adăugați informațiile despre postarea de blog pe pagina care se deschide.
Motorul de blog ButterCMS vine cu un WYSIWYG editor care vă permite să creați cu ușurință conținut pentru site-ul dvs. de blog. Se mândrește cu mai multe funcții care vă permit să inserați fișiere media, cum ar fi videoclipuri și imagini, oferă un editor de text ușor de utilizat și include o secțiune pentru a configura toate metadatele blogului.
Pe pagina Editare blog, introduceți titlul postării pe blog, adăugați conținut folosind editorul de text și includeți o imagine de copertă, informații despre autor, etichete relevante și date SEO importante.
În imaginea de mai sus, motorul blogului include o secțiune care vă permite să adăugați categorii și etichete, rezumatul blogului și o secțiune pentru SEO-ul blogului. Puteți urma pașii de mai sus pentru a adăuga mai multe postări pe blog. După ce ați inserat toate detaliile blogului dvs., faceți clic pe Publica butonul din colțul din dreapta sus al tabloului de bord pentru a publica postarea.
Integrarea și redarea datelor din API-ul ButterCMS
Nu uitați că pentru a vă conecta ButterCMS la aplicația dvs., trebuie să vă salvați Citiți API cheie ca variabilă de mediu. După ce ați terminat de pregătit conținutul în ButterCMS, deschideți editorul de cod și creați un folder de componente în src folderul Următorul proiect, apoi creați un Subsol componentă și Aspect componentă.
Deschideți componenta Footer.js și adăugați următorul cod:
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;
Consultați ghidul nostru practic și practic pentru a învăța Git, cu cele mai bune practici, standarde acceptate de industrie și fisa de cheat incluse. Opriți căutarea pe Google a comenzilor Git și de fapt învăţa aceasta!
Codul de mai sus va adăuga secțiunea de subsol a paginii, care va fi afișată pe toate paginile blogului.
În acest articol, vom folosi pictogramele Font Awesome. Pentru a utiliza Font Awesome, îl puteți instala în proiect sau puteți utiliza CDN-ul său. Puteți adăuga linkul CDN la dvs _document.js
fișier așa:
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> )
}
Apoi creați componenta Layout și adăugați componenta Footer la pagina dvs. împachetând conținutul paginii în ea. Ca rezultat, componenta Layout va accepta copii ca elemente de recuzită, permițându-vă să accesați conținutul paginilor dvs. Next.js.
Deschideți Layout.js componentă și adăugați următorul cod mai jos:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Acum puteți integra componenta Layout în paginile dvs. împachetând conținutul paginii în ea.
Operatii Deschise _app.js
fișier pentru a adăuga următorul cod:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Apoi deschide-ți index.js fișier și adăugați următorul cod:
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, }, } }
Codul de mai sus preia datele postării din API-ul ButterCMS și le afișează pe pagină.
În continuare, trebuie să creăm o pagină individuală de blog către care fiecare postare de blog trimite folosind rute dinamice. Next.js vă permite să generați pagini cu căi care depind de date externe. Pentru a crea rute dinamice pentru postările de blog, creați un folder numit posturi în interiorul src/pagini pliant. În folderul curent, creați un fișier nou numit [id].js și adăugați următorul cod:
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="/ro/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 } } }
În codul de mai sus, fiecare pagină va fi generată pe baza Params id: post.slug.
Notă: Nu uitați să copiați fișierul style/global.css din fișierul Repo Github și adăugați-l în propriul fișier de proiect dacă urmați împreună cu tutorialul.
Apoi rulați comanda de mai jos pentru a lansa aplicația în modul dev:
Pagina ta de blog va arăta astfel:
Și fiecare pagină de postare de blog va arăta astfel:
Puteți obține baza de cod pentru acest tutorial aici pe Github.
Concluzie
În acest articol, am explicat cum să montați cu ușurință un site web de blog sau să integrați un motor de blog în site-ul dvs. folosind Next.js și motorul de blog ButterCMS. ButterCMS este un CMS fără cap atât de grozav pentru construirea de bloguri; vă va scuti de durerea de cap și de timpul de la crearea manuală a unui blog. Puteți crea cu ușurință un blog cu orice limbaj de programare sau stiva de cadru la alegere cu ButterCMS.
Pentru a afla mai multe despre ButterCMS, puteți verifica ButterCMS documentaţie.
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- PlatoData.Network Vertical Generative Ai. Împuterniciți-vă. Accesați Aici.
- PlatoAiStream. Web3 Intelligence. Cunoștințe amplificate. Accesați Aici.
- PlatoESG. Automobile/VE-uri, carbon, CleanTech, Energie, Mediu inconjurator, Solar, Managementul deșeurilor. Accesați Aici.
- BlockOffsets. Modernizarea proprietății de compensare a mediului. Accesați Aici.
- Sursa: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :are
- :este
- :Unde
- ][p
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- Despre Noi
- mai sus
- Accept
- acces
- Cont
- de fapt
- adăuga
- Suplimentar
- După
- TOATE
- Permiterea
- permite
- de-a lungul
- de asemenea
- an
- și
- Anonim
- Orice
- api
- aplicaţia
- aplicație
- aplicatii
- abordare
- Apps
- SUNT
- articol
- AS
- At
- autor
- în mod automat
- disponibil
- Avatar
- astept
- bazat
- pocni
- BE
- de mai jos
- CEL MAI BUN
- Blog
- Blog
- bloguri
- se mândreşte cu
- corp
- Bootstrap
- frontieră
- construi
- Clădire
- buton
- by
- apel
- denumit
- CAN
- Poate obține
- categorii
- verifica
- Copii
- alegere
- clic
- Cloudflare
- CMS
- cod
- codeBase
- vine
- component
- componente
- concluzie
- Confirma
- Conectați
- Consoleze
- conține
- conţinut
- conținut
- Colț
- acoperi
- crea
- Crearea
- CSS
- Curent
- tablou de bord
- de date
- David
- Mod implicit
- proiectat
- detalii
- dev
- Dezvoltare
- Afişa
- afișat
- afișează
- don
- făcut
- dinamic
- fiecare
- cu ușurință
- ușor de folosit
- editor
- oricare
- permite
- permite
- capăt
- Punct final
- Motor
- Intrați
- Mediu inconjurator
- a executa
- existent
- exporturile
- extern
- fals
- DESCRIERE
- Fișier
- Fişiere
- Concentra
- urma
- următor
- Pentru
- Cadru
- din
- funcţie
- funcțional
- genera
- generată
- obține
- merge
- GitHub
- Go
- mare
- ghida
- hands-on
- Avea
- cap
- aici
- planare
- Cum
- Cum Pentru a
- HTML
- HTTPS
- icoane
- ID
- if
- imagine
- imagini
- important
- impresionant
- in
- include
- inclus
- include
- index
- individ
- informații
- în interiorul
- instala
- integra
- integreaza
- în
- intuitiv
- IT
- ESTE
- Cheie
- cunoştinţe
- limbă
- lansa
- Aspect
- AFLAȚI
- învăţare
- stânga
- LG
- ca
- LINK
- Link-uri
- ll
- log
- siglă
- Uite
- arată ca
- Principal
- Efectuarea
- de conducere
- manual
- mijloace
- Mass-media
- Metadata
- minute
- mod
- mai mult
- cele mai multe
- trebuie sa
- my
- Numit
- Navigaţi
- Nevoie
- Nou
- următor
- Next.js
- Nu.
- of
- on
- ONE
- afară
- deschide
- deschide
- or
- Altele
- al nostru
- afară
- propriu
- pagină
- pagini
- trece
- Plato
- Informații despre date Platon
- PlatoData
- Post
- postări
- Practic
- pregătirea
- proces
- Programare
- proiect
- furnizează
- publica
- publicat
- repede
- repede
- RE
- Reacţiona
- Citeste
- tencuială
- necesar
- Cerinţe
- rezultat
- reveni
- Inel
- rădăcină
- Traseul
- rute
- Alerga
- s
- Economisiți
- sdk
- perfect
- Secțiune
- SEO
- set
- configurarea
- câteva
- Umbră
- coală
- să
- teren
- So
- unele
- deschidere
- stivui
- Stackabuse
- standarde
- început
- Pas
- paşi
- Stop
- structura
- studio
- astfel de
- REZUMAT
- sistem
- Terminal
- acea
- Lor
- apoi
- Acolo.
- Acestea
- acest
- Prin
- timp
- Titlu
- la
- semn
- tranziţie
- proces
- tutorial
- stare de nervozitate
- utilizare
- folosind
- de
- Video
- umblat
- vrea
- we
- website
- site-uri web
- care
- voi
- cu
- în
- XML
- Tu
- Ta
- zephyrnet