Рубрики
Без рубрики

Использование Tinacms с Next.js

Обновление 03.13.20 – Конфигурация для Next.js + Tina немного изменилась, к лучшему. Настраивать… Теги от JamStack, WebDev, JavaScript, реагируют.

Обновление 03.13.20 – Конфигурация для Next.js + Tina немного немного изменилась, к лучшему. Настройте для Редактирование форм намного проще с использованием помощников помощников. Чтобы увидеть последние реализации примера блога, пожалуйста, обратитесь к Исходный код Отказ

Этот блог является частью серии, изучающей использование Next.js + Tina. Частивая я узнал, как создать простой блог на основе Markdown с Next. В этом посте мы добавим емкость редактирования контента, настроив сайт с Tinacms.

Next.js recap ▲

Next.js это Реагистрация «Мета-каркас» (рамки, построенные на каркасе) для разработки веб-приложений, построенные командой в Vercel Отказ Читать Часть Я Чтобы ознакомиться с основами Next.js.

Tina Обзор 🦙.

Нам нравится говорить, что « Тина не является CMS». Скорее, TINA – это коллекция компонентов JavaScript с открытым исходным кодом, которые вы вкладываете в ваш сайт CodeBase – Инструментарий для создания интернет-редактирования в реальном времени UI. Это невероятно гибко, разработчики в абсолютном контроле над управлением контентом, а редакторы получают опыт «WYSIWYG в реальном времени».

Лучший способ почувствовать, как работает Тина, – это использовать ее. Мы надеемся, что к концу этого урока вы не только узнаете, как использовать TINA, но и то, как TINA переосмыслеет способ работы CMS.

Давайте начнем

Этот учебник покажет вам, как установить и Настройте TINA для редактирования контента на простом блоге на основе разметки Это было создано в посте прошлой недели. Если вы хотите копать, как был сделан базовый блог, прочитайте Часть Я этой серии.

Перепрыгните вперед, чтобы увидеть Последнее репо здесь Отказ Или проверить TINA + NEXT.JS Документация здесь

Какой-то фон 🏜.

Важно отметить, что из-за открытого характера Next.js есть много способов, которыми вы сможете включить TINA в Next.js сайты или приложения. Этот учебник продемонстрирует только один подход с простыми примерами.

Также стоит отметить, что, в отличие от GATSBY, Next.js в настоящее время не имеет системы плагинов. Если вы ранее смотрели на Тину Гид настройки GATSBY , вы увидите, что мы используем несколько разных плагинов для настройки TINA. С Next.js нам нужно будет написать этот код насыпки непосредственно в наш проект.

Настройте локально 🏡

Не стесняйтесь следить и соответствовать этим рекомендациям на свой собственный сайт или блог, или вы можете использовать стартер, который мы создали в предыдущем руководстве. В вашем терминале перейдите к тому, где вы хотите, чтобы этот блог, а затем запустите:

#clone the repo
$ git clone git@github.com:kendallstrautman/brevifolia-nextjs.git next-tina-blog

#navigate to the directory
$ cd next-tina-blog

#install dependencies & run dev server with yarn
$ yarn install
$ yarn dev

Теперь, когда сервер разработки работает, перейдите к http://localhost: 3000/ Чтобы проверить это.

Настройте TinaCMS в приложении 🔆

С next.js есть Приложение Компонент класса который инициализирует страницы. Нам нужно переопределить этот компонент, чтобы обернуть каждую страницу в Тина Компонент, который обеспечит доступ к CMS пример.

Следуя вместе с TINA Документация:

# Install `tinacms` & required peer dependencies
$ yarn add tinacms styled-components moment

Создайте новый файл в каталоге страниц под названием _app.js и добавить этот код.

import React from 'react'
import App from 'next/app'
import { TinaProvider, TinaCMS } from 'tinacms'

class MyApp extends App {
  constructor() {
    super()
    // initialize the cms
    this.cms = new TinaCMS()
  }
  render() {
    const { Component, pageProps } = this.props
    // Wrap the page with Tina, provide the cms
    return (
      
        
      
    )
  }
}

export default MyApp

Если вы перезагрузите сервер Dev, теперь вы должны увидеть значок карандаша в левом нижнем углу. Идите вперед и нажмите на него, чтобы показать боковая панель Отказ Тина Компонент, который мы добавили в _app.js Дает каждую страницу доступ к этому боковая панель Отказ Подумайте об этом как о вашей «домашней базе» для редактирования содержания с Тиной.

Настройка Git Backend 👾

На данный момент боковая панель пуста, потому что TINA не знает, какого контента редактировать. Прежде чем мы подключаемся к содержанию TINA, нам нужно Настройте бэкэнд Это будет говорить с Git и может отслеживать изменения контента, когда они происходят.

# Install express, cors & tina git packages
$ yarn add express cors @tinacms/api-git @tinacms/git-client

Рукоятки Tina’s Backend установлены как экспресс промежуточное программное обеспечение. Это означает, что нам нужно будет запустить экспресс с нашими сервером dev nex.js. Создать Server.js Файл в корне вашего проекта со следующим:

const express = require('express')
const next = require('next')
const cors = require('cors')
const gitApi = require('@tinacms/api-git')
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({
  dev,
})
const handle = app.getRequestHandler()
app.prepare().then(() => {
  const server = express()
  server.use(cors())
  server.use('/___tina', gitApi.router({
      pathToRepo: process.cwd(),
      pathToContent: '',
    }))
  server.all('*', (req, res) => {
    return handle(req, res)
  })
  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

Затем в вашем файле Package.json добавьте этот скрипт:

"scripts": {
    "develop": "node server.js",
    //...
  }

Это будет иметь следующий использовать ваш пользовательский серверный код вместо этого, если его сервер разработки по умолчанию. Посмотрите на Next.js Пользовательские серверы Документы и Tina’s Next.js Документы Чтобы получить больше информации.

Подключение и передний 🖇

Теперь нам нужно связать этот Git Backend с экземпляром CMS в нашем блоги стартера. Перейти к вашему _app.js Файл и зарегистрируйте экземпляр GitClient. с CMS. Как видно в коде ниже.

import React from 'react'
import App from 'next/app'
import { Tina, TinaCMS } from 'tinacms'
// import the git client
import { GitClient } from '@tinacms/git-client'

class MyApp extends App {
  constructor() {
    super()
    this.cms = new TinaCMS()
    // create the client
    const client = new GitClient('http://localhost:3000/___tina')
    // register client with the cms
    this.cms.registerApi('git', client)
  }

  render() {
    //...
  }
}

export default MyApp

Это все конфигурация для отслеживания и сохранения изменений содержания с Git & Tina. Чтобы проверить, запустить Развивать Скрипт и убедитесь, что нет ошибок. Вещи должны выглядеть одинаково, но за кулисами мы добавили способ отправить контент изменения от фантазии на бэкэнду.

Создание форм содержимого 📝

Хорошо, теперь веселье начинается – давайте копать Редактирование контента . Мы получаем доступ к моментам редактирования TINA, зарегистрировавшими формы для CMS. . При создании этих Формы мы определяем поля которые подключаются к битам и кускам содержания, которое вы хотите сделать редактируемые.

Поскольку наш сайт в основном состоит из данных блога, давайте настроим TINA для редактирования сообщений блога. Откройте Шаблон блога Файл ( Pages/Blog/[Slug] .js ).

Как репромата из Часть Я мы используем GetInitialProps Метод захватить данные разметки, которые будут переданы как реквизиты для Blogtemplate компонент.

Конфиденциальная форма конфигурации

Во-первых, нам нужно добавить дополнительное свойство на возвратный объект из GetInitialProps называется FialerelativePath Отказ TINA нужен этот путь, чтобы узнать, какой файл обновить. Вот пример того, как вы могли бы добавить FialerelativePath :

BlogTemplate.getInitialProps = async function(ctx) {
  const { slug } = ctx.query
  const content = await import(`../../posts/${slug}.md`)
  const config = await import(`../../data/config.json`)
  const data = matter(content.default)

  return {
    fileRelativePath: `posts/${slug}.md`,
    title: config.title,
    ...data,
  }
}

Далее мы создадим и зарегистрируем форму с Uselocalform крюк. При регистрации формы необходимо знать четыре вещи: уникальный ID , что InitialValues. Это может редактировать форму содержимого через поле Определения, а что делать OnsUbmit Отказ

Проверьте код ниже, чтобы увидеть пример вызовов Uselocalform :

import { useCMS, useLocalForm } from 'tinacms'
import * as yaml from 'js-yaml'

export default function BlogTemplate(props) {

  function toMarkdownString(formValues) {
    return (
      '---\n' +
      yaml.dump(formValues.frontmatter) +
      '---\n' +
      (formValues.markdownBody || '')
    )
  }

 // access the cms instance
 const cms = useCMS()

 // hook to register the form
 const [post, form] = useLocalForm({

   id: props.fileRelativePath, // needs to be unique
   label: 'Edit Post', // label appears in the sidebar

   // starting values for the post object
   initialValues: {
     fileRelativePath: props.fileRelativePath,
     frontmatter: props.data,
     markdownBody: props.content
   },

   // field definitions shape content editing UI
   fields: [
     {
       label: "Hero Image",
       name: 'frontmatter.hero_image',
       component: "image",
       // Generate the frontmatter value based on the filename
       parse: filename => `../static/${filename}`,
        // Decide the file upload directory for the post
       uploadDir: () => "/static/",
        // Generate the src attribute for the preview image.
       previewSrc: data => `/static/${data.frontmatter.hero_image}`,
     },
     {
       name: 'frontmatter.title',
       label: 'Title',
       component: 'text',
     },
     {
       name: 'frontmatter.date',
       label: 'Date',
       component: 'date',
     },
     {
       name: 'frontmatter.author',
       label: 'Author',
       component: 'text',
     },
     {
       name: 'markdownBody',
       label: 'Blog Body',
       component: 'markdown',
     },
   ],

   // save & commit the file when the "save" button is pressed
   onSubmit(data) {
     return cms.api.git
       .writeToDisk({
         fileRelativePath: props.fileRelativePath,
         content: toMarkdownString(data),
       })
       .then(() => {
         return cms.api.git.commit({
           files: [props.fileRelativePath],
           message: `Commit from Tina: Update ${data.fileRelativePath}`,
         })
       })
   },
 })

 // useWatchFormValues will go here

 return (
    //...
   );
}

Соблюдайте, что в OnsUbmit Функция обратного вызова, мы получаем доступ к GIT API, мы зарегистрировали ранее, чтобы написать файл изменения на диске, а затем совершать эти изменения. Мы также сериализуем наши данные через TomarkDownString функция; Backend Git сознательно не опрашивается, поэтому нам нужно позаботиться о подготовке наших данных для написания, прежде чем отправить его обратно.

Обновление представленных данных 🎨

Посмотрите еще раз на то, как мы называем Uselocalform :

const [post, form] = useLocalForm(...)

Это общий шаблон для реактивных крюков. Uselocalform Возвращает двухэлементный массив, который мы разрушаем на два отдельных объекта. Форма Возвращает объект формы, который мы можем сделать некоторые аккуратные вещи с (больше на это в на мгновение), но то, что мы действительно заботимся о том, это пост объект. Этот объект содержит данные формы и будут обновляться всякий раз, когда значения в форме изменяются пользователем. Если мы используем Это Данные при рендеринге нашего макета наш сайт будет обновляться в режиме реального времени в качестве изменения данных!

пост Объект будет содержать InitivalValues на первом рендере. Так как у него такая же форма, как реквизит Мы используем в нашем макете, все, что нам нужно сделать, это заменить соответствующие ссылки на реквизит с пост :

// replace "props" with "post" for editable form content
return (
  
    

      

        {`blog_hero_${post.frontmatter.title}`}
      

      

        
{post.frontmatter.title}

        
{post.frontmatter.date}

      

      

        
      

      
Written By: {post.frontmatter.author}

    

  
)

Обратите внимание на Ситуация Еще ссылки ropp.title.title. Это потому, что это значение не передается в Тину как редактируемую часть этой формы. Если мы хотим отредактировать этот сайт Config, мы могли бы создать другую форму (например, на макете компонент), который подключил бы Тину к config.json файл.

Редактировать содержимое 🎯.

Если вы запустите пряжа развивается И откройте сообщение в блоге в браузере, вы должны увидеть редактируемые поля в боковой панели. Попробуйте обновить заголовок поста, нажмите Сохранить и посмотреть, что произойдет.

Если все настроено правильно, TINA попробует совершить эти изменения (вам может быть запрошено для вашего пароля в терминале). Убейте сервер Dev и запустите Git log чтобы увидеть коммит от Тина. 🙌 🏻

Это потрясающе! Мы подключили Тину, чтобы сделать редактирование и совершать изменения. Одна вещь, которую вы заметите, однако, заключается в том, что любые неспашенные изменения исчезают при навигации на другую страницу или освежающуюся.

Наблюдение за изменениями контента в реальном времени ⌚️

Если вы хотите, чтобы ваши изменения написали на диск в режиме реального времени, нам нужно будет использовать другой крюк, UseWatchFormValues Отказ Этот крючок позволяет выполнять функцию в любое время изменения состояния формы. UseWatchFormValues принимает объект формы, созданный Uselocalform Крючок и функция обратного вызова, чтобы вызвать при изменении формы.

Добавьте этот пример код ниже на свой компонент шаблона непосредственно перед вернуть утверждение. Не стесняйтесь ссылаться на окончательный файл здесь Отказ

// add useWatchFormValues to import
import { useCMS, useLocalForm, useWatchFormValues } from 'tinacms'

export default function BlogTemplate(props) {
  // useLocalForm config...

  // callback function for form changes
  const writeToDisk = React.useCallback(formState => {
   cms.api.git.onChange({
     fileRelativePath: props.fileRelativePath,
     content: toMarkdownString(formState.values),
   })
  }, [])

  // invoke the hook
  useWatchFormValues(form, writeToDisk)

  return (
    //...
  )
}

Тест и редактировать содержимое ✨

Если все прошло хорошо, ваши сообщения в блоге теперь будут редактируемые TINA. Давайте увидимся в действии!

Запустить DEV Server, запустив пряжа развивается И открывайте сообщение в блоге в браузере. Идите вперед и сделайте редактирование, а затем проверьте исходный файл в текстовом редакторе. Если вы держите браузер и редактор кода открыть бок о бок, вы сможете смотреть изменения, отражающиеся в режиме реального времени в обоих местах!

Устранение неполадок : Если вы видите только изменения обновления в браузере, но не сразу же записывать в файловую систему, Убедитесь, что вы используете правильный скрипт который инициирует как следующий DEV Server, так и GIT API через одновременно Отказ

Следующие шаги 🚶♀️.

Отличная работа! С какой-то конфигурацией и вызовом нескольких крючков мы можем редактировать все наши сообщения в блоге с Tina.

Чтобы настроить редактирование контента на остальной части сайта, мы захочем настроить TINA для страницы «Info» вместе с любым другим метаданным общего сайта. Попробуйте реализовать тот же подход в Информация Страница компонента. Оформить заказ Окончательный репо Для справки о том, как это сделать.

Оставайтесь на улице: На последующих постах мы осмотрим, как настроить этот сайт для статического экспорта, внедряя глобальные формы и извлечение этой конфигурации TINA в единую функцию многоразового использования.

Оригинал: “https://dev.to/tinacms/using-tinacms-with-next-js-4ddf”

Читайте ещё по теме: