Hva er ButterCMS
ButterCMS er et skybasert, API-først, hodeløst CMS som lar deg raskt bygge CMS-drevne apper og nettsteder. Den har et brukervennlig dashbord for å lage og administrere innhold. Den kommer med en forhåndsbygd, API-første bloggmotor som er SEO-optimalisert rett ut av esken, som lar deg raskt bygge og integrere et funksjonelt bloggsystem for nettsteder eller apper. Den integreres sømløst i nye og eksisterende applikasjoner og er en av de beste hodeløse CMS-ene som finnes der ute.
Opplæringsforutsetninger
Nedenfor er hovedkravene som må følges sammen med denne opplæringen:
- Grunnleggende kunnskap om Next.js
- En koderedigerer som Sublime eller Visual Studio Code
- Awesome Icons Font
- A ButterCMS prøvekonto.
Sette opp utviklingsmiljøet
Før du starter, åpne en terminal og naviger til der du vil opprette/lagre og kjør denne kommandoen nedenfor for å utføre create-next-app for å starte opp prosjektet.
$ npx create-next-app my-blog
Deretter vises en melding som ber deg bekrefte noen ytterligere avhengigheter. Etter det vil kommandoen ovenfor automatisk stillas en mappestruktur for prosjektet vårt.
Det neste trinnet er å konfigurere ButterCMS i vårt Next.js-prosjekt med ButterCMS SDK ved å bruke følgende kommando:
$ npm install butter --save
# OR
$ yarn add buttercms
Etter det oppretter du en Butter-konto. Klikk på denne link for å opprette kontoen din. Deretter, for å koble ButterCMS til applikasjonen din, må du lagre READ API Token-nøkkelen som en miljøvariabel. Opprett en .env-fil i roten av prosjektkatalogen og legg til ButterCMS API-tokenet som en miljøvariabel:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Du kan få din LES API Token fra din innstillinger dashbord.
Sette opp ButterCMS
Etter å ha opprettet en ButterCMS-konto, logg inn på dashbordet på ButterCMS nettsted. En av de mest imponerende funksjonene til ButterCMS er at den kommer med en forhåndsbygd bloggmotor som enkelt integreres med nettsidene eller applikasjonene dine ved hjelp av et godt strukturert API. Blog Engine har et intuitivt innholdsoppsett designet for å lage blogginnlegg, så ingen oppsett er nødvendig fra din side; det er en plug-and-play-tilnærming. For å sette opp en blogg, gå inn i dashbordet og klikk på blogginnlegg fra venstre sidefelt:
Når den nye siden åpnes, klikker du på Nytt innlegg knappen øverst til høyre på dashbordet og legg til informasjon om blogginnlegget på siden som åpnes.
ButterCMS-bloggmotoren kommer med en WYSIWYG editor som lar deg enkelt lage innhold for bloggsiden din. Den har flere funksjoner som lar deg sette inn mediefiler som videoer og bilder, gir en brukervennlig tekstredigerer og inkluderer en seksjon for å sette opp alle bloggens metadata.
På bloggredigeringssiden skriver du inn tittelen på blogginnlegget ditt, legg til innhold ved hjelp av tekstredigering, og inkluderer et forsidebilde, forfatterinformasjon, relevante tagger og viktige SEO-data.
I bildet ovenfor inkluderer bloggmotoren en seksjon som lar deg legge til kategorier og tagger, bloggsammendraget og en seksjon for bloggens SEO. Du kan følge trinnene ovenfor for å legge til flere blogginnlegg. Etter å ha satt inn alle detaljene i bloggen din, klikker du på Publiser knappen øverst til høyre på dashbordet for å publisere innlegget ditt.
Integrering og gjengivelse av data fra ButterCMS API
Ikke glem at for å koble ButterCMS til applikasjonen din, må du lagre din Les API nøkkel som en miljøvariabel. Etter at du er ferdig med å forberede innholdet i ButterCMS, åpner du koderedigeringsprogrammet og oppretter en komponentmappe i src mappen til neste prosjekt, og opprett deretter en Bunntekst komponent og Layout komponent.
Åpne Footer.js-komponenten og legg til følgende kode:
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;
Sjekk ut vår praktiske, praktiske guide for å lære Git, med beste praksis, bransjeaksepterte standarder og inkludert jukseark. Slutt å google Git-kommandoer og faktisk lære den!
Koden ovenfor vil legge til bunntekstdelen av siden, som vil vises på alle bloggsider.
I denne artikkelen vil vi bruke Font Awesome-ikoner. For å bruke Font Awesome kan du enten installere den i prosjektet eller bruke CDN. Du kan legge til CDN-lenken til din _document.js
fil slik:
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> )
}
Deretter oppretter du layoutkomponenten og legger til bunntekstkomponenten på siden din ved å pakke sideinnholdet i den. Som et resultat vil Layout-komponenten godta barn som rekvisitter, slik at du får tilgang til innholdet på Next.js-sidene dine.
Åpne Layout.js komponent og legg til følgende kode nedenfor:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Nå kan du integrere Layout-komponenten på sidene dine ved å pakke inn sideinnholdet i den.
Åpen _app.js
fil for å legge til følgende kode:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Åpne deretter din index.js fil og legg til følgende kode:
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, }, } }
Koden ovenfor henter postdataene fra ButterCMS API og viser dem på siden.
Deretter må vi lage en individuell bloggside som hvert blogginnlegg lenker til ved hjelp av dynamiske ruter. Next.js lar deg generere sider med stier som er avhengige av eksterne data. For å lage dynamiske ruter for blogginnleggene, lag en mappe med navnet innlegg Inne i src/sider mappe. Opprett en ny fil med navnet i gjeldende mappe [id].js og legg til følgende kode:
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="/no/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 } } }
I koden ovenfor vil hver side bli generert basert på params id: post.slug.
Merk: Ikke glem å kopiere style/global.css-filen fra Github-repos og legg den til i din egen prosjektfil hvis du følger veiledningen.
Kjør deretter kommandoen nedenfor for å starte appen din i utviklermodus:
Bloggsiden din vil se slik ut:
Og hver blogginnleggsside vil se slik ut:
Du kan få kodebasen for denne opplæringen her Github.
konklusjonen
I denne artikkelen har vi gått gjennom hvordan du enkelt stillas et bloggnettsted eller integrerer en bloggmotor på nettstedet ditt ved å bruke Next.js og ButterCMS bloggmotor. ButterCMS er et så flott hodeløst CMS for å bygge blogger; det vil spare deg for hodepine og tid fra å lage en blogg manuelt. Du kan enkelt sette opp en blogg med et hvilket som helst programmeringsspråk eller rammeverk du ønsker med ButterCMS.
For å lære mer om ButterCMS, kan du sjekke ButterCMS dokumentasjon.
- SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- PlatoData.Network Vertical Generative Ai. Styrk deg selv. Tilgang her.
- PlatoAiStream. Web3 Intelligence. Kunnskap forsterket. Tilgang her.
- PlatoESG. Bil / elbiler, Karbon, CleanTech, Energi, Miljø, Solenergi, Avfallshåndtering. Tilgang her.
- BlockOffsets. Modernisering av eierskap for miljøkompensasjon. Tilgang her.
- kilde: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- : har
- :er
- :hvor
- ][s
- $OPP
- 1
- 12
- 20
- 7
- 8
- a
- Om oss
- ovenfor
- Aksepterer
- adgang
- Logg inn
- faktisk
- legge til
- Ytterligere
- Etter
- Alle
- tillate
- tillater
- langs
- også
- an
- og
- Anonym
- noen
- api
- app
- Søknad
- søknader
- tilnærming
- apps
- ER
- Artikkel
- AS
- At
- forfatter
- automatisk
- tilgjengelig
- avatar
- avvente
- basert
- bash
- BE
- under
- BEST
- Blogg
- Blogginnlegg
- blogger
- skryte
- kroppen
- Bootstrap
- grensen
- bygge
- Bygning
- knapp
- by
- ring
- som heter
- CAN
- Kan få
- kategorier
- sjekk
- Barn
- valg
- klikk
- CloudFlare
- CMS
- kode
- kodebase
- kommer
- komponent
- komponenter
- konklusjon
- Bekrefte
- Koble
- Konsoll
- inneholder
- innhold
- innhold
- Corner
- dekke
- skape
- Opprette
- CSS
- Gjeldende
- dashbord
- dato
- David
- Misligholde
- designet
- detaljer
- dev
- Utvikling
- Vise
- vises
- skjermer
- Don
- gjort
- dynamisk
- hver enkelt
- lett
- lett-å-bruke
- redaktør
- enten
- muliggjøre
- muliggjør
- slutt
- Endpoint
- Motor
- Enter
- Miljø
- henrette
- eksisterende
- eksportere
- utvendig
- falsk
- Egenskaper
- filet
- Filer
- Fokus
- følge
- etter
- Til
- Rammeverk
- fra
- funksjon
- funksjonelle
- generere
- generert
- få
- gå
- GitHub
- Go
- flott
- veilede
- hands-on
- Ha
- hode
- her.
- hover
- Hvordan
- Hvordan
- HTML
- HTTPS
- ikoner
- ID
- if
- bilde
- bilder
- viktig
- imponerende
- in
- inkludere
- inkludert
- inkluderer
- indeks
- individuelt
- informasjon
- innsiden
- installere
- integrere
- Integrerer
- inn
- intuitiv
- IT
- DET ER
- nøkkel
- kunnskap
- Språk
- lansere
- Layout
- LÆRE
- læring
- venstre
- LG
- i likhet med
- LINK
- lenker
- ll
- logg
- logo
- Se
- ser ut som
- Hoved
- Making
- administrerende
- manuelt
- midler
- Media
- metadata
- minutter
- Mote
- mer
- mest
- må
- my
- oppkalt
- Naviger
- Trenger
- Ny
- neste
- Next.js
- Nei.
- of
- on
- ONE
- bare
- åpen
- åpner
- or
- Annen
- vår
- ut
- egen
- side
- sider
- passere
- plato
- Platon Data Intelligence
- PlatonData
- Post
- innlegg
- Praktisk
- forbereder
- prosess
- Programmering
- prosjekt
- gir
- publisere
- publisert
- raskt
- raskt
- RE
- Reager
- Lese
- relevant
- gjengivelse
- påkrevd
- Krav
- resultere
- retur
- Ringe
- root
- Rute
- ruter
- Kjør
- s
- Spar
- SDK
- sømløst
- Seksjon
- SEO
- sett
- oppsett
- flere
- Shadow
- ark
- bør
- nettstedet
- So
- noen
- span
- stable
- Stackabuse
- standarder
- startet
- Trinn
- Steps
- Stopp
- struktur
- studio
- slik
- SAMMENDRAG
- system
- terminal
- Det
- De
- Dem
- deretter
- Der.
- Disse
- denne
- Gjennom
- tid
- Tittel
- til
- token
- overgang
- prøve
- tutorial
- bruke
- ved hjelp av
- av
- videoer
- gikk
- ønsker
- we
- Nettsted
- nettsteder
- hvilken
- vil
- med
- innenfor
- XML
- Du
- Din
- zephyrnet