ButterCMS Nedir?
ButterCMS, CMS destekli uygulamaları ve web sitelerini hızlı bir şekilde oluşturmanıza olanak tanıyan, bulut tabanlı, API öncelikli, kafasız bir CMS'dir. İçerik oluşturmak ve yönetmek için kullanımı kolay bir kontrol paneline sahiptir. Web siteleri veya uygulamalar için işlevsel bir blog sistemini hızlı bir şekilde oluşturmanıza ve entegre etmenize olanak tanıyan, kullanıma hazır, SEO için optimize edilmiş, önceden oluşturulmuş, API öncelikli bir blog motoruyla birlikte gelir. Yeni ve mevcut uygulamalara sorunsuz bir şekilde entegre olur ve piyasadaki en iyi başsız CMS'lerden biridir.
Öğretici Ön Koşullar
Aşağıda, bu eğitimle birlikte uyulması gereken temel gereksinimler verilmiştir:
- Temel bilgi Next.js
- Sublime veya Visual Studio Code gibi bir kod düzenleyici
- Yazı tipi harika simgeler
- A TereyağıCMS Deneme hesabı.
Geliştirme Ortamını Kurma
Başlamadan önce, bir terminal açın ve oluşturmak/depolamak istediğiniz yere gidin ve projeyi önyüklemek üzere create-next-app'i çalıştırmak için aşağıdaki komutu çalıştırın.
$ npx create-next-app my-blog
Ardından, bazı ek bağımlılıkları onaylamanızı isteyen bir bilgi istemi görüntülenecektir. Bundan sonra, yukarıdaki komut projemiz için otomatik olarak bir klasör yapısı oluşturacaktır.
Sonraki adım, Next.js projemizde ButterCMS'yi aşağıdaki komutu kullanarak ButterCMS SDK ile yapılandırmaktır:
$ npm install butter --save
# OR
$ yarn add buttercms
Bundan sonra bir Butter hesabı oluşturun. Buna tıkla Link hesabınızı oluşturmak için Ardından, ButterCMS'i uygulamanıza bağlamak için READ API Token anahtarını bir ortam değişkeni olarak kaydetmeniz gerekecektir. Proje dizininizin kökünde bir .env dosyası oluşturun ve ButterCMS API belirtecinizi bir ortam değişkeni olarak ekleyin:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Sen alabilirsin API'YI OKUYUN sizden belirteç ayarlar panosu.
ButterCMS Kurulumu
Bir ButterCMS hesabı oluşturduktan sonra, panelinizde oturum açın. TereyağıCMS İnternet sitesi. ButterCMS'nin en etkileyici özelliklerinden biri, iyi yapılandırılmış bir API kullanarak web siteleriniz veya uygulamalarınızla kolayca entegre olan önceden oluşturulmuş bir blog motoruyla birlikte gelmesidir. Blog Motoru, blog gönderileri oluşturmak için tasarlanmış sezgisel bir içerik kurulumuna sahiptir, dolayısıyla sizin tarafınızdan herhangi bir kurulum gerekmez; bu bir tak ve çalıştır yaklaşımıdır. Bir blog oluşturmak için panonuza gidin ve sol kenar çubuğundan Blog Gönderileri'ne tıklayın:
Yeni sayfa açıldığında, tıklayın Yeni Mesaj panelin sağ üst köşesindeki düğmesine basın ve açılan sayfada blog gönderisi bilgilerinizi ekleyin.
ButterCMS blog motoru, bir WYSIWYG blog siteniz için kolayca içerik oluşturmanıza olanak tanıyan düzenleyici. Videolar ve resimler gibi medya dosyalarını eklemenizi sağlayan, kullanımı kolay bir metin düzenleyici sağlayan ve tüm blog meta verilerinizi ayarlamak için bir bölüm içeren çeşitli özelliklere sahiptir.
Blog Düzenleme sayfasında, blog gönderinizin başlığını girin, metin düzenleyiciyi kullanarak içerik ekleyin ve bir kapak resmi, yazar bilgileri, ilgili etiketler ve önemli SEO verileri ekleyin.
Yukarıdaki resimde, blog motorunda kategoriler ve etiketler eklemenizi sağlayan bir bölüm, blog özeti ve blogun SEO'su için bir bölüm bulunmaktadır. Daha fazla blog yazısı eklemek için yukarıdaki adımları takip edebilirsiniz. Blogunuzun tüm ayrıntılarını girdikten sonra, Yayınlamak Gönderinizi yayınlamak için kontrol panelinizin sağ üst köşesindeki düğme.
ButterCMS API'sinden Verileri Entegre Etme ve Oluşturma
ButterCMS'nizi uygulamanıza bağlamak için kaydetmeniz gerektiğini unutmayın. API'yi oku anahtar bir ortam değişkeni olarak. ButterCMS'de içeriğinizi hazırlamayı bitirdikten sonra, kod düzenleyicinizi açın ve içinde bir bileşenler klasörü oluşturun. src Sonraki projenizin klasörünü oluşturun, ardından bir Altbilgi bileşen ve Düzen bileşeni.
Footer.js bileşenini açın ve aşağıdaki kodu ekleyin:
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;
En iyi uygulamalar, endüstri tarafından kabul edilen standartlar ve dahil edilen hile sayfası ile Git'i öğrenmek için uygulamalı, pratik kılavuzumuza göz atın. Googling Git komutlarını durdurun ve aslında öğrenmek o!
Yukarıdaki kod, sayfanın tüm blog sayfalarında görüntülenecek olan altbilgi bölümünü ekleyecektir.
Bu yazımızda Font Awesome ikonlarından faydalanacağız. Font Awesome'i kullanmak için onu projenize yükleyebilir veya CDN'sini kullanabilirsiniz. CDN bağlantısını sitenize ekleyebilirsiniz. _document.js
bunun gibi dosya:
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> )
}
Ardından Mizanpaj bileşenini oluşturun ve sayfa içeriğinizi içine sararak Altbilgi bileşenini sayfanıza ekleyin. Sonuç olarak, Mizanpaj bileşeni, çocukları donanım olarak kabul ederek Next.js sayfalarınızın içeriğine erişmenizi sağlar.
Açın Düzen.js bileşenini açın ve aşağıdaki kodu aşağıya ekleyin:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Artık Mizanpaj bileşenini, sayfa içeriğini içine sararak sayfalarınıza entegre edebilirsiniz.
Açılış _app.js
aşağıdaki kodu eklemek için dosya:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Sonra açın index.js dosyasını açın ve aşağıdaki kodu ekleyin:
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, }, } }
Yukarıdaki kod, gönderi verilerini ButterCMS API'sinden alır ve sayfada görüntüler.
Ardından, her blog gönderisinin dinamik rotalar kullanarak bağlantı verdiği ayrı bir blog sayfası oluşturmamız gerekiyor. Next.js, dış verilere bağlı olan yollara sahip sayfalar oluşturmanıza olanak tanır. Blog gönderileri için dinamik rotalar oluşturmak üzere, adlı bir klasör oluşturun. mesajları içinde kaynak/sayfalar dosya. Geçerli klasör içinde, adlı yeni bir dosya oluşturun. [id].js ve aşağıdaki kodu ekleyin:
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="/tr/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 } } }
Yukarıdaki kodda, her sayfa şuna göre oluşturulacaktır: parametre kimliği: post.slug.
Not: style/global.css dosyasını şu adresten kopyalamayı unutmayın: Github Reposu ve öğreticiyi takip ediyorsanız kendi proje dosyanıza ekleyin.
Ardından, uygulamanızı geliştirme modunda başlatmak için aşağıdaki komutu çalıştırın:
Blog sayfanız şöyle görünecek:
Ve her blog yazısı sayfası şuna benzer:
Bu eğitim için kod tabanını buradan edinebilirsiniz. Github.
Sonuç
Bu makalede, Next.js ve ButterCMS blog motorunu kullanarak bir blog web sitesini nasıl kolayca yapılandırabileceğinizi veya bir blog motorunu web sitenize nasıl entegre edebileceğinizi inceledik. ButterCMS, blog oluşturmak için harika bir başsız CMS'dir; manuel olarak bir blog oluşturmaktan sizi baş ağrısından ve zamandan kurtaracaktır. ButterCMS ile istediğiniz herhangi bir programlama dili veya çerçeve yığını ile kolayca bir blog kurabilirsiniz.
ButterCMS hakkında daha fazla bilgi edinmek için ButterCMS'i kontrol edebilirsiniz. belgeleme.
- SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
- PlatoData.Network Dikey Üretken Yapay Zeka. Kendine güç ver. Buradan Erişin.
- PlatoAiStream. Web3 Zekası. Bilgi Genişletildi. Buradan Erişin.
- PlatoESG. Otomotiv / EV'ler, karbon, temiz teknoloji, Enerji, Çevre, Güneş, Atık Yönetimi. Buradan Erişin.
- Blok Ofsetleri. Çevre Dengeleme Sahipliğini Modernleştirme. Buradan Erişin.
- Kaynak: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :vardır
- :dır-dir
- :Neresi
- ][P
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- Hakkımızda
- yukarıdaki
- Kabul et
- erişim
- Hesap
- aslında
- eklemek
- Ek
- Sonra
- Türkiye
- Izin
- veriyor
- boyunca
- Ayrıca
- an
- ve
- Anonim
- herhangi
- api
- uygulamayı yükleyeceğiz
- Uygulama
- uygulamaları
- yaklaşım
- uygulamalar
- ARE
- göre
- AS
- At
- yazar
- otomatik olarak
- mevcut
- avatar
- beklemek
- merkezli
- darbe
- BE
- altında
- İYİ
- Blog
- Blog Yazıları
- birisinde
- övünme
- vücut
- Çizme atkısı
- sınır
- inşa etmek
- bina
- düğmesine tıklayın
- by
- çağrı
- denilen
- CAN
- Alabilirsin
- kategoriler
- Kontrol
- Çocuk
- seçim
- tıklayın
- CloudFlare
- cms
- kod
- Kod tabanı
- geliyor
- bileşen
- bileşenler
- sonuç
- Onaylamak
- Sosyal medya
- konsolos
- içeren
- içerik
- içindekiler
- Köşe
- kapak
- yaratmak
- Oluşturma
- CSS
- akım
- gösterge paneli
- veri
- David
- Varsayılan
- tasarlanmış
- ayrıntılar
- dev
- gelişme
- ekran
- görüntülenen
- görüntüler
- don
- yapılmış
- dinamik
- her
- kolayca
- kolay kullanımlı
- editör
- ya
- etkinleştirmek
- sağlar
- son
- Son nokta
- Motor
- Keşfet
- çevre
- yürütmek
- mevcut
- ihracat
- dış
- yanlış
- Özellikler
- fileto
- dosyalar
- odak
- takip et
- takip etme
- İçin
- iskelet
- itibaren
- işlev
- fonksiyonel
- oluşturmak
- oluşturulan
- almak
- Git
- GitHub
- Go
- harika
- rehberlik
- hands-on
- Var
- baş
- okuyun
- duraksamak
- Ne kadar
- Nasıl Yapılır
- HTML
- HTTPS
- simgeler
- ID
- if
- görüntü
- görüntüleri
- önemli
- etkileyici
- in
- dahil
- dahil
- içerir
- indeks
- bireysel
- bilgi
- içeride
- kurmak
- entegre
- Entegre
- içine
- sezgisel
- IT
- ONUN
- anahtar
- bilgi
- dil
- başlatmak
- Düzen
- ÖĞRENİN
- öğrenme
- sol
- LG
- sevmek
- LINK
- bağlantılar
- ll
- log
- logo
- Bakın
- gibi görünmek
- Ana
- Yapımı
- yönetme
- el ile
- anlamına geliyor
- medya
- Metadata
- dk
- Moda
- Daha
- çoğu
- şart
- my
- adlı
- Gezin
- gerek
- yeni
- sonraki
- Next.js
- yok hayır
- of
- on
- ONE
- bir tek
- açık
- açılır
- or
- Diğer
- bizim
- dışarı
- kendi
- Kanal
- sayfaları
- geçmek
- Platon
- Plato Veri Zekası
- PlatoVeri
- Çivi
- Mesajlar
- Pratik
- hazırlanması
- süreç
- Programlama
- proje
- sağlar
- yayınlamak
- yayınlanan
- hızla
- hızla
- RE
- React
- Okumak
- uygun
- render
- gereklidir
- Yer Alan Kurallar
- sonuç
- dönüş
- Yüzük
- kök
- Rota
- yolları
- koşmak
- s
- İndirim
- sdk
- sorunsuz
- Bölüm
- SEO
- set
- kurulum
- birkaç
- gölge
- yaprak
- meli
- yer
- So
- biraz
- karış
- yığın
- Yığın kötüye kullanımı
- standartlar
- başladı
- adım
- Basamaklar
- dur
- yapı
- stüdyo
- böyle
- ÖZET
- sistem
- terminal
- o
- The
- Onları
- sonra
- Orada.
- Bunlar
- Re-Tweet
- İçinden
- zaman
- Başlık
- için
- simge
- geçiş
- deneme
- öğretici
- kullanım
- kullanma
- üzerinden
- Videolar
- yürüdü
- istemek
- we
- Web sitesi
- web siteleri
- hangi
- irade
- ile
- içinde
- XML
- Sen
- zefirnet