Что такое ButterCMS
ButterCMS — это облачная, ориентированная на API, безголовая CMS, которая позволяет быстро создавать приложения и веб-сайты на базе CMS. Он имеет простую в использовании панель инструментов для создания и управления контентом. Он поставляется с предварительно созданным, API-first блог-движком, оптимизированным для SEO, который позволяет вам быстро создавать и интегрировать функциональную систему блогов для веб-сайтов или приложений. Он легко интегрируется в новые и существующие приложения и является одной из лучших доступных безголовых CMS.
Требования к учебнику
Ниже приведены основные требования, которым необходимо следовать в этом руководстве:
- Базовые знания Next.js
- Редактор кода, например Sublime или Visual Studio Code.
- Font Awesome Иконки
- A МаслоCMS пробный аккаунт.
Настройка среды разработки
Прежде чем приступить к работе, откройте терминал и перейдите туда, где вы хотите создать/сохранить, и выполните приведенную ниже команду, чтобы выполнить create-next-app для загрузки проекта.
$ npx create-next-app my-blog
Затем появится приглашение с просьбой подтвердить некоторые дополнительные зависимости. После этого приведенная выше команда автоматически создаст структуру папок для нашего проекта.
Следующим шагом будет настройка ButterCMS в нашем проекте Next.js с помощью ButterCMS SDK с помощью следующей команды:
$ npm install butter --save
# OR
$ yarn add buttercms
После этого создайте учетную запись Butter. Нажмите это ссылке для создания учетной записи. Затем, чтобы подключить ButterCMS к вашему приложению, вам нужно будет сохранить ключ READ API Token в качестве переменной среды. Создайте файл .env в корне каталога вашего проекта и добавьте токен API ButterCMS в качестве переменной среды:
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Вы можете получить свой ЧИТАТЬ API Токен от вашего панель настроек.
Настройка ButterCMS
После создания учетной записи ButterCMS войдите в свою панель управления на МаслоCMS Веб-сайт. Одной из самых впечатляющих особенностей ButterCMS является то, что она поставляется с готовым движком блога, который легко интегрируется с вашими веб-сайтами или приложениями с помощью хорошо структурированного API. Blog Engine имеет интуитивно понятную настройку содержимого, предназначенную для создания сообщений в блогах, поэтому с вашей стороны не требуется никаких настроек; это подход plug-and-play. Чтобы настроить блог, зайдите в свою панель управления и нажмите «Сообщения блога» на левой боковой панели:
Когда откроется новая страница, нажмите кнопку Новый пост в правом верхнем углу панели инструментов и добавьте информацию о своем блоге на открывшейся странице.
Блоговый движок ButterCMS поставляется с WYSIWYG Редактор, который позволяет легко создавать контент для вашего блога. Он может похвастаться несколькими функциями, которые позволяют вставлять мультимедийные файлы, такие как видео и изображения, предоставляет простой в использовании текстовый редактор и включает раздел для настройки всех метаданных вашего блога.
На странице «Редактирование блога» введите заголовок сообщения в блоге, добавьте содержимое с помощью текстового редактора и включите обложку, информацию об авторе, соответствующие теги и важные данные SEO.
На изображении выше движок блога включает в себя раздел, который позволяет добавлять категории и теги, сводку блога и раздел для SEO блога. Вы можете выполнить шаги, описанные выше, чтобы добавить больше сообщений в блог. После ввода всех сведений о своем блоге нажмите кнопку Опубликовать кнопку в правом верхнем углу панели инструментов, чтобы опубликовать сообщение.
Интеграция и рендеринг данных из ButterCMS API
Не забывайте, что для подключения ButterCMS к вашему приложению вы должны сохранить Чтение API key в качестве переменной среды. После того, как вы закончите подготовку своего контента в ButterCMS, откройте редактор кода и создайте папку компонентов в SRC папку вашего проекта Next, затем создайте нижний колонтитул компонент и Планировка компонент.
Откройте компонент Footer.js и добавьте следующий код:
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;
Ознакомьтесь с нашим практическим руководством по изучению Git с рекомендациями, принятыми в отрасли стандартами и прилагаемой памяткой. Перестаньте гуглить команды Git и на самом деле изучить это!
Приведенный выше код добавит нижний колонтитул страницы, который будет отображаться на всех страницах блога.
В этой статье мы будем использовать иконки Font Awesome. Чтобы использовать Font Awesome, вы можете либо установить его в свой проект, либо использовать его CDN. Вы можете добавить ссылку CDN на свой _document.js
файл вроде этого:
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> )
}
Затем создайте компонент «Макет» и добавьте на страницу компонент «Нижний колонтитул», поместив в него содержимое страницы. В результате компонент Layout будет принимать дочерние элементы в качестве свойств, что позволит вам получить доступ к содержимому ваших страниц Next.js.
Откройте приложение Макет.js компонент и добавьте следующий код ниже:
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Теперь вы можете интегрировать компонент Layout в свои страницы, обернув в него содержимое страницы.
Откройте _app.js
файл, чтобы добавить следующий код:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Затем откройте свой index.js файл и добавьте следующий код:
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, }, } }
Приведенный выше код извлекает данные публикации из API ButterCMS и отображает их на странице.
Далее нам нужно создать отдельную страницу блога, на которую каждая запись блога ссылается с помощью динамических маршрутов. Next.js позволяет создавать страницы с путями, зависящими от внешних данных. Чтобы создать динамические маршруты для сообщений блога, создайте папку с именем сообщений внутри SRC / страницы папка. В текущей папке создайте новый файл с именем [идентификатор].js и добавьте следующий код:
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="/ru/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 } } }
В приведенном выше коде каждая страница будет генерироваться на основе идентификатор параметра: post.slug.
Примечание. Не забудьте скопировать файл style/global.css из Github репо и добавьте его в свой собственный файл проекта, если вы следуете руководству.
Затем выполните приведенную ниже команду, чтобы запустить приложение в режиме разработки:
Страница вашего блога будет выглядеть так:
И каждая страница поста в блоге будет выглядеть так:
Вы можете получить кодовую базу для этого руководства здесь, на Github.
Заключение
В этой статье мы рассмотрели, как легко создать каркас веб-сайта блога или интегрировать движок блога в ваш веб-сайт с помощью Next.js и движка блога ButterCMS. ButterCMS — отличная безголовая CMS для создания блогов; это сэкономит вам головную боль и время от создания блога вручную. С помощью ButterCMS вы можете легко настроить блог с любым языком программирования или набором фреймворков по вашему выбору.
Чтобы узнать больше о ButterCMS, вы можете проверить ButterCMS документации.
- SEO-контент и PR-распределение. Получите усиление сегодня.
- PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
- ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
- ПлатонЭСГ. Автомобили / электромобили, Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
- Смещения блоков. Модернизация права собственности на экологические компенсации. Доступ здесь.
- Источник: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :имеет
- :является
- :куда
- ][п
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- О нас
- выше
- Принять
- доступ
- Учетная запись
- на самом деле
- Добавить
- дополнительный
- После
- Все
- Позволяющий
- позволяет
- вдоль
- причислены
- an
- и
- Anonymous
- любой
- API
- приложение
- Применение
- Приложения
- подхода
- Программы
- МЫ
- гайд
- AS
- At
- автор
- автоматически
- доступен
- аватар
- Ждите
- основанный
- колотить
- BE
- ниже
- ЛУЧШЕЕ
- Блог
- Сообщения в блоге
- блоги
- хвастается
- тело
- Начальная загрузка
- граница
- строить
- Строительство
- кнопка
- by
- призывают
- под названием
- CAN
- Может получить
- категории
- проверка
- Дети
- выбор
- нажмите на
- CloudFlare
- КМВ
- код
- Codebase
- выходит
- компонент
- компоненты
- заключение
- подтвердить
- Свяжитесь
- Консоли
- содержит
- содержание
- содержание
- Corner
- чехол для варгана
- Создайте
- Создающий
- CSS
- Текущий
- приборная панель
- данным
- Давид
- По умолчанию
- предназначенный
- подробнее
- Дев
- Развитие
- Дисплей
- отображается
- дисплеев
- Дон
- сделанный
- динамический
- каждый
- легко
- Простой в использовании
- редактор
- или
- включить
- позволяет
- конец
- Конечная точка
- Двигатель
- Enter
- Окружающая среда
- выполнять
- существующий
- экспорт
- и, что лучший способ
- ложный
- Особенности
- Файл
- Файлы
- Фокус
- следовать
- после
- Что касается
- Рамки
- от
- функция
- функциональная
- порождать
- генерируется
- получить
- идти
- GitHub
- Go
- большой
- инструкция
- практический
- Есть
- здесь
- зависать
- Как
- How To
- HTML
- HTTPS
- иконки
- ID
- if
- изображение
- изображений
- важную
- впечатляющий
- in
- включают
- включены
- включает в себя
- индекс
- individual
- информация
- внутри
- устанавливать
- интегрировать
- Интегрируется
- в
- интуитивный
- IT
- ЕГО
- Основные
- знания
- язык
- запуск
- Планировка
- УЧИТЬСЯ
- изучение
- оставил
- LG
- такое как
- LINK
- связи
- ll
- журнал
- логотип
- посмотреть
- выглядит как
- Главная
- Создание
- управления
- вручную
- означает
- Медиа
- Метаданные
- мин
- режим
- БОЛЕЕ
- самых
- должен
- my
- Названный
- Откройте
- Необходимость
- Новые
- следующий
- Next.js
- нет
- of
- on
- ONE
- только
- открытый
- Откроется
- or
- Другое
- наши
- внешний
- собственный
- страница
- страниц
- pass
- Платон
- Платон Интеллектуальные данные
- ПлатонДанные
- После
- Блог
- практическое
- подготовка
- процесс
- Программирование
- Проект
- приводит
- публиковать
- опубликованный
- быстро
- быстро
- RE
- реагировать
- Читать
- соответствующие
- оказание
- обязательный
- Требования
- результат
- возвращают
- кольцо
- корень
- дорога
- маршруты
- Run
- s
- Сохранить
- SDK
- легко
- Раздел
- поисковая оптимизация
- набор
- установка
- несколько
- Shadow
- лист
- должен
- сайте
- So
- некоторые
- пролет
- стек
- Стекабьюс
- стандартов
- и политические лидеры
- Шаг
- Шаги
- Stop
- Структура
- студия
- такие
- РЕЗЮМЕ
- система
- Терминал
- который
- Ассоциация
- Их
- тогда
- Там.
- Эти
- этой
- Через
- время
- Название
- в
- знак
- переход
- суд
- учебник
- использование
- через
- с помощью
- Видео
- ходил
- хотеть
- we
- Вебсайт
- веб-сайты
- , которые
- будете
- в
- XML
- Ты
- ВАШЕ
- зефирнет