Wat is ButterCMS
ButterCMS is een cloudgebaseerd, API-first, headless CMS waarmee u snel CMS-aangedreven apps en websites kunt bouwen. Het heeft een eenvoudig te gebruiken dashboard voor het maken en beheren van inhoud. Het wordt geleverd met een vooraf gebouwde, API-eerste blog-engine die out-of-the-box voor SEO is geoptimaliseerd, waarmee u snel een functioneel blogsysteem voor websites of apps kunt bouwen en integreren. Het integreert naadloos in nieuwe en bestaande applicaties en is een van de beste headless CMS'en die er zijn.
Tutorial Vereisten
Hieronder staan โโโโde belangrijkste vereisten om samen met deze zelfstudie te volgen:
- Basiskennis van Next.js
- Een code-editor zoals Sublime of Visual Studio Code
- Font Awesome Icons
- A BoterCMS proefaccount.
De ontwikkelomgeving opzetten
Voordat u begint, opent u een terminal en navigeert u naar waar u wilt maken/opslaan en voert u deze onderstaande opdracht uit om create-next-app uit te voeren om het project op te starten.
$ npx create-next-app my-blog
Vervolgens wordt er een prompt weergegeven waarin u wordt gevraagd enkele aanvullende afhankelijkheden te bevestigen. Daarna zal de bovenstaande opdracht automatisch een mappenstructuur voor ons project bouwen.
De volgende stap is het configureren van ButterCMS in ons Next.js-project met de ButterCMS SDK met behulp van de volgende opdracht:
$ npm install butter --save
# OR
$ yarn add buttercms
Maak daarna een Butter-account aan. Klik hier link om uw account aan te maken. Om ButterCMS vervolgens met uw toepassing te verbinden, moet u de READ API Token-sleutel opslaan als een omgevingsvariabele. Maak een .env-bestand in de hoofdmap van uw projectdirectory en voeg uw ButterCMS API-token toe als een omgevingsvariabele:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Je kunt je krijgen LEES API Token van uw instellingen dashboard.
ButterCMS instellen
Nadat u een ButterCMS-account heeft aangemaakt, logt u in op uw dashboard op de BoterCMS website. Een van de meest indrukwekkende kenmerken van ButterCMS is dat het wordt geleverd met een vooraf gebouwde blog-engine die eenvoudig kan worden geรฏntegreerd met uw websites of applicaties met behulp van een goed gestructureerde API. De blog-engine heeft een intuรฏtieve inhoudsinstelling die is ontworpen voor het maken van blogposts, dus er is geen instelling van uw kant vereist; het is een plug-and-play-benadering. Om een โโblog op te zetten, gaat u naar uw dashboard en klikt u op Blogberichten in de linkerzijbalk:
Zodra de nieuwe pagina wordt geopend, klikt u op de Nieuwe post knop in de rechterbovenhoek van het dashboard en voeg uw blogberichtinformatie toe op de pagina die wordt geopend.
De ButterCMS-blog-engine wordt geleverd met een WYSIWYG editor waarmee u eenvoudig inhoud voor uw blogsite kunt maken. Het beschikt over verschillende functies waarmee u mediabestanden zoals video's en afbeeldingen kunt invoegen, biedt een gebruiksvriendelijke teksteditor en bevat een sectie om al uw blogmetadata in te stellen.
Voer op de pagina Blogbewerking de titel van uw blogbericht in, voeg inhoud toe met behulp van de teksteditor en voeg een omslagafbeelding, auteursinformatie, relevante tags en belangrijke SEO-gegevens toe.
In de bovenstaande afbeelding bevat de blog-engine een sectie waarin u categorieรซn en tags kunt toevoegen, de blogsamenvatting en een sectie voor de SEO van de blog. U kunt de bovenstaande stappen volgen om meer blogposts toe te voegen. Nadat u alle details van uw blog hebt ingevoerd, klikt u op de Publiceer knop in de rechterbovenhoek van uw dashboard om uw bericht te publiceren.
Integratie en weergave van gegevens uit de ButterCMS API
Vergeet niet dat om uw ButterCMS aan uw applicatie te koppelen, u uw API lezen sleutel als een omgevingsvariabele. Nadat u klaar bent met het voorbereiden van uw inhoud in ButterCMS, opent u uw code-editor en maakt u een map Components in de src map van uw Next-project en maak vervolgens een footer component en Layout component.
Open de component Footer.js en voeg de volgende code toe:
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;
Bekijk onze praktische, praktische gids voor het leren van Git, met best-practices, door de industrie geaccepteerde normen en bijgevoegd spiekbriefje. Stop met Googlen op Git-commando's en eigenlijk leren het!
De bovenstaande code voegt het voettekstgedeelte van de pagina toe, dat op alle blogpagina's wordt weergegeven.
In dit artikel zullen we gebruik maken van Font Awesome-pictogrammen. Om Font Awesome te gebruiken, kunt u het in uw project installeren of het CDN gebruiken. U kunt de CDN-link toevoegen aan uw _document.js
bestand als volgt:
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> )
}
Maak vervolgens de component Lay-out en voeg de component Voettekst toe aan uw pagina door uw pagina-inhoud erin te plaatsen. Als gevolg hiervan accepteert de component Lay-out kinderen als rekwisieten, waardoor u toegang hebt tot de inhoud van uw Next.js-pagina's.
Open de Lay-out.js component en voeg de volgende code hieronder toe:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Nu kunt u de lay-outcomponent in uw pagina's integreren door de pagina-inhoud erin te plaatsen.
Openen _app.js
bestand om de volgende code toe te voegen:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Open dan je index.js bestand en voeg de volgende code toe:
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, }, } }
De bovenstaande code haalt de berichtgegevens op van de ButterCMS API en geeft ze weer op de pagina.
Vervolgens moeten we een individuele blogpagina maken waarnaar elke blogpost linkt met behulp van dynamische routes. Met Next.js kunt u pagina's genereren met paden die afhankelijk zijn van externe gegevens. Om dynamische routes voor de blogberichten te maken, maakt u een map met de naam posts in de src / pagina's map. Maak in de huidige map een nieuw bestand met de naam [id].js en voeg de volgende code toe:
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="/nl/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 } } }
In de bovenstaande code wordt elke pagina gegenereerd op basis van de params-ID: post.slug.
Opmerking: vergeet niet het bestand style/global.css te kopiรซren van de Github-opslagplaats en voeg het toe aan uw eigen projectbestand als u de zelfstudie volgt.
Voer vervolgens de onderstaande opdracht uit om uw app in de ontwikkelaarsmodus te starten:
Je blogpagina ziet er als volgt uit:
En elke blogpostpagina ziet er als volgt uit:
U kunt de codebase voor deze zelfstudie hier downloaden GitHub.
Conclusie
In dit artikel hebben we besproken hoe u eenvoudig een blogwebsite kunt opzetten of een blog-engine in uw website kunt integreren met behulp van Next.js en de ButterCMS-blog-engine. ButterCMS is zo'n geweldig headless CMS voor het bouwen van blogs; het bespaart u de hoofdpijn en tijd van het handmatig maken van een blog. U kunt eenvoudig een blog opzetten met elke programmeertaal of framework-stack naar keuze met ButterCMS.
Voor meer informatie over ButterCMS kunt u de ButterCMS bekijken documentatie.
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- PlatoData.Network Verticale generatieve AI. Versterk jezelf. Toegang hier.
- PlatoAiStream. Web3-intelligentie. Kennis versterkt. Toegang hier.
- PlatoESG. Automotive / EV's, carbon, CleanTech, Energie, Milieu, Zonne, Afvalbeheer. Toegang hier.
- BlockOffsets. Eigendom voor milieucompensatie moderniseren. Toegang hier.
- Bron: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- : heeft
- :is
- :waar
- ][P
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- Over
- boven
- ACCEPTEREN
- toegang
- Account
- werkelijk
- toevoegen
- Extra
- Na
- Alles
- Het toestaan
- toestaat
- langs
- ook
- an
- en
- Anoniem
- elke
- api
- gebruiken
- Aanvraag
- toepassingen
- nadering
- apps
- ZIJN
- dit artikel
- AS
- At
- auteur
- webmaster.
- Beschikbaar
- Avatar
- wachten
- gebaseerde
- slaan
- BE
- onder
- BEST
- Blog
- Blog Posts
- blogs
- schept
- lichaam
- Bootstrap
- grens
- bouw
- Gebouw
- by
- Bellen
- Dit betekent dat we onszelf en onze geliefden praktisch vergiftigen.
- CAN
- Kan krijgen
- categorieรซn
- controle
- Kinderen
- keuze
- Klik
- CloudFlare
- cms
- code
- Codebasis
- komt
- bestanddeel
- componenten
- conclusie
- Bevestigen
- Verbinden
- troosten
- bevat
- content
- inhoud
- Hoek
- deksel
- en je merk te creรซren
- Wij creรซren
- CSS
- Actueel
- dashboards
- gegevens
- David
- Standaard
- ontworpen
- gegevens
- Dev
- Ontwikkeling
- Display
- weergegeven
- displays
- don
- gedaan
- dynamisch
- elk
- gemakkelijk
- gemakkelijk te gebruiken
- editor
- beide
- in staat stellen
- maakt
- einde
- Endpoint
- Motor
- Enter
- Milieu
- uitvoeren
- bestaand
- exporteren
- extern
- vals
- Voordelen
- Dien in
- Bestanden
- Focus
- volgen
- volgend
- Voor
- Achtergrond
- oppompen van
- functie
- functioneel
- voortbrengen
- gegenereerde
- krijgen
- Git
- GitHub
- Go
- groot
- gids
- hands-on
- Hebben
- hoofd
- hier
- zweven
- Hoe
- How To
- HTML
- HTTPS
- pictogrammen
- ID
- if
- beeld
- afbeeldingen
- belangrijk
- indrukwekkend
- in
- omvatten
- inclusief
- omvat
- index
- individueel
- informatie
- binnen
- installeren
- integreren
- integreert
- in
- intuรฏtief
- IT
- HAAR
- sleutel
- kennis
- taal
- lancering
- Layout
- LEARN
- leren
- links
- LG
- als
- LINK
- links
- ll
- inloggen
- logo
- Kijk
- ziet eruit als
- Hoofd
- maken
- beheren
- handmatig
- middel
- Media
- Metadata
- Min
- Mode
- meer
- meest
- Dan moet je
- my
- Genoemd
- OP DEZE WEBSITE VIND JE
- Noodzaak
- New
- volgende
- Next.js
- geen
- of
- on
- EEN
- Slechts
- open
- opent
- or
- Overige
- onze
- uit
- het te bezitten.
- pagina
- paginas
- passeren
- Plato
- Plato gegevensintelligentie
- PlatoData
- Post
- Berichten
- PRAKTISCH
- voorbereiding
- Programming
- project
- biedt
- publiceren
- gepubliceerde
- snel
- snel
- RE
- Reageren
- Lees
- relevante
- weergave
- nodig
- Voorwaarden
- resultaat
- terugkeer
- Ring
- wortel
- weg
- wegen
- lopen
- s
- Bespaar
- sdk
- naadloos
- sectie
- seo
- reeks
- setup
- verscheidene
- Shadow
- vel
- moet
- website
- So
- sommige
- span
- stack
- Stapelmisbruik
- normen
- gestart
- Stap voor
- Stappen
- stop
- structuur
- studio
- dergelijk
- OVERZICHT
- system
- terminal
- dat
- De
- Ze
- harte
- Er.
- Deze
- dit
- Door
- niet de tijd of
- Titel
- naar
- teken
- overgang
- proces
- zelfstudie
- X
- .
- gebruik
- via
- Video's
- wandelde
- willen
- we
- Website
- websites
- welke
- wil
- Met
- binnen
- XML
- You
- Your
- zephyrnet