Mis on ButterCMS
ButterCMS on pilvepõhine API-eelmine ilma peata CMS, mis võimaldab teil kiiresti luua CMS-i toega rakendusi ja veebisaite. Sellel on lihtsalt kasutatav armatuurlaud sisu loomiseks ja haldamiseks. See on varustatud eelehitatud API-esimese ajaveebimootoriga, mis on SEO-le optimeeritud ja mis võimaldab teil kiiresti luua ja integreerida veebisaitide või rakenduste jaoks funktsionaalse ajaveebisüsteemi. See integreerub sujuvalt uutesse ja olemasolevatesse rakendustesse ning on üks parimaid ilma peata CMS-e.
Õpetuse eeltingimused
Allpool on toodud peamised nõuded, mida selle õpetusega koos järgida.
- Põhiteadmised Järgmine.js
- Koodiredaktor, näiteks Sublime või Visual Studio Code
- Font vinge ikoonid
- A ButterCMS proovikonto.
Arenduskeskkonna loomine
Enne alustamist avage terminal ja navigeerige kohta, kuhu soovite luua/säilitada, ning käivitage see allolev käsk, et käivitada projekti buutimiseks käsk create-next-app.
$ npx create-next-app my-blog
Seejärel kuvatakse viip, mis palub teil kinnitada mõned täiendavad sõltuvused. Pärast seda loob ülaltoodud käsk automaatselt meie projekti kaustastruktuuri.
Järgmine samm on ButterCMS konfigureerimine meie Next.js projektis ButterCMS SDK-ga, kasutades järgmist käsku:
$ npm install butter --save
# OR
$ yarn add buttercms
Pärast seda looge Butteri konto. Klõpsake seda link oma konto loomiseks. Seejärel peate ButterCMS-i ühendamiseks oma rakendusega salvestama READ API Token võtme keskkonnamuutujana. Looge oma projektikataloogi juurtes env-fail ja lisage oma ButterCMS API luba keskkonnamuutujana:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Saate oma LUGEGE API-t Token sinult seadete armatuurlaud.
ButterCMS-i seadistamine
Pärast ButterCMS-i konto loomist logige sisse oma armatuurlauale ButterCMS veebisait. ButterCMS-i üks muljetavaldavamaid funktsioone on see, et see on varustatud eelehitatud ajaveebimootoriga, mis integreerub hõlpsalt teie veebisaitide või rakendustega, kasutades hästi struktureeritud API-d. Blogimootoril on ajaveebipostituste loomiseks loodud intuitiivne sisuseadistus, seega pole teil vaja seadistada. see on plug-and-play lähenemisviis. Ajaveebi seadistamiseks minge oma armatuurlauale ja klõpsake vasakpoolsel külgribal blogipostitusi:
Kui uus leht avaneb, klõpsake nuppu New Post nuppu armatuurlaua paremas ülanurgas ja lisage avanevale lehele oma ajaveebipostituse teave.
ButterCMS-i ajaveebimootoriga on kaasas a WYSIWYG redaktor, mis võimaldab teil hõlpsasti oma ajaveebisaidi sisu luua. Sellel on mitmeid funktsioone, mis võimaldavad teil sisestada meediumifaile (nt videoid ja pilte), pakub lihtsalt kasutatavat tekstiredaktorit ja sisaldab jaotist kõigi ajaveebi metaandmete seadistamiseks.
Sisestage lehel Blogi redigeerimine oma ajaveebi postituse pealkiri, lisage tekstiredaktoriga sisu ning lisage kaanepilt, autori teave, asjakohased sildid ja olulised SEO andmed.
Ülaltoodud pildil sisaldab ajaveebi mootor jaotist, mis võimaldab teil lisada kategooriaid ja silte, ajaveebi kokkuvõtet ja ajaveebi SEO jaotist. Rohkemate ajaveebipostituste lisamiseks järgige ülaltoodud samme. Pärast kõigi oma ajaveebi üksikasjade sisestamist klõpsake nuppu Avalda postituse avaldamiseks nuppu juhtpaneeli paremas ülanurgas.
Andmete integreerimine ja renderdamine ButterCMS API-st
Ärge unustage, et ButterCMS-i ühendamiseks rakendusega peate salvestama oma Lugege API-t võti keskkonnamuutujana. Kui olete ButterCMS-is sisu ettevalmistamise lõpetanud, avage oma koodiredaktor ja looge komponentide kaust src Järgmise projekti kausta, seejärel looge a Footer komponent ja Layout komponent.
Avage komponent Footer.js ja lisage järgmine kood:
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;
Tutvuge meie praktilise ja praktilise Giti õppimise juhendiga, mis sisaldab parimaid tavasid, tööstusharus aktsepteeritud standardeid ja kaasas olevat petulehte. Lõpetage Giti käskude guugeldamine ja tegelikult õppima seda!
Ülaltoodud kood lisab lehe jaluse osa, mis kuvatakse kõigil ajaveebi lehtedel.
Selles artiklis kasutame ikoone Font Awesome. Font Awesome'i kasutamiseks võite selle oma projekti installida või kasutada selle CDN-i. Saate lisada oma CDN-i lingi _document.js
selline fail:
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> )
}
Seejärel looge komponent Layout ja lisage oma lehele komponent jalus, mähkides oma lehe sisu selle sisse. Selle tulemusena aktsepteerib komponent Layout lapsi kui rekvisiite, võimaldades teil pääseda juurde oma Next.js lehtede sisule.
avage Layout.js komponent ja lisage allpool järgmine kood:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Nüüd saate küljenduse komponendi oma lehtedele integreerida, mähkides lehe sisu sellesse.
avatud _app.js
faili järgmise koodi lisamiseks:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Seejärel avage oma index.js faili ja lisage järgmine kood:
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, }, } }
Ülaltoodud kood toob postituse andmed ButterCMS API-st ja kuvab need lehel.
Järgmiseks peame looma individuaalse ajaveebilehe, kuhu iga blogipostitus dünaamiliste marsruutide abil lingib. Next.js võimaldab teil luua lehti, mille teed sõltuvad välistest andmetest. Blogipostituste jaoks dünaamiliste marsruutide loomiseks looge kaust nimega postitused sees src/pages kausta. Looge praeguses kaustas uus fail nimega [id].js ja lisage järgmine kood:
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="/et/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 } } }
Ülaltoodud koodis luuakse iga leht params id: post.slug.
Märkus. Ärge unustage kopeerida faili style/global.css Githubi repo ja lisage see oma projektifaili, kui järgite õpetust.
Seejärel käivitage oma rakenduse arendusrežiimis käivitamiseks allolev käsk:
Teie ajaveebi leht näeb välja selline:
Ja iga ajaveebi postituse leht näeb välja selline:
Selle õpetuse koodibaasi saate siit Github.
Järeldus
Selles artiklis oleme läbi vaadanud, kuidas veebilehe Next.js ja ButterCMS ajaveebimootori abil hõlpsasti luua ajaveebisaiti või integreerida ajaveebimootor oma veebisaidile. ButterCMS on selline suurepärane peata CMS ajaveebi loomiseks; see säästab peavalu ja ajaveebi käsitsi loomisest tulenevat aega. ButterCMS-iga saate hõlpsasti luua ajaveebi mis tahes valitud programmeerimiskeele või raamistiku virnaga.
ButterCMS-i kohta lisateabe saamiseks vaadake ButterCMS-i dokumentatsioon.
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- PlatoData.Network Vertikaalne generatiivne Ai. Jõustage ennast. Juurdepääs siia.
- PlatoAiStream. Web3 luure. Täiustatud teadmised. Juurdepääs siia.
- PlatoESG. Autod/elektrisõidukid, Süsinik, CleanTech, Energia, Keskkond päikeseenergia, Jäätmekäitluse. Juurdepääs siia.
- BlockOffsets. Keskkonnakompensatsiooni omandi ajakohastamine. Juurdepääs siia.
- Allikas: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :on
- :on
- : kus
- ][lk
- $ UP
- 1
- 12
- 20
- 7
- 8
- a
- MEIST
- üle
- aktsepteerima
- juurdepääs
- konto
- tegelikult
- lisama
- Täiendavad lisad
- pärast
- Materjal: BPA ja flataatide vaba plastik
- Lubades
- võimaldab
- mööda
- Ka
- an
- ja
- anonüümne
- mistahes
- API
- app
- taotlus
- rakendused
- lähenemine
- apps
- OLEME
- artikkel
- AS
- At
- autor
- automaatselt
- saadaval
- avatar
- ootama
- põhineb
- sisse lööma
- BE
- alla
- BEST
- Blogi
- Blogi postitused
- blogid
- uhke
- keha
- Bootstrap
- piir
- ehitama
- Ehitus
- nupp
- by
- helistama
- kutsutud
- CAN
- Saab
- kategooriad
- kontrollima
- Lapsed
- valik
- klõps
- CloudFlare
- Cms
- kood
- Koodbaas
- tuleb
- komponent
- komponendid
- järeldus
- Kinnitama
- Võta meiega ühendust
- konsool
- sisaldab
- sisu
- sisu
- Nurk
- cover
- looma
- loomine
- CSS
- Praegune
- armatuurlaud
- andmed
- David
- vaikimisi
- kavandatud
- detailid
- dev
- & Tarkvaraarendus
- Ekraan
- kuvatakse
- Näidikute
- don
- tehtud
- dünaamiline
- iga
- kergesti
- lihtne-to-use
- toimetaja
- kumbki
- võimaldama
- võimaldab
- lõpp
- Lõpp-punkt
- Mootor
- sisene
- keskkond
- täitma
- olemasolevate
- eksport
- väline
- vale
- FUNKTSIOONID
- fail
- Faile
- Keskenduma
- järgima
- Järel
- eest
- Raamistik
- Alates
- funktsioon
- funktsionaalne
- tekitama
- loodud
- saama
- Git
- GitHub
- Go
- suur
- suunata
- käed-
- Olema
- juhataja
- siin
- hõljuma
- Kuidas
- Kuidas
- HTML
- HTTPS
- ikoonid
- ID
- if
- pilt
- pildid
- oluline
- muljetavaldav
- in
- sisaldama
- lisatud
- hõlmab
- indeks
- eraldi
- info
- sees
- paigaldama
- integreerima
- Integreerib
- sisse
- intuitiivne
- IT
- ITS
- Võti
- teadmised
- keel
- algatama
- Layout
- Õppida
- õppimine
- lahkus
- LG
- nagu
- LINK
- lingid
- ll
- logi
- logo
- Vaata
- näeb välja
- põhiline
- Tegemine
- juhtiv
- käsitsi
- vahendid
- Meedia
- Metaandmed
- minutit
- viis
- rohkem
- kõige
- peab
- my
- Nimega
- Navigate
- Vajadus
- Uus
- järgmine
- Järgmine.js
- ei
- of
- on
- ONE
- ainult
- avatud
- Avaneb
- or
- Muu
- meie
- välja
- enda
- lehekülg
- lehekülge
- sooritama
- Platon
- Platoni andmete intelligentsus
- PlatoData
- post
- Postitusi
- Praktiline
- ettevalmistamisel
- protsess
- Programming
- projekt
- annab
- avaldama
- avaldatud
- kiiresti
- kiiresti
- RE
- Reageerima
- Lugenud
- asjakohane
- rendering
- nõutav
- Nõuded
- kaasa
- tagasipöördumine
- ring
- juur
- Marsruut
- liinidel
- jooks
- s
- Säästa
- SDK
- sujuvalt
- Osa
- seo
- komplekt
- seade
- mitu
- vari
- leht
- peaks
- site
- So
- mõned
- sille
- Kestab
- Stackabus
- standardite
- alustatud
- Samm
- Sammud
- Peatus
- struktuur
- stuudio
- selline
- KOKKUVÕTE
- süsteem
- terminal
- et
- .
- Neile
- SIIS
- Seal.
- Need
- see
- Läbi
- aeg
- Kapslid
- et
- sümboolne
- üleminek
- kohtuprotsess
- juhendaja
- puperdama
- kasutama
- kasutamine
- kaudu
- Videod
- kõndis
- tahan
- we
- veebisait
- veebilehed
- mis
- will
- koos
- jooksul
- XML
- sa
- Sinu
- sephyrnet