Kaj je ButterCMS
ButterCMS je brezglavi CMS, ki temelji na oblaku in je prvi API-ji, ki vam omogoča hitro izdelavo aplikacij in spletnih mest, ki jih poganja CMS. Ima nadzorno ploščo, ki je enostavna za uporabo, za ustvarjanje in upravljanje vsebine. Na voljo je z vnaprej izdelanim mehanizmom za spletne dnevnike API-ja, ki je optimiziran za SEO, kar vam omogoča hitro izdelavo in integracijo funkcionalnega sistema spletnih dnevnikov za spletna mesta ali aplikacije. Brezhibno se integrira v nove in obstoječe aplikacije in je eden najboljših CMS brez glave, ki so na voljo.
Predpogoji za vadnico
Spodaj so glavne zahteve, ki jih morate upoštevati skupaj s to vadnico:
- Osnovno znanje o Naprej.js
- Urejevalnik kode, kot je Sublime ali Visual Studio Code
- Ikone pisave Awesome
- A ButterCMS poskusni račun.
Nastavitev razvojnega okolja
Preden začnete, odprite terminal in se pomaknite do mesta, kjer želite ustvariti/shraniti, in zaženite ta ukaz spodaj, da izvedete create-next-app za zagon projekta.
$ npx create-next-app my-blog
Nato se prikaže poziv, ki zahteva, da potrdite nekatere dodatne odvisnosti. Po tem bo zgornji ukaz samodejno oblikoval strukturo mape za naš projekt.
Naslednji korak je konfiguracija ButterCMS v našem projektu Next.js z ButterCMS SDK z naslednjim ukazom:
$ npm install butter --save
# OR
$ yarn add buttercms
Po tem ustvarite račun Butter. Kliknite to povezava da ustvarite svoj račun. Nato boste morali za povezavo ButterCMS z vašo aplikacijo shraniti ključ READ API Token kot spremenljivko okolja. Ustvarite datoteko .env v korenu svojega projektnega imenika in dodajte žeton ButterCMS API kot spremenljivko okolja:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Lahko dobiš svojo PREBERITE API Žeton iz vašega nadzorna plošča z nastavitvami.
Nastavitev ButterCMS
Ko ustvarite račun ButterCMS, se prijavite na svojo nadzorno ploščo na ButterCMS Spletna stran. Ena najbolj impresivnih lastnosti ButterCMS je, da je opremljen z vnaprej izdelanim blog motorjem, ki se zlahka integrira z vašimi spletnimi mesti ali aplikacijami z uporabo dobro strukturiranega API-ja. Blog Engine ima intuitivno nastavitev vsebine, zasnovano za ustvarjanje objav v spletnem dnevniku, tako da vam ni potrebna nastavitev; gre za pristop plug-and-play. Če želite nastaviti spletni dnevnik, pojdite na nadzorno ploščo in kliknite Objave v spletnem dnevniku v levi stranski vrstici:
Ko se odpre nova stran, kliknite na Nova objava v zgornjem desnem kotu nadzorne plošče in na stran, ki se odpre, dodajte podatke o svoji objavi v spletnem dnevniku.
Mehanizem blogov ButterCMS je opremljen z a WYSIWYG urejevalnik, ki vam omogoča preprosto ustvarjanje vsebine za vaš blog. Ponaša se z več funkcijami, ki vam omogočajo vstavljanje medijskih datotek, kot so videoposnetki in slike, ponuja urejevalnik besedil, ki je enostaven za uporabo, in vključuje razdelek za nastavitev vseh metapodatkov vašega spletnega dnevnika.
Na strani za urejanje spletnega dnevnika vnesite naslov svoje objave v spletnem dnevniku, dodajte vsebino z urejevalnikom besedil in vključite naslovno sliko, podatke o avtorju, ustrezne oznake in pomembne podatke o SEO.
Na zgornji sliki motor spletnega dnevnika vključuje razdelek, ki vam omogoča dodajanje kategorij in oznak, povzetek spletnega dnevnika in razdelek za SEO spletnega dnevnika. Sledite zgornjim korakom, da dodate več objav v spletnem dnevniku. Ko vnesete vse podrobnosti svojega spletnega dnevnika, kliknite objavi v zgornjem desnem kotu nadzorne plošče, da objavite svojo objavo.
Integracija in upodabljanje podatkov iz API-ja ButterCMS
Ne pozabite, da morate za povezavo ButterCMS z vašo aplikacijo shraniti svoj Preberite API ključ kot spremenljivka okolja. Ko končate s pripravo vsebine v ButterCMS, odprite urejevalnik kode in ustvarite mapo komponent v src mapo vašega naslednjega projekta, nato ustvarite a Noga sestavni del in postavitev komponenta.
Odprite komponento Footer.js in dodajte to kodo:
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;
Oglejte si naš praktični, praktični vodnik za učenje Gita z najboljšimi praksami, standardi, sprejetimi v panogi, in priloženo goljufijo. Nehajte Googlati ukaze Git in pravzaprav naučiti it!
Zgornja koda bo dodala del noge strani, ki bo prikazan na vseh straneh bloga.
V tem članku bomo uporabili ikone Font Awesome. Če želite uporabljati Font Awesome, ga lahko namestite v svoj projekt ali uporabite njegov CDN. Povezavo CDN lahko dodate svojemu _document.js
datoteka, kot je ta:
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> )
}
Nato ustvarite komponento postavitve in svoji strani dodajte komponento noge tako, da vanjo ovijete vsebino strani. Posledično bo komponenta postavitve sprejela otroke kot rekvizite, kar vam bo omogočilo dostop do vsebine vaših strani Next.js.
odprite Layout.js komponento in spodaj dodajte naslednjo kodo:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Zdaj lahko komponento postavitve integrirate v svoje strani tako, da vanjo ovijete vsebino strani.
Odprto _app.js
datoteko za dodajanje naslednje kode:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Nato odprite svojega index.js datoteko in dodajte naslednjo kodo:
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, }, } }
Zgornja koda pridobi podatke o objavi iz API-ja ButterCMS in jih prikaže na strani.
Nato moramo ustvariti posamezno stran spletnega dnevnika, na katero se vsaka objava spletnega dnevnika poveže z uporabo dinamičnih poti. Next.js vam omogoča ustvarjanje strani s potmi, ki so odvisne od zunanjih podatkov. Če želite ustvariti dinamične poti za objave v spletnem dnevniku, ustvarite mapo z imenom objav znotraj src/strani mapo. Znotraj trenutne mape ustvarite novo datoteko z imenom [id].js in dodajte naslednjo kodo:
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="/sl/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 } } }
V zgornji kodi bo vsaka stran ustvarjena na podlagi params id: post.slug.
Opomba: Ne pozabite kopirati datoteke style/global.css iz Github repo in ga dodajte v svojo projektno datoteko, če sledite vadnici.
Nato zaženite spodnji ukaz, da zaženete aplikacijo v načinu za razvijalce:
Vaša stran spletnega dnevnika bo videti takole:
Vsaka stran z objavo v blogu bo videti takole:
Kodno bazo za to vadnico lahko dobite tukaj GitHub.
zaključek
V tem članku smo se sprehodili skozi to, kako preprosto oblikovati spletno mesto spletnega dnevnika ali integrirati motor bloga v svoje spletno mesto z uporabo Next.js in mehanizma blogov ButterCMS. ButterCMS je tako odličen brezglavi CMS za ustvarjanje blogov; prihranilo vam bo glavobol in čas pri ročnem ustvarjanju bloga. Z ButterCMS lahko preprosto nastavite blog s katerim koli programskim jezikom ali okvirjem po vaši izbiri.
Če želite izvedeti več o ButterCMS, lahko preverite ButterCMS Dokumentacija.
- Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
- PlatoData.Network Vertical Generative Ai. Opolnomočite se. Dostopite tukaj.
- PlatoAiStream. Web3 Intelligence. Razširjeno znanje. Dostopite tukaj.
- PlatoESG. Avtomobili/EV, Ogljik, CleanTech, Energija, Okolje, sončna energija, Ravnanje z odpadki. Dostopite tukaj.
- BlockOffsets. Posodobitev okoljskega offset lastništva. Dostopite tukaj.
- vir: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :ima
- : je
- :kje
- ][str
- $GOR
- 1
- 12
- 20
- 7
- 8
- a
- O meni
- nad
- Sprejmi
- dostop
- Račun
- dejansko
- dodajte
- Dodatne
- po
- vsi
- Dovoli
- omogoča
- skupaj
- Prav tako
- an
- in
- anonimni
- kaj
- API
- aplikacija
- uporaba
- aplikacije
- pristop
- aplikacije
- SE
- članek
- AS
- At
- Avtor
- samodejno
- Na voljo
- avatar
- čakati
- temeljijo
- bash
- BE
- spodaj
- BEST
- Blog
- Blog Prispevkov
- blogi
- se ponaša
- telo
- Bootstrap
- meja
- izgradnjo
- Building
- Gumb
- by
- klic
- se imenuje
- CAN
- Lahko dobiš
- kategorije
- preveriti
- Otroci
- izbira
- klik
- CloudFlare
- Cms
- Koda
- Koda
- prihaja
- komponenta
- deli
- Sklenitev
- Potrdi
- Connect
- Konzole
- Vsebuje
- vsebina
- Vsebina
- Kotiček
- pokrov
- ustvarjajo
- Ustvarjanje
- CSS
- Trenutna
- Armaturna plošča
- datum
- David
- privzeto
- zasnovan
- Podrobnosti
- dev
- Razvoj
- zaslon
- prikazano
- prikazovalniki
- don
- opravljeno
- dinamično
- vsak
- enostavno
- enostaven za uporabo
- urednik
- bodisi
- omogočajo
- omogoča
- konec
- Končna točka
- Motor
- Vnesite
- okolje
- izvršiti
- obstoječih
- izvoz
- zunanja
- false
- Lastnosti
- file
- datoteke
- Osredotočite
- sledi
- po
- za
- Okvirni
- iz
- funkcija
- funkcionalno
- ustvarjajo
- ustvarila
- dobili
- git
- GitHub
- Go
- veliko
- vodi
- hands-on
- Imajo
- Glava
- tukaj
- hover
- Kako
- Kako
- HTML
- HTTPS
- Ikone
- ID
- if
- slika
- slike
- Pomembno
- Impresivno
- in
- vključujejo
- vključeno
- vključuje
- Indeks
- individualna
- Podatki
- v notranjosti
- namestitev
- integrirati
- Integrira
- v
- intuitivno
- IT
- ITS
- Ključne
- znanje
- jezik
- kosilo
- postavitev
- UČITE
- učenje
- levo
- LG
- kot
- LINK
- Povezave
- ll
- prijavi
- logo
- Poglej
- izgleda kot
- Glavne
- Izdelava
- upravljanje
- ročno
- pomeni
- mediji
- metapodatki
- minut
- način
- več
- Najbolj
- morajo
- my
- Imenovan
- Krmarjenje
- Nimate
- Novo
- Naslednja
- Naprej.js
- št
- of
- on
- ONE
- samo
- odprite
- Odpre
- or
- Ostalo
- naši
- ven
- lastne
- Stran
- strani
- mimo
- platon
- Platonova podatkovna inteligenca
- PlatoData
- Prispevek
- Prispevkov
- Praktično
- priprava
- Postopek
- Programiranje
- Projekt
- zagotavlja
- objavijo
- objavljeno
- hitro
- hitro
- RE
- Reagirajo
- Preberi
- pomembno
- upodabljanje
- obvezna
- Zahteve
- povzroči
- vrnitev
- Ring
- koren
- Pot
- poti
- Run
- s
- Shrani
- SDK
- brez težav
- Oddelek
- seo
- nastavite
- nastavitev
- več
- Shadow
- stanja
- shouldnt
- spletna stran
- So
- nekaj
- span
- sveženj
- Stackabuse
- standardi
- začel
- Korak
- Koraki
- stop
- Struktura
- studio
- taka
- POVZETEK
- sistem
- terminal
- da
- O
- Njih
- POTEM
- Tukaj.
- te
- ta
- skozi
- čas
- Naslov
- do
- žeton
- Prehod
- sojenje
- Navodila
- uporaba
- uporabo
- preko
- Video posnetki
- hodil
- želeli
- we
- Spletna stran
- spletne strani
- ki
- bo
- z
- v
- XML
- Vi
- Vaša rutina za
- zefirnet