Zephyrnet-Logo

Generative Datenintelligenz

Code

Erstellen eines Blogs mit Next.js und ButterCMS

Neuauflage von Plato
Neuauflage von Plato

Datum:

Views: 202

Was ist ButterCMS?

ButterCMS ist ein cloudbasiertes, API-basiertes Headless-CMS, mit dem Sie schnell CMS-gestützte Apps und Websites erstellen können. Es verfügt über ein benutzerfreundliches Dashboard zum Erstellen und Verwalten von Inhalten. Es wird mit einer vorgefertigten, API-orientierten Blog-Engine geliefert, die sofort SEO-optimiert ist und es Ihnen ermöglicht, schnell ein funktionierendes Blog-System für Websites oder Apps zu erstellen und zu integrieren. Es lässt sich nahtlos in neue und bestehende Anwendungen integrieren und ist eines der besten Headless-CMS auf dem Markt.

Voraussetzungen für das Tutorial

Im Folgenden sind die wichtigsten Anforderungen aufgeführt, die Sie zusammen mit diesem Tutorial befolgen müssen:

  • Grundkenntnisse über Next.js
  • Ein Code-Editor wie Sublime oder Visual Studio Code
  • Schrift Super Icons
  • A ButterCMS Probekonto.

Einrichten der Entwicklungsumgebung

Bevor Sie beginnen, öffnen Sie ein Terminal, navigieren Sie zu dem Ort, an dem Sie erstellen/speichern möchten, und führen Sie den folgenden Befehl aus, um „create-next-app“ auszuführen, um das Projekt zu booten.

$ npx create-next-app my-blog

Anschließend wird eine Eingabeaufforderung angezeigt, in der Sie aufgefordert werden, einige zusätzliche Abhängigkeiten zu bestätigen. Danach erstellt der obige Befehl automatisch eine Ordnerstruktur für unser Projekt.

Der nächste Schritt besteht darin, ButterCMS in unserem Next.js-Projekt mit dem ButterCMS SDK mit dem folgenden Befehl zu konfigurieren:

$ npm install butter --save
# OR
$ yarn add buttercms

Erstellen Sie anschließend ein Butter-Konto. Klicke hier Link um Ihr Konto zu erstellen. Um ButterCMS dann mit Ihrer Anwendung zu verbinden, müssen Sie den READ API Token-Schlüssel als Umgebungsvariable speichern. Erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projektverzeichnisses und fügen Sie Ihr ButterCMS-API-Token als Umgebungsvariable hinzu:

NEXT_PUBLIC_API_KEY=YOUR_API_KEY

Sie können Ihre bekommen READ-API Token von Ihrem Einstellungs-Dashboard.

ButterCMS einrichten

Nachdem Sie ein ButterCMS-Konto erstellt haben, melden Sie sich bei Ihrem Dashboard an ButterCMS Webseite. Eine der beeindruckendsten Funktionen von ButterCMS ist, dass es über eine vorgefertigte Blog-Engine verfügt, die sich mithilfe einer gut strukturierten API problemlos in Ihre Websites oder Anwendungen integrieren lässt. Die Blog Engine verfügt über eine intuitive Inhaltseinrichtung, die für die Erstellung von Blogbeiträgen konzipiert ist, sodass von Ihrer Seite aus keine Einrichtung erforderlich ist; Es handelt sich um einen Plug-and-Play-Ansatz. Um einen Blog einzurichten, gehen Sie in Ihr Dashboard und klicken Sie in der linken Seitenleiste auf die Blog-Beiträge:

Sobald die neue Seite geöffnet ist, klicken Sie auf Neuer Beitrag Klicken Sie auf die Schaltfläche in der oberen rechten Ecke des Dashboards und fügen Sie auf der sich öffnenden Seite Ihre Blog-Beitragsinformationen hinzu.

Die ButterCMS-Blog-Engine verfügt über eine WYSIWYG Editor, mit dem Sie ganz einfach Inhalte für Ihre Blog-Site erstellen können. Es verfügt über mehrere Funktionen, mit denen Sie Mediendateien wie Videos und Bilder einfügen können, bietet einen benutzerfreundlichen Texteditor und enthält einen Abschnitt zum Einrichten aller Ihrer Blog-Metadaten.

Geben Sie auf der Seite „Blogbearbeitung“ den Titel Ihres Blogbeitrags ein, fügen Sie Inhalte mit dem Texteditor hinzu und fügen Sie ein Titelbild, Autoreninformationen, relevante Tags und wichtige SEO-Daten hinzu.

Im Bild oben enthält die Blog-Engine einen Abschnitt, in dem Sie Kategorien und Tags hinzufügen können, die Blog-Zusammenfassung und einen Abschnitt für die SEO des Blogs. Sie können die oben genannten Schritte ausführen, um weitere Blogbeiträge hinzuzufügen. Nachdem Sie alle Details Ihres Blogs eingegeben haben, klicken Sie auf Veröffentlichen Klicken Sie oben rechts in Ihrem Dashboard auf die Schaltfläche, um Ihren Beitrag zu veröffentlichen.

Integrieren und Rendern von Daten aus der ButterCMS-API

Vergessen Sie nicht, dass Sie Ihr ButterCMS speichern müssen, um es mit Ihrer Anwendung zu verbinden API lesen Schlüssel als Umgebungsvariable. Nachdem Sie mit der Vorbereitung Ihrer Inhalte in ButterCMS fertig sind, öffnen Sie Ihren Code-Editor und erstellen Sie einen Komponentenordner im src Ordner Ihres nächsten Projekts und erstellen Sie dann einen Fußzeile Komponente und Layout Komponente.

Öffnen Sie die Footer.js-Komponente und fügen Sie den folgenden Code hinzu:

 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;

Sehen Sie sich unseren praxisnahen, praktischen Leitfaden zum Erlernen von Git an, mit Best Practices, branchenweit akzeptierten Standards und einem mitgelieferten Spickzettel. Hören Sie auf, Git-Befehle zu googeln und tatsächlich in Verbindung, um es!

Der obige Code fügt den Fußzeilenbereich der Seite hinzu, der auf allen Blogseiten angezeigt wird.

In diesem Artikel verwenden wir Font Awesome-Symbole. Um Font Awesome zu verwenden, können Sie es entweder in Ihrem Projekt installieren oder sein CDN verwenden. Sie können den CDN-Link zu Ihrem hinzufügen _document.js Datei wie folgt:

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> )
}

Erstellen Sie dann die Layout-Komponente und fügen Sie die Footer-Komponente zu Ihrer Seite hinzu, indem Sie Ihren Seiteninhalt darin einbinden. Infolgedessen akzeptiert die Layout-Komponente untergeordnete Elemente als Requisiten, sodass Sie auf den Inhalt Ihrer Next.js-Seiten zugreifen können.

Öffnen Sie den Microsoft Store auf Ihrem Windows-PC. Layout.js Komponente und fügen Sie den folgenden Code hinzu:


import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;

Jetzt können Sie die Layout-Komponente in Ihre Seiten integrieren, indem Sie den Seiteninhalt darin einbinden.

Offen _app.js Datei, um den folgenden Code hinzuzufügen:

 import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}

Öffnen Sie dann Ihre index.js Datei und fügen Sie den folgenden Code hinzu:

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, }, } }

Der obige Code ruft die Beitragsdaten von der ButterCMS-API ab und zeigt sie auf der Seite an.

Als nächstes müssen wir eine individuelle Blog-Seite erstellen, auf die jeder Blog-Beitrag über dynamische Routen verlinkt. Mit Next.js können Sie Seiten mit Pfaden generieren, die von externen Daten abhängen. Um dynamische Routen für die Blogbeiträge zu erstellen, erstellen Sie einen Ordner mit dem Namen Beiträge innerhalb der src / pages Ordner. Erstellen Sie im aktuellen Ordner eine neue Datei mit dem Namen [id].js und fügen Sie den folgenden Code hinzu:

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="/de/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 } } }

Im obigen Code wird jede Seite basierend auf generiert Parameter-ID: post.slug.

Hinweis: Vergessen Sie nicht, die Datei style/global.css aus dem zu kopieren Github Repo und fügen Sie es Ihrer eigenen Projektdatei hinzu, wenn Sie dem Tutorial folgen.

Führen Sie dann den folgenden Befehl aus, um Ihre App im Entwicklungsmodus zu starten:

Ihre Blog-Seite wird so aussehen:

Und jede Blog-Beitragsseite sieht so aus:

Die Codebasis für dieses Tutorial finden Sie hier Github.

Zusammenfassung

In diesem Artikel haben wir erläutert, wie Sie mithilfe von Next.js und der ButterCMS-Blog-Engine ganz einfach ein Gerüst für eine Blog-Website erstellen oder eine Blog-Engine in Ihre Website integrieren. ButterCMS ist ein großartiges Headless-CMS zum Erstellen von Blogs. Es erspart Ihnen den Aufwand und die Zeit, die Sie mit der manuellen Erstellung eines Blogs hätten. Mit ButterCMS können Sie ganz einfach ein Blog mit jeder Programmiersprache oder jedem Framework-Stack Ihrer Wahl einrichten.

Um mehr über ButterCMS zu erfahren, können Sie sich ButterCMS ansehen Dokumentation.

spot_img

Neueste Intelligenz

spot_img

Copyright @ 2024 Plato Technologies Inc.