В этом посте мы узнаем о Netlify CMS и о том, как настроить полный рабочий процесс для нашего примера блога JAMstack, созданного с помощью Gatsby. JAMStack - это самое популярное слово на рынке, особенно для веб-сайтов с большой загрузкой через интерфейс, которые мало зависят от серверной части / баз данных.
JAMStack - это современная архитектура создания веб-приложений без использования каких-либо серверных компонентов и баз данных. Веб-сайты JAMStack используют JavaScript для извлечения динамических данных из разметки с помощью API и визуализации их в статических шаблонах HTML / CSS. Веб-сайты JAMstack работают быстрее, безопаснее и легче масштабируются.
Организации, использующие JAMStacks, обычно используют эту выборку данных во время сборки, чтобы совместно использовать компоненты логики и пользовательского интерфейса, своего рода мини-приложения, между своими различными проектами (это позволяет быстро и безопасно создавать композиции со стандартизованным внешним видом и интерфейсом). -feel »и тональный и голосовой ). Подробнее о совместном использовании компонентов между проектами с использованием Bit (Github) здесь:
Что такое Netlify CMS?
Netlify CMS - это система управления контентом с открытым исходным кодом (CMS) для генераторов статических сайтов, которая позволяет редактировать наш контент и данные как коммиты в Git Repositories приложений в формате Markdown, JSON, YAML или TOML. Netlify CMS - это одностраничное приложение React, которое действует как оболочка для нашего рабочего процесса Git, обеспечивая простой и удобный пользовательский интерфейс (UI).
Существуют и другие автономные CMS, такие как Strapi, Contentful и другие, которые мы также можем использовать с любыми другими веб-сайтами JAMStack.
Настройте наш блог Gatsby
Gatsby - это основанный на React генератор статических сайтов, который использует GraphQL для запроса данных из Markdown для отображения в компонентах React. Нам нужно будет установить Gatsby CLI, чтобы создать наш блог из шаблонов Gatsby.
npm install -g gatsby-cli
Мы будем использовать шаблон Блог стартера Гэтсби для настройки нашего блогового сайта.
gatsby new netlify-cms-gatsby https://github.com/gatsbyjs/gatsby-starter-blog
cd netlify-cms-gatsbyДавайте запустим наше приложение локально, прежде чем интегрировать его с Netlify CMS—
npm start # Output > [email protected] start /Users/ankitjain/project/netlify-cms-gatsby > npm run develop > [email protected] develop /Users/ankitjain/project/netlify-cms-gatsby > gatsby develop Debugger listening on ws://127.0.0.1:9229/34705dba-39b8-45e8-a25d-73789f81ef07 For help, see: https://nodejs.org/en/docs/inspector success open and validate gatsby-configs - 0.058s success load plugins - 3.714s warn The Google Analytics plugin requires a tracking ID. Did you mean to add it? success onPreInit - 0.026s success initialize cache - 0.010s success copy gatsby files - 0.111s warn gatsby-plugin-feed was initialized in gatsby-config.js without a feeds option. This means that the plugin will use the internal RSS feed creation, which may not match your use case. This behavior will be removed in the next major release of gatsby-plugin-feed. For more info, check out: https://gatsby.dev/adding-rss-feed success onPreBootstrap - 0.049s success createSchemaCustomization - 0.147s success Checking for changed pages - 0.002s success source and transform nodes - 0.123s success building schema - 0.275s success createPages - 0.027s success Checking for changed pages - 0.002s success createPagesStatefully - 0.090s success update schema - 0.025s success write out redirect data - 0.003s success Build manifest and related icons - 0.113s success onPostBootstrap - 0.119s info bootstrap finished - 8.025s success onPreExtractQueries - 0.002s success extract queries from components - 0.330s success write out requires - 0.031s success run static queries - 0.096s - 2/2 20.82/s success run page queries - 0.227s - 8/8 35.27/s success Generating image thumbnails - 2.999s - 9/9 3.00/s ⠀ You can now view gatsby-starter-blog in the browser. ⠀ http://localhost:8000/ ⠀ View GraphiQL, an in-browser IDE, to explore your site's data and schema ⠀ http://localhost:8000/___graphql ⠀ Note that the development build is not optimized. To create a production build, use gatsby build ⠀ success Building development bundle - 5.451s
Гэтсби запускает команду gatsby develop, чтобы запустить наш сервер разработки. Он также включает некоторые функции, такие как перезагрузка в реальном времени, изучение данных и схемы сайта через GraphiQL. Команда Gatsby develop отличается от команды gatsby build, поскольку сборка gatsby делает еще несколько упаковок, чтобы сделать наше приложение готовым к работе. Об этом подробнее здесь".
Замечательно, наш блог запущен и работает. Мы можем найти сообщения блога в формате Markdown в каталоге content/blog. Давайте интегрируем его с Netlify CMS.
Интегрируйте Netlify CMS
Нам нужно установить пакеты npm, чтобы добавить Netlify CMS на наш блог-сайт. gatsby-plugin-netlify-cms использует netlify-cms-app плагин для рендеринга /admin страницы Netlify CMS на основе React.
npm install --save netlify-cms-app gatsby-plugin-netlify-cms
Gatsby использует файл gatsby-config.js для хранения параметров конфигурации сайта, таких как метаданные сайта, плагины, сопоставление, прокси и т. Д. Давайте добавим наш плагин Netlify CMS в нашу gatsby-config.js опцию плагинов -
plugins: [ . . `gatsby-plugin-netlify-cms`, . . ],
Netlify CMS использует файл конфигурации с именем config.yml, в котором мы определяем серверные части, коллекции и другие настраиваемые параметры для нашего пользовательского интерфейса администратора. Гэтсби использует каталог /static для хранения статических файлов. Давайте создадим /admin/config.yml файл в /static директории -
mkdir -p ./static/admin touch ./static/admin/config.yml
Добавьте следующую конфигурацию в config.yml файл -
Мы используем тестовый бэкэнд, который позволяет нам использовать Netlify CMS без подключения к Git. Netlify CMS обеспечивает гибкость для использования других бэкендов, таких как GitHub, GitLab, Git Gateway и т. Д. Мы хотим протестировать его локально перед развертыванием на Netlify или любых других серверах.
Примечание. Не забудьте изменить серверную часть при развертывании в производственной среде.
Мы также определили наш тип контента в поле коллекций. Netlify CMS поддерживает виджеты по умолчанию для наших полей содержимого, а также обеспечивает гибкость для добавления нашего настраиваемого виджета.
Давайте перезапустим наш сервер разработки gatsby -
npm start
Мы можем увидеть результат, аналогичный изображению, добавленному выше. Как мы видим, наша Netlify CMS работает на http://localhost:54258/admin. Давайте посмотрим на нашу CMS -
Отлично, работает отлично, но чего-то не хватает….! Да, теги в сообщениях блога. К сожалению, у нас нет виджета по умолчанию для добавления тегов, но Netlify CMS предоставляет гибкость для создания наших собственных настраиваемых виджетов. Давайте создадим наш собственный виджет, чтобы добавлять теги в сообщения нашего блога.
Виджет добавления тегов
Netlify CMS предоставляет метод registerWidget для добавления наших пользовательских виджетов с помощью React.js. Он принимает четыре аргумента: имя виджета, компонент управления, компонент предварительного просмотра и объект схемы (компонент предварительного просмотра и объект схемы не являются обязательными). Я создал простые CSS-теги на Codepen, используя HTML и CSS, которые мы будем использовать для создания нашего компонента React для тегов.
Создайте каталог с именем tagWidget в каталоге src/components, где мы будем создавать наши компоненты управления и предварительного просмотра для виджета тегов.
Создайте компонент TagControl TagControl.js -
//src/components/tagWidget/TagControl.jsimport React from 'react'; export class TagControl extends React.Component { handleChange = e => { const separator = this.props.field.get('separator', ', ') this.props.onChange(e.target.value.split(separator).map((e) => e.trim())); } render() { const separator = this.props.field.get('separator', ', '); var value = this.props.value; return React.createElement('input', { id: this.props.forID, className: this.props.classNameWrapper, type: 'text', value: value ? value.join(separator) : '', onChange: this.handleChange, }); } } export default TagControl
Мы будем создавать React Component input типа, который отображает элемент управления.
В нашем компоненте предварительного просмотра, который фактически отображает тег CSS в сообщениях блога, а также на панели предварительного просмотра редактора при добавлении тегов. Нам нужно добавить стиль для тегов. Гэтсби поддерживает несколько способов добавления стиля. Мы будем использовать CSS Module, чтобы мы могли включать стиль только в наш компонент ReactPreview, а не как глобальный CSS.
Создайте файл с именем style.module.css в каталоге src/components/tagWidget -
ul.tags {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-end: 0px;
}
.tags {
list-style: none;
padding-left: 0;
display: inline-block;
}
.tags li {
padding: 0;
margin: 0;
display: inline-block;
}
.tags .tag {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.6);
border-radius: 3px;
padding: 5px 10px;
display: inline-block;
margin: 0 10px 10px 0;
}
.tag:hover {
transition: all 0.2s;
background-color: crimson;
color: white;
}
.tag:hover::after {
border-left-color: crimson;
}
.tags a {
text-decoration: none;
}
Давайте добавим наш компонент TagPreview TagPreview.js -
// src/components/tagWidget/TagPreview.js
import React from 'react';
import TagStyles from "./style.module.css"
export class TagPreview extends React.Component {
render() {
return React.createElement('ul', {
className: TagStyles.tags,
},
this.props.value.map(function(value, index) {
return React.createElement('li', {
className: TagStyles.tag,
key: index
}, value)
})
)
};
}
export default TagPreview
Давайте добавим index.js файл в тот же каталог и экспортируем наши компоненты -
// src/components/tagWidget/index.js
export * from './TagControl';
export * from './TagPreview';
Замечательно, мы создали компоненты React для нашего пользовательского виджета. Давайте зарегистрируем это с помощью метода registerWidget в нашей NetlifyCMS.
Создайте новый файл cms/cms.js в каталоге src и добавьте следующий код для регистрации нашего настраиваемого виджета с именем tags -
// src/cms/cms.js
import CMS from 'netlify-cms-app';
import { TagControl, TagPreview } from '../components/tagWidget';
CMS.registerWidget('tags', TagControl, TagPreview);
Помните, мы добавили пакет npm под названием gatsby-plugin-netlify-cms для рендеринга наших страниц NetlifyCMS на основе React. Нам также нужно указать этому плагину, чтобы он отображал наш настраиваемый виджет на панели предварительного просмотра редактора, добавив в gatsby-config.js файл следующее:
plugins: [
.
.
{
resolve: `gatsby-plugin-netlify-cms`,
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
.
.
],
Давайте добавим наше настраиваемое поле виджета к нашему blog типу содержимого в /static/admin/config.yml файле -
fields:
.
.
.
- name: tags
label: Tags
widget: tags
separator: ","
required: false
Замечательно, давайте повторно запустим наш сервер разработки и проверим панель редактора CMS -
Наш виджет настраиваемого тега работает нормально, давайте добавим компонент предварительного просмотра в наш BlogPostTemplate. Мы также будем запрашивать теги с помощью Graphql, чтобы мы могли передать значение нашему компоненту TagPreview в шаблоне сообщения в блоге.
Откройте src/templates/blog-post.js и добавьте следующий код -
В строке 5: мы импортировали наш компонент TagPreview.
В строке 14: мы сохранили данные запрашиваемых тегов в переменной tags.
В строке 42: мы добавили компонент TagPreview и передали данные тегов в качестве свойств.
В строке 100: мы запрашивают теги с помощью graphql. Подробнее о запросах данных в Gatsby читайте в официальных документах.
Отлично, сохраним файл. Как только вы сохраните файл, вы столкнетесь со следующей ошибкой -
Это связано с тем, что мы определили необязательное поле tags в нашем запросе graphql, но оно еще не определено в сообщениях блога Markdown, т.е. Гэтсби не может определить тип его схемы. Давайте добавим тип схемы для нашего поля tags. Подробнее о Настройка схемы из Gatsby Docs.
Откройте gatsby-node.js и добавьте следующий код -
exports.createSchemaCustomization = ({ actions, schema }) => {
const { createTypes } = actions
const typeDefs = [
"type MarkdownRemark implements Node { frontmatter: Frontmatter }",
schema.buildObjectType({
name: "Frontmatter",
fields: {
tags: {
type: "[String!]",
resolve(source, args, context, info) {
const { tags } = source
if (source.tags == null || (Array.isArray(tags) && !tags.length)) {
return []
}
return tags
},
},
},
}),
]
createTypes(typeDefs)
}
Повторно запустите сервер разработки Gatsby и наслаждайтесь легким добавлением новых сообщений в блог с помощью NetlifyCMS.
Чтобы развернуть наш веб-сайт на Netlify, следуйте официальной документации, а также измените серверную часть в config.yml на -
backend: name: git-gateway branch: master
Заключение
В этой статье мы впервые узнали о JAMStack, Gatsby, Netlify CMS и о том, как мы можем легко интегрировать Netlify CMS с нашими веб-сайтами Gatsby для управления нашими данными / контентом через рабочий процесс Git. Вы можете найти код в моем репозитории GitHub ankitjain28may / netlify-cms-gatsby. Также вы можете зайти на сайт здесь https://netlify-cms-gatsby-2k20.netlify.app
Не стесняйтесь комментировать и спрашивать меня о чем угодно. Вы можете подписаться на меня в Twitter и Medium. Спасибо за прочтение! 👍
Совместное использование и управление повторно используемыми компонентами React с Bit
Используйте Bit » ( Github ) для совместного использования, документирования и управления повторно используемыми компонентами из разных проектов. Это отличный способ увеличить повторное использование кода, ускорить разработку и создавать масштабируемые приложения.
