Vad är ButterCMS
ButterCMS är ett molnbaserat, API-först, huvudlöst CMS som gör att du snabbt kan bygga CMS-drivna appar och webbplatser. Den har en lättanvänd instrumentpanel för att skapa och hantera innehåll. Den levereras med en förbyggd, API-först bloggmotor som är SEO-optimerad direkt, vilket gör att du snabbt kan bygga och integrera ett funktionellt bloggsystem för webbplatser eller appar. Den integreras sömlöst i nya och befintliga applikationer och är en av de bästa huvudlösa CMS som finns tillgängliga.
Handledningsförutsättningar
Nedan är de viktigaste kraven att följa tillsammans med denna handledning:
- Grundläggande kunskap om Next.js
- En kodredigerare som Sublime eller Visual Studio Code
- Fantastiska teckensnitt ikoner
- A ButterCMS provkonto.
Ställa in utvecklingsmiljön
Innan du börjar, öppna en terminal och navigera till var du vill skapa/lagra och kör det här kommandot nedan för att köra create-next-app för att bootstrap projektet.
$ npx create-next-app my-blog
Sedan visas en uppmaning som ber dig att bekräfta några ytterligare beroenden. Efter det kommer kommandot ovan automatiskt att skapa en mappstruktur för vårt projekt.
Nästa steg är att konfigurera ButterCMS i vårt Next.js-projekt med ButterCMS SDK med följande kommando:
$ npm install butter --save
# OR
$ yarn add buttercms
Efter det skapar du ett Butter-konto. Klicka här länk för att skapa ditt konto. Sedan, för att ansluta ButterCMS till din applikation, måste du spara READ API Token-nyckeln som en miljövariabel. Skapa en .env-fil i roten av din projektkatalog och lägg till din ButterCMS API-token som en miljövariabel:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Du kan få din LÄS API Token från din instrumentpanelen för inställningar.
Konfigurera ButterCMS
Efter att ha skapat ett ButterCMS-konto, logga in på din instrumentpanel på ButterCMS hemsida. En av de mest imponerande funktionerna i ButterCMS är att den kommer med en förbyggd bloggmotor som enkelt integreras med dina webbplatser eller applikationer med hjälp av ett välstrukturerat API. Blog Engine har en intuitiv innehållskonfiguration utformad för att skapa blogginlägg, så ingen installation krävs från din sida; det är en plug-and-play-metod. För att skapa en blogg, gå in i din instrumentpanel och klicka på Blogginlägg från det vänstra sidofältet:
När den nya sidan öppnas klickar du på Nytt brev knappen i det övre högra hörnet av instrumentpanelen och lägg till information om ditt blogginlägg på sidan som öppnas.
ButterCMS-bloggmotorn kommer med en WYSIWYG editor som låter dig enkelt skapa innehåll för din bloggsida. Den har flera funktioner som gör att du kan infoga mediefiler som videor och bilder, ger en lättanvänd textredigerare och innehåller en sektion för att ställa in alla dina bloggmetadata.
På bloggredigeringssidan anger du titeln på ditt blogginlägg, lägg till innehåll med hjälp av textredigeraren och inkluderar en omslagsbild, författareinformation, relevanta taggar och viktig SEO-data.
I bilden ovan innehåller bloggmotorn en sektion som låter dig lägga till kategorier och taggar, bloggsammanfattningen och en sektion för bloggens SEO. Du kan följa stegen ovan för att lägga till fler blogginlägg. När du har infogat alla detaljer om din blogg klickar du på Publicera knappen i det övre högra hörnet av din instrumentpanel för att publicera ditt inlägg.
Integrera och rendera data från ButterCMS API
Glöm inte att för att ansluta ditt ButterCMS till din applikation måste du spara din Läs API nyckel som en miljövariabel. När du är klar med att förbereda ditt innehåll i ButterCMS, öppna din kodredigerare och skapa en komponentmapp i src mapp för ditt nästa projekt, skapa sedan en Sidfot komponent och Layout komponent.
Öppna Footer.js-komponenten och lägg till följande kod:
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;
Kolla in vår praktiska, praktiska guide för att lära dig Git, med bästa praxis, branschaccepterade standarder och medföljande fuskblad. Sluta googla Git-kommandon och faktiskt lära Det!
Koden ovan kommer att lägga till sidfoten på sidan, som kommer att visas på alla bloggsidor.
I den här artikeln kommer vi att använda oss av Font Awesome-ikoner. För att använda Font Awesome kan du antingen installera det i ditt projekt eller använda dess CDN. Du kan lägga till CDN-länken till din _document.js
fil så här:
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> )
}
Skapa sedan layoutkomponenten och lägg till sidfotskomponenten på din sida genom att linda sidinnehållet i den. Som ett resultat kommer Layout-komponenten att acceptera barn som rekvisita, vilket ger dig tillgång till innehållet på dina Next.js-sidor.
Öppna Layout.js komponent och lägg till följande kod nedan:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Nu kan du integrera layoutkomponenten på dina sidor genom att lägga in sidinnehållet i den.
Öppen _app.js
fil för att lägga till följande kod:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Öppna sedan din index.js fil och lägg till följande kod:
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 ovan hämtar inläggsdata från ButterCMS API och visar dem på sidan.
Därefter måste vi skapa en individuell bloggsida som varje blogginlägg länkar till med hjälp av dynamiska rutter. Next.js gör att du kan generera sidor med sökvägar som är beroende av extern data. Skapa en mapp med namnet för att skapa dynamiska rutter för blogginläggen inlägg inuti src / sidor mapp. Skapa en ny fil med namnet i den aktuella mappen [id].js och lägg till följande kod:
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="/sv/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 ovan kommer varje sida att genereras baserat på params id: post.slug.
Obs: Glöm inte att kopiera filen style/global.css från Github repo och lägg till den i din egen projektfil om du följer handledningen.
Kör sedan kommandot nedan för att starta din app i utvecklarläge:
Din bloggsida kommer att se ut så här:
Och varje blogginläggssida kommer att se ut så här:
Du kan få kodbasen för denna handledning här Github.
Slutsats
I den här artikeln har vi gått igenom hur du enkelt bygger en bloggwebbplats eller integrerar en bloggmotor i din webbplats med hjälp av Next.js och ButterCMS bloggmotor. ButterCMS är ett så bra huvudlöst CMS för att bygga bloggar; det kommer att spara dig huvudvärk och tid från att skapa en blogg manuellt. Du kan enkelt skapa en blogg med valfritt programmeringsspråk eller ramstack med ButterCMS.
För att lära dig mer om ButterCMS kan du kolla ButterCMS dokumentation.
- SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
- PlatoData.Network Vertical Generative Ai. Styrka dig själv. Tillgång här.
- PlatoAiStream. Web3 Intelligence. Kunskap förstärkt. Tillgång här.
- Platoesg. Fordon / elbilar, Kol, CleanTech, Energi, Miljö, Sol, Avfallshantering. Tillgång här.
- BlockOffsets. Modernisera miljökompensation ägande. Tillgång här.
- Källa: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- : har
- :är
- :var
- ][s
- $UPP
- 1
- 12
- 20
- 7
- 8
- a
- Om Oss
- ovan
- Acceptera
- tillgång
- Konto
- faktiskt
- lägga till
- Annat
- Efter
- Alla
- tillåta
- tillåter
- längs
- också
- an
- och
- Anonym
- vilken som helst
- api
- app
- Ansökan
- tillämpningar
- tillvägagångssätt
- appar
- ÄR
- Artikeln
- AS
- At
- Författaren
- automatiskt
- tillgänglig
- Avatar
- vänta
- baserat
- bash
- BE
- nedan
- BÄST
- Blogg
- Blogginlägg
- bloggar
- ståtar
- kropp
- Bootstrap
- gränsen
- SLUTRESULTAT
- Byggnad
- Knappen
- by
- Ring
- kallas
- KAN
- Kan få
- kategorier
- ta
- Barn
- val
- klick
- CloudFlare
- cms
- koda
- Kodbas
- kommer
- komponent
- komponenter
- slutsats
- Bekräfta
- Kontakta
- Konsol
- innehåller
- innehåll
- innehåll
- Corner
- täcka
- skapa
- Skapa
- CSS
- Aktuella
- instrumentbräda
- datum
- David
- Standard
- utformade
- detaljer
- dev
- Utveckling
- Visa
- visas
- displayer
- donation
- gjort
- dynamisk
- varje
- lätt
- LÄTTANVÄND
- redaktör
- antingen
- möjliggöra
- möjliggör
- änden
- Slutpunkt
- Motor
- ange
- Miljö
- exekvera
- befintliga
- export
- extern
- falsk
- Funktioner
- Fil
- Filer
- Fokus
- följer
- efter
- För
- Ramverk
- från
- fungera
- funktionella
- generera
- genereras
- skaffa sig
- gå
- GitHub
- Go
- stor
- styra
- praktisk
- Har
- huvud
- här.
- hovring
- Hur ser din drömresa ut
- How To
- html
- HTTPS
- ikoner
- ID
- if
- bild
- bilder
- med Esport
- imponerande
- in
- innefattar
- ingår
- innefattar
- index
- individuellt
- informationen
- inuti
- installera
- integrera
- integrerar
- in
- intuitiv
- IT
- DESS
- Nyckel
- kunskap
- språk
- lansera
- Layout
- LÄRA SIG
- inlärning
- vänster
- LG
- tycka om
- LINK
- länkar
- ll
- log
- logotyp
- se
- ser ut som
- Huvudsida
- Framställning
- hantera
- manuellt
- betyder
- Media
- metadata
- min
- Mode
- mer
- mest
- måste
- my
- Som heter
- Navigera
- Behöver
- Nya
- Nästa
- Next.js
- Nej
- of
- on
- ONE
- endast
- öppet
- öppnas
- or
- Övriga
- vår
- ut
- egen
- sida
- sidor
- passera
- plato
- Platon Data Intelligence
- PlatonData
- Inlägg
- inlägg
- Praktisk
- förbereda
- process
- Programmering
- projektet
- ger
- publicera
- publicerade
- snabbt
- snabbt
- RE
- Reagera
- Läsa
- relevanta
- rendering
- Obligatorisk
- Krav
- resultera
- avkastning
- Ringa
- rot
- Rutt
- rutter
- Körning
- s
- Save
- sDK
- sömlöst
- §
- SEO
- in
- inställning
- flera
- skugga
- ark
- skall
- webbplats
- So
- några
- span
- stapel
- Stackabuse
- standarder
- igång
- Steg
- Steg
- Sluta
- struktur
- studio
- sådana
- SAMMANFATTNING
- system
- terminal
- den där
- Smakämnen
- Dem
- sedan
- Där.
- Dessa
- detta
- Genom
- tid
- Titel
- till
- token
- övergång
- rättegång
- handledning
- användning
- med hjälp av
- via
- Video
- promenerade
- vill
- we
- Webbplats
- webbsidor
- som
- kommer
- med
- inom
- XML
- Om er
- Din
- zephyrnet