Hvad er ButterCMS
ButterCMS er et skybaseret, API-først, hovedløst CMS, der giver dig mulighed for hurtigt at bygge CMS-drevne apps og websteder. Den har et brugervenligt dashboard til at oprette og administrere indhold. Den leveres med en forudbygget, API-først blog-motor, der er SEO-optimeret ud af kassen, som gør dig i stand til hurtigt at bygge og integrere et funktionelt blogsystem til websteder eller apps. Det integreres problemfrit i nye og eksisterende applikationer og er et af de bedste hovedløse CMS'er, der findes derude.
Tutorial Forudsætninger
Nedenfor er de vigtigste krav til at følge sammen med denne øvelse:
- Grundlæggende viden om Next.js
- En kodeeditor såsom Sublime eller Visual Studio Code
- Fantastiske ikoner for font
- A ButterCMS prøvekonto.
Opsætning af udviklingsmiljøet
Inden du går i gang, skal du åbne en terminal og navigere til det sted, hvor du vil oprette/gemme, og køre denne kommando nedenfor for at udføre create-next-app for at bootstrap projektet.
$ npx create-next-app my-blog
Derefter vises en prompt, der beder dig bekræfte nogle yderligere afhængigheder. Derefter vil kommandoen ovenfor automatisk stilladsere en mappestruktur til vores projekt.
Det næste trin er at konfigurere ButterCMS i vores Next.js-projekt med ButterCMS SDK ved hjælp af følgende kommando:
$ npm install butter --save
# OR
$ yarn add buttercms
Derefter skal du oprette en Butter-konto. Klik på dette link for at oprette din konto. Derefter, for at forbinde ButterCMS til din applikation, skal du gemme READ API Token-nøglen som en miljøvariabel. Opret en .env-fil i roden af dit projektbibliotek, og tilføj dit ButterCMS API-token som en miljøvariabel:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Du kan få din LÆS API Token fra din indstillinger dashboard.
Opsætning af ButterCMS
Når du har oprettet en ButterCMS-konto, skal du logge ind på dit dashboard på ButterCMS internet side. En af de mest imponerende funktioner ved ButterCMS er, at den kommer med en forudbygget blogmotor, der nemt kan integreres med dine websteder eller applikationer ved hjælp af en velstruktureret API. Blog Engine har en intuitiv indholdsopsætning designet til at oprette blogindlæg, så der kræves ingen opsætning fra din side; det er en plug-and-play tilgang. For at oprette en blog skal du gå ind i dit dashboard og klikke på blogindlæg fra venstre sidebjælke:
Når den nye side åbner, skal du klikke på nyt indlæg knappen i øverste højre hjørne af dashboardet og tilføj oplysninger om dit blogindlæg på den side, der åbnes.
ButterCMS blog-motoren leveres med en WYSIWYG editor, der giver dig mulighed for nemt at oprette indhold til din blogside. Det kan prale af flere funktioner, der gør det muligt for dig at indsætte mediefiler som videoer og billeder, giver en letanvendelig teksteditor og inkluderer en sektion til at konfigurere alle dine blogmetadata.
På siden Blogredigering skal du indtaste titlen på dit blogindlæg, tilføje indhold ved hjælp af teksteditoren og inkludere et forsidebillede, forfatteroplysninger, relevante tags og vigtige SEO-data.
På billedet ovenfor indeholder blogmotoren en sektion, der giver dig mulighed for at tilføje kategorier og tags, blogresuméet og en sektion til bloggens SEO. Du kan følge trinene ovenfor for at tilføje flere blogindlæg. Når du har indsat alle detaljerne på din blog, skal du klikke på Udgiv knappen i øverste højre hjørne af dit dashboard for at offentliggøre dit indlæg.
Integration og gengivelse af data fra ButterCMS API
Glem ikke, at for at forbinde dit ButterCMS til din applikation, skal du gemme din Læs API nøgle som en miljøvariabel. Når du er færdig med at forberede dit indhold i ButterCMS, skal du åbne din kodeeditor og oprette en komponentmappe i src mappe for dit næste projekt, og opret derefter en Sidefod komponent og Layout komponent.
Åbn Footer.js-komponenten og tilføj 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;
Tjek vores praktiske, praktiske guide til at lære Git, med bedste praksis, brancheaccepterede standarder og inkluderet snydeark. Stop med at google Git-kommandoer og faktisk lærer det!
Ovenstående kode tilføjer sidefodssektionen, som vil blive vist på alle blogsider.
I denne artikel vil vi gøre brug af Font Awesome-ikoner. For at bruge Font Awesome kan du enten installere det i dit projekt eller bruge dets CDN. Du kan tilføje CDN-linket til din _document.js
fil som denne:
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> )
}
Opret derefter Layout-komponenten og føj Footer-komponenten til din side ved at pakke dit sideindhold ind i den. Som et resultat vil Layout-komponenten acceptere børn som rekvisitter, hvilket giver dig adgang til indholdet af dine Next.js-sider.
Åbne Layout.js komponent og tilføj følgende kode nedenfor:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Nu kan du integrere Layout-komponenten i dine sider ved at pakke sideindholdet ind i det.
Åbne _app.js
fil for at tilføje følgende kode:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Åbn derefter din index.js fil og tilføj 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, }, } }
Ovenstående kode henter postdataene fra ButterCMS API og viser dem på siden.
Dernæst skal vi oprette en individuel blogside, som hvert blogindlæg linker til ved hjælp af dynamiske ruter. Next.js giver dig mulighed for at generere sider med stier, der afhænger af eksterne data. For at oprette dynamiske ruter til blogindlæggene skal du oprette en mappe med navnet indlæg Inde i src/sider folder. I den aktuelle mappe skal du oprette en ny fil med navnet [id].js og tilføj 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="/da/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 blive genereret baseret på params id: post.slug.
Bemærk: Glem ikke at kopiere style/global.css-filen fra Github repos og tilføje det til din egen projektfil, hvis du følger med i selvstudiet.
Kør derefter kommandoen nedenfor for at starte din app i udviklertilstand:
Din blogside vil se sådan ud:
Og hver blogindlægsside vil se sådan ud:
Du kan få kodebasen til denne tutorial her Github.
Konklusion
I denne artikel har vi gennemgået, hvordan du nemt stilladserer et blogwebsted eller integrerer en blogmotor på din hjemmeside ved hjælp af Next.js og ButterCMS blogmotoren. ButterCMS er sådan et fantastisk hovedløst CMS til at bygge blogs; det vil spare dig for hovedpine og tid fra at oprette en blog manuelt. Du kan nemt oprette en blog med et hvilket som helst programmeringssprog eller rammestak efter eget valg med ButterCMS.
For at lære mere om ButterCMS, kan du tjekke ButterCMS dokumentation.
- SEO Powered Content & PR Distribution. Bliv forstærket i dag.
- PlatoData.Network Vertical Generative Ai. Styrk dig selv. Adgang her.
- PlatoAiStream. Web3 intelligens. Viden forstærket. Adgang her.
- PlatoESG. Automotive/elbiler, Kulstof, CleanTech, Energi, Miljø, Solenergi, Affaldshåndtering. Adgang her.
- BlockOffsets. Modernisering af miljømæssig offset-ejerskab. Adgang her.
- Kilde: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :har
- :er
- :hvor
- ][s
- $OP
- 1
- 12
- 20
- 7
- 8
- a
- Om
- over
- Acceptere
- adgang
- Konto
- faktisk
- tilføje
- Yderligere
- Efter
- Alle
- tillade
- tillader
- sammen
- også
- an
- ,
- anonym
- enhver
- api
- app
- Anvendelse
- applikationer
- tilgang
- apps
- ER
- artikel
- AS
- At
- forfatter
- automatisk
- til rådighed
- avatar
- vente
- baseret
- bash
- BE
- jf. nedenstående
- BEDSTE
- Blog
- Blogindlæg
- blogs
- prale af
- krop
- Bootstrap
- grænse
- bygge
- Bygning
- .
- by
- ringe
- kaldet
- CAN
- Kan få
- kategorier
- kontrollere
- Børn
- valg
- klik
- CloudFlare
- cms
- kode
- codebase
- kommer
- komponent
- komponenter
- konklusion
- Bekræfte
- Tilslut
- Konsol
- indeholder
- indhold
- indhold
- Corner
- dæksel
- skabe
- Oprettelse af
- CSS
- Nuværende
- instrumentbræt
- data
- David
- Standard
- konstrueret
- detaljer
- dev
- Udvikling
- Skærm
- vises
- displays
- Don
- færdig
- dynamisk
- hver
- nemt
- nem at bruge
- editor
- enten
- muliggøre
- muliggør
- ende
- Endpoint
- Engine (Motor)
- Indtast
- Miljø
- udføre
- eksisterende
- eksport
- ekstern
- falsk
- Funktionalitet
- File (Felt)
- Filer
- Fokus
- følger
- efter
- Til
- Framework
- fra
- funktion
- funktionel
- generere
- genereret
- få
- Git
- GitHub
- Go
- stor
- vejlede
- hands-on
- Have
- hoved
- link.
- hover
- Hvordan
- How To
- HTML
- HTTPS
- ikoner
- ID
- if
- billede
- billeder
- vigtigt
- imponerende
- in
- omfatter
- medtaget
- omfatter
- indeks
- individuel
- oplysninger
- indvendig
- installere
- integrere
- Integrerer
- ind
- intuitiv
- IT
- ITS
- Nøgle
- viden
- Sprog
- lancere
- Layout
- LÆR
- læring
- til venstre
- LG
- ligesom
- LINK
- links
- ll
- log
- logo
- Se
- ligner
- Main
- Making
- styring
- manuelt
- midler
- Medier
- Metadata
- minut
- tilstand
- mere
- mest
- skal
- my
- Som hedder
- Naviger
- Behov
- Ny
- næste
- Next.js
- ingen
- of
- on
- ONE
- kun
- åbent
- åbner
- or
- Andet
- vores
- ud
- egen
- side
- sider
- passerer
- plato
- Platon Data Intelligence
- PlatoData
- Indlæg
- Indlæg
- Praktisk
- forberede
- behandle
- Programmering
- projekt
- giver
- offentliggøre
- offentliggjort
- hurtigt
- hurtigt
- RE
- Reagerer
- Læs
- relevant
- rendering
- påkrævet
- Krav
- resultere
- afkast
- ring
- rod
- R
- veje
- Kør
- s
- Gem
- SDK
- problemfrit
- Sektion
- SEO
- sæt
- setup
- flere
- Shadow
- ark
- bør
- websted
- So
- nogle
- span
- stable
- Stablemisbrug
- standarder
- påbegyndt
- Trin
- Steps
- Stands
- struktur
- Studio
- sådan
- RESUMÉ
- systemet
- terminal
- at
- Them
- derefter
- Der.
- Disse
- denne
- Gennem
- tid
- Titel
- til
- token
- overgang
- retssag
- tutorial
- brug
- ved brug af
- via
- Videoer
- gik
- ønsker
- we
- Hjemmeside
- websites
- som
- vilje
- med
- inden for
- XML
- Du
- Din
- zephyrnet