Сегодня мы собираемся создать простую систему блогов на основе Wordpress, но интерфейс будет реализован в NextJS, популярном фреймворке для рендеринга на стороне сервера для React.

Некоторое время назад я писал о другой системе блогов, которую реализовал на основе уценки, вы можете прочитать об этом ЗДЕСЬ.

Прежде всего, позвольте установить некоторые концепции, я предполагаю, что вы знаете, как работает Docker, и имеете некоторое представление о React. Мы собираемся установить сервер Wordpress локально с помощью Docker, а затем мы собираемся задействовать его API и получить данные, которые будут отображаться в нашем интерфейсе.

Настройка Wordpress

Что ж, это довольно просто, мы просто собираемся создать простой файл Docker-Compose, который будет делать всю магию, затем нам нужно получить доступ к localhost: 8000, заполнить некоторые поля и написать несколько сообщений, вот вам файл, вы ' Мне просто нужно запустить docker-compose up -d, где бы этот файл ни находился, и ваш бэкэнд будет запущен.

СОВЕТ. Чтобы немного упростить задачу, перейдите в Настройки ›Постоянная ссылка и установите пользовательскую структуру с помощью /% post% /, это очень поможет, когда вам нужно задействовать API вашего сервера.

Приложение NextJS

Что ж, здесь тоже довольно просто, теперь вам нужно только создать свое приложение, как обычно, но мы сосредоточимся всего на двух страницах, одна из которых отображает список блогов, а другая - содержимое каждого блога.

Вы можете найти этот пример, реализованный в ЭТОМ РЕПО.

Прежде всего позвольте создать страницу, которая будет отображать список блогов, мы предположим, что существует компонент, который с учетом массива сообщений может отображать их список, это довольно простой компонент, здесь важен метод getInitialProps , это то место, куда мы собираемся подключить нашу выборку, в этом случае мы собираемся нажать http: // localhost: 8000 / wp-json / wp / v2 / posts, и мы перейдем к получить полный список сообщений в блоге и внедрить его через реквизиты на нашу страницу.

На данный момент у нас уже есть наш список, теперь пришло время визуализировать каждое сообщение, мы собираемся создать ссылки, например: post? Name = slug. Сделав это, мы можем просто создать что-то вроде следующего примера, который могли бы ударить наш API и получить сообщение, которое мы хотим, это можно было бы лучше реализовать с помощью какого-нибудь красивого URL-адреса и прочего, но сейчас мы просто делаем быстрый пример.

Здесь важно снова getInitialProps, мы получаем сообщение в блоге, которое хотим получить, на основе нашего запроса, а затем просто отображаем его как опасноSetInnerHTML, и все, ребята.

Заключение

  • Довольно легко создать свой собственный блог, используя Wordpress в качестве бэкэнда, поэтому любой технический специалист не сможет писать ваш контент.
  • Докер - это любовь.
  • Вы можете увидеть много подобных вещей на ЭТОЙ СТРАНИЦЕ.