From c50c1aa67516b09e1cc9707207c1a24396082483 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 23 Jan 2021 20:17:33 +0300 Subject: [PATCH] upd article --- ...контентом-для-сайта-gatsbyjs-с-помощью-netlifycms.md | 118 +++++++++--------- src/styles/global.scss | 12 ++ static/admin/config.yml | 2 +- 3 files changed, 72 insertions(+), 60 deletions(-) diff --git a/content/articles/2021-01-23_управление-контентом-для-сайта-gatsbyjs-с-помощью-netlifycms.md b/content/articles/2021-01-23_управление-контентом-для-сайта-gatsbyjs-с-помощью-netlifycms.md index aaea807..f0f0130 100644 --- a/content/articles/2021-01-23_управление-контентом-для-сайта-gatsbyjs-с-помощью-netlifycms.md +++ b/content/articles/2021-01-23_управление-контентом-для-сайта-gatsbyjs-с-помощью-netlifycms.md @@ -55,8 +55,8 @@ NetlifyCMS является полностью бесплатным и нахо Отмечу еще несколько преимуществ, которые содержит в себе CMS: -* **Удобный веб-интерфейс** - как говорилось ранее вы с легкостью сможете изменять контент вашего сайта, добавлять или удалять медиафайлы и т.д. Познакомиться с UI интерфейсом можно на [демо-сайте](https://cms-demo.netlify.com/). Вход в систему не требуется, достаточно нажать на кнопку `Login`. -* **Простая установка** - достаточно добавить несколько файлов `index.html` и `config.yml` в папке `/admin`, и установить npm пакет, но об этом позже. +* **Удобный веб-интерфейс** - как говорилось ранее вы с легкостью сможете изменять контент вашего сайта, добавлять или удалять медиафайлы и т.д. Познакомиться с UI интерфейсом можно на [демо-сайте](https://cms-demo.netlify.com/). Вход в систему не требуется, достаточно нажать на кнопку **Login**. +* **Простая установка** - достаточно добавить несколько файлов **index.html** и **config.yml** в папке **/admin**, и установить npm пакет, но об этом позже. * **Аутентефикация** - аутентефикация в систему происходит с помощью веб-токенов GitHub, GitLab, или Bitbucket и JSON. Также можно использовать [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) что даст возможность производить вход например через Google. * **Настраиваемые типы контента** - вы сможете указать неограниченное количество типов контента с помощью настраиваемых полей. * **Полностью расширяемый** - есть возможность расширить CMS под свои нужды, написать собственный плагин для редактора или создать виджет. @@ -75,16 +75,16 @@ GatsbyJS - это генератор статических сайтов, кот На этом этапе мы сделаем небольшую заготовку проекта. То есть добавим верстку для наших страниц и компонентов, подключим шрифты и стили. Также коснемся немного graphql запросов. -Итак, клонируем [hello-world-starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) репозиторий в созданную вами папку с любым названием. Он представляет из себя GatsbyJS сайт которое содержит в себе одну страницу, где выведено сообщение `Hello world!`. +Итак, клонируем [hello-world-starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) репозиторий в созданную вами папку с любым названием. Он представляет из себя GatsbyJS сайт которое содержит в себе одну страницу, где выведено сообщение **Hello world!**. ```bash mkdir gatsby-blog git clone https://github.com/gatsbyjs/gatsby-starter-hello-world . ``` -Сразу же удаляем папку `.git` чтобы убрать все коммиты. +Сразу же удаляем папку **.git** чтобы убрать все коммиты. -Описание каждого файла вы сможете посмотреть на странице этого репозитория в `README.md` файле. Отдельные файлы такие как `gatsby-node.js` или `gatsby-browser.js` будут объяснены по ходу создания этого сайта. Перейдем в `package.json` файл и рассмотрим скрипты запуска. +Описание каждого файла вы сможете посмотреть на странице этого репозитория в **README.md** файле. Отдельные файлы такие как **gatsby-node.js** или **gatsby-browser.js** будут объяснены по ходу создания этого сайта. Перейдем в **package.json** файл и рассмотрим скрипты запуска. * **build** - сборка приложения * **develop** - запуск сервера для разработки @@ -102,11 +102,11 @@ npm install npm run develop ``` -После переходим по адресу `http://localhost:8000/` где мы должны увидеть надпись `Hello world!`. +После переходим по адресу **http://localhost:8000/** где мы должны увидеть надпись **Hello world!**. ## Добавление страниц -Теперь добавим нужные нам страницы. Для начала создадим специальный компонет-шаблон где будут показываться наши основные страницы. Переходим в `./src` и создаем папки с файлом таким образом: `./src/components/Layout/Layout.jsx` +Теперь добавим нужные нам страницы. Для начала создадим специальный компонет-шаблон где будут показываться наши основные страницы. Переходим в **./src** и создаем папки с файлом таким образом: **./src/components/Layout/Layout.jsx** Создадим этот компонент: @@ -130,7 +130,7 @@ const Layout = ({ children }) => { export default Layout ``` -Теперь создадим страницы `Index` и `About`: +Теперь создадим страницы **Index** и **About**: ```jsx // ./src/pages/index.jsx @@ -180,13 +180,13 @@ const AboutPage = () => { export default AboutPage ``` -Как видим, получилась довольно простая разметка. Для перехода между страницами мы используем компонент `Link` от gatsby. Перейдите по адресу `http://localhost:8000` и вы увидите эту разметку. Пока что это выглядит не совсем хорошо, поэтому дальше мы добавим несколько стилей и еще один компонент Header. +Как видим, получилась довольно простая разметка. Для перехода между страницами мы используем компонент **Link** от gatsby. Перейдите по адресу **http://localhost:8000** и вы увидите эту разметку. Пока что это выглядит не совсем хорошо, поэтому дальше мы добавим несколько стилей и еще один компонент Header. ## О файле gatsby-config.js -Файл `gatsby-config.js` который находится в корне проекта, является очень важным и полезным файлом. Он определяет метаданные сайта, плагины и другую общую конфигурацию. При редактировании этого файла всегда необходимо перезапускать dev сервер для того чтобы применились новые настройки. +Файл **gatsby-config.js** который находится в корне проекта, является очень важным и полезным файлом. Он определяет метаданные сайта, плагины и другую общую конфигурацию. При редактировании этого файла всегда необходимо перезапускать dev сервер для того чтобы применились новые настройки. -Например мы можем определить поле `siteMetadata` в объекте конфигурации. Это позволит использовать вам повторяющиеся данные. Наример название сайта, список навигации по сайту, url сайта. Добавим поле `title` и `description` в `siteMetadata`: +Например мы можем определить поле **siteMetadata** в объекте конфигурации. Это позволит использовать вам повторяющиеся данные. Наример название сайта, список навигации по сайту, url сайта. Добавим поле **title** и **description** в **siteMetadata**: ```js // ./gatsby-config.js @@ -199,7 +199,7 @@ module.exports = { } ``` -Для доставки данных Gatsby использует graphql, вы можете перейти по адресу `http://localhost:8000/___graphql` и выполнить к примеру запрос: +Для доставки данных Gatsby использует graphql, вы можете перейти по адресу http://localhost:8000/___graphql и выполнить к примеру запрос: ```graphql { @@ -212,19 +212,19 @@ module.exports = { } ``` -Тогда вы получите объект, где увидите поля `title` и `description` со значениями. Как использовать graphql запросы в компонентах я покажу позже. +Тогда вы получите объект, где увидите поля **title** и **description** со значениями. Как использовать graphql запросы в компонентах я покажу позже. ## Добавление поддержки sass для стилей. **Sass** - это довольно удобный инструмент, который позволяет писать css код быстрее за счет нового синтаксиса. В данном сайте Sass будет даже излишним, и можно было бы обойтись обычным css, но мы все равно для примера добавим его, так как это очень просто сделать с Gatsby. -Установим несколько пакетов: `gatsby-plugin-sass` и `sass`. `gatsby-plugin-sass` позволит использовать нам `sass/scss` файлы на нашем сайте, а пакет `sass` - это сама реализация Sass. +Установим несколько пакетов: **gatsby-plugin-sass** и **sass**. **gatsby-plugin-sass** позволит использовать нам **sass/scss** файлы на нашем сайте, а пакет **sass** - это сама реализация Sass. ```bash npm install sass gatsby-plugin-sass ``` -Это еще не всё, необходимо добавить этот плагин добавить в конфигурационный файл `gatsby-config.js` в массив с `plugins`: +Это еще не всё, необходимо добавить этот плагин добавить в конфигурационный файл **gatsby-config.js** в массив с **plugins**: ```js // ./gatsby-config.js @@ -234,7 +234,7 @@ module.exports = { } ``` -Теперь попробуем добавить несколько стилей на страницу. Создаем папку `styles` в папке `src` и файл `global.scss` где будут лежать наши глобальные стили: +Теперь попробуем добавить несколько стилей на страницу. Создаем папку **styles** в папке **src** и файл **global.scss** где будут лежать наши глобальные стили: ```scss // ./src/styles/global.scss @@ -318,19 +318,19 @@ main { } ``` -Теперь нужно подключить этот файл к сайту. Сделать это можно изменив файл `gatsby-browser.js`. Создаем его в корне проекта и просто импортируем туда эти стили. После этого стили должны примениться к сайту. +Теперь нужно подключить этот файл к сайту. Сделать это можно изменив файл **gatsby-browser.js**. Создаем его в корне проекта и просто импортируем туда эти стили. После этого стили должны примениться к сайту. ```js import './src/styles/global.scss' ``` -Файл `gatsby-browser.js` позволяет реагировать на действия в браузере и если нужно, оборачивать страницы другими компонентами. Как раз этот файл и может быть использован для определения глобальных стилей. Более подробно о том как использовать этот файл можно узнать в [документации](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/). +Файл **gatsby-browser.js** позволяет реагировать на действия в браузере и если нужно, оборачивать страницы другими компонентами. Как раз этот файл и может быть использован для определения глобальных стилей. Более подробно о том как использовать этот файл можно узнать в [документации](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/). ## Подключение шрифтов -Для того чтобы подключить шрифты к сайту, их необходимо для начала скачать. Возьмем бесплатный шрифт `Inter`. Прейдем на [этот](https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin) сайт и отметим галочкой шрифт 500, 600 и 700. Снизу добавим префикс к папке со значением `../../static/fonts/`. Копируем сгенерированный код для подключения, скачиваем шрифты по кнопке снизу и перекидываем шрифты в папку `./static/fonts`. Папку `fonts` нужно создать соответственно. +Для того чтобы подключить шрифты к сайту, их необходимо для начала скачать. Возьмем бесплатный шрифт **Inter**. Прейдем на [этот](https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin) сайт и отметим галочкой шрифт 500, 600 и 700. Снизу добавим префикс к папке со значением **../../static/fonts/**. Копируем сгенерированный код для подключения, скачиваем шрифты по кнопке снизу и перекидываем шрифты в папку **./static/fonts**. Папку **fonts** нужно создать соответственно. -Далее создадим файл `fonts.scss` в папке `styles` и кинем туда наш сгенерированный код для подключения шрифтов. +Далее создадим файл **fonts.scss** в папке **styles** и кинем туда наш сгенерированный код для подключения шрифтов. ```scss /* ./src/styles/fonts.scss */ @@ -376,19 +376,19 @@ import './src/styles/global.scss' } ``` -Теперь переходим в файл `global.scss`, подключаем файл `fonts.scss` и меняем `font-family` в `body` на `Inter`. +Теперь переходим в файл **global.scss**, подключаем файл **fonts.scss** и меняем **font-family** в **body** на **Inter**. -Чтобы подключить файл `fonts.scss` в `global.scss` нужно использовать `@import` в самом начале файла: +Чтобы подключить файл **fonts.scss** в **global.scss** нужно использовать **@import** в самом начале файла: ```scss @import './fonts.scss'; ``` -Теперь шрифт `Inter` подключен и должен быть виден на сайте. +Теперь шрифт **Inter** подключен и должен быть виден на сайте. ## Компонент Header для навигации -Далее для разнообразия добавим компонент `Header` для навигации. Создаем путь `./src/components/Header/Header.jsx` и напишем сам компонент: +Далее для разнообразия добавим компонент **Header** для навигации. Создаем путь **./src/components/Header/Header.jsx** и напишем сам компонент: ```jsx // ./src/components/Header/Header.jsx @@ -422,7 +422,7 @@ const Header = () => { export default Header ``` -Создадим стили этого компонента в файле `Header.scss` +Создадим стили этого компонента в файле **Header.scss** ```scss // ./src/components/Header/Header.scss @@ -456,13 +456,13 @@ export default Header } ``` -Подключаем стили в глобальный файл `global.scss` через импорт: +Подключаем стили в глобальный файл **global.scss** через импорт: ```scss @import '../components/Header/Header.scss'; ``` -Не забываем еще включить этот компонент в файл `Layout.jsx`: +Не забываем еще включить этот компонент в файл **Layout.jsx**: ```jsx // ./src/components/Layout/Layout.jsx @@ -488,7 +488,7 @@ export default Layout ## Использование React Hooks для выполнения запроса GraphQL -Попробуем в комоненте Header в тэге параграфа вывести название нашего сайта, которое было написано в конфигурационном файле. Для этого создадим папку `hooks` в папке `src` и файл `useSiteMetadataQuery.js`. Мы будем использовать функцию `useStaticQuery` от Gatsby которая позволяет использовать React Hook для выполнения запросов graphql во время сборки сайта. +Попробуем в комоненте Header в тэге параграфа вывести название нашего сайта, которое было написано в конфигурационном файле. Для этого создадим папку **hooks** в папке **src** и файл **useSiteMetadataQuery.js**. Мы будем использовать функцию **useStaticQuery** от Gatsby которая позволяет использовать React Hook для выполнения запросов graphql во время сборки сайта. ```js // ./src/hooks/useSiteMetadataQuery.js @@ -515,7 +515,7 @@ export { useSiteMetadataQuery } Как видно, для того чтобы выполнить запрос и вытащить данные из graphql, мо должны импользовать [тэг-функцию](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) graphql. Gatsby обрабатывает этот тэг своим способом. Подробнее можно узнать в [документации](https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/). -Теперь мы можем легко использовать этот `hook`. Перейдем в Header компонент и изменим его вот так: +Теперь мы можем легко использовать этот **hook**. Перейдем в Header компонент и изменим его вот так: ```jsx // ./src/components/Header/Header.jsx @@ -552,17 +552,17 @@ const Header = () => { export default Header ``` -Используя ES6 [деструктуризацию объекта](https://learn.javascript.ru/destructuring) мы вытаскиваем данные и подставляем их куда хотим. В нашем случае мы вытащили поле `title` и подставили значение между тэгами параграфа. +Используя ES6 [деструктуризацию объекта](https://learn.javascript.ru/destructuring) мы вытаскиваем данные и подставляем их куда хотим. В нашем случае мы вытащили поле **title** и подставили значение между тэгами параграфа. ## Добавление SEO компонента -Рассмотрим как добавлять различные seo мета-тэги в заголовок html документа. Для этого установим пакет `react-helmet` который позволит управлять нам этим. +Рассмотрим как добавлять различные seo мета-тэги в заголовок html документа. Для этого установим пакет **react-helmet** который позволит управлять нам этим. ```bash npm install react-helmet ``` -Теперь создадим компонент с названием `SEO` где будет хранится наш шаблон для станиц: +Теперь создадим компонент с названием **SEO** где будет хранится наш шаблон для станиц: ```jsx // ./src/components/SEO/SEO.jsx @@ -597,7 +597,7 @@ SEO.propTypes = { } ``` -Теперь компонент SEO содержит несколько мета-тэгов, по необходимости вы можете добавить и свои в будущем. Пакет `prop-types` используется для получения нужных типов когда мы передаем значение в `props`. Его тоже нужно установить: `npm install prop-types` +Теперь компонент SEO содержит несколько мета-тэгов, по необходимости вы можете добавить и свои в будущем. Пакет **prop-types** используется для получения нужных типов когда мы передаем значение в **props**. Его тоже нужно установить: **npm install prop-types** Далее осталось вставить этот компонент на все страницы вот таким образом: @@ -643,9 +643,9 @@ export default IndexPage npm install gatsby-plugin-netlify-cms netlify-cms-app ``` -После добавляем плагин `gatsby-plugin-netlify-cms` в конфигурационный файл `gatsby-config.js` в массив `plugins`. Этот плагин автоматически гененирует файл `admin/index.html` для NetlifyCMS. +После добавляем плагин **gatsby-plugin-netlify-cms** в конфигурационный файл **gatsby-config.js** в массив **plugins**. Этот плагин автоматически гененирует файл **admin/index.html** для NetlifyCMS. -Также еще создаем файл с папкой `./static/admin/config.yml` и прописываем конфигурацию для CMS. Конфигурация создается в YML синтаксисе. +Также еще создаем файл с папкой **./static/admin/config.yml** и прописываем конфигурацию для CMS. Конфигурация создается в YML синтаксисе. ```yml backend: @@ -674,14 +674,14 @@ collections: Рассмотрим важные опции для конфигурации: -* **backend** - эта опция определяет, где будет храниться ваш контент. В нашем случае сайт с контентом хранить будем на GitHub указав `name`, `repo` и `branch` предварительно создав репозиторий. [Подробнее](https://www.netlifycms.org/docs/backends-overview/) +* **backend** - эта опция определяет, где будет храниться ваш контент. В нашем случае сайт с контентом хранить будем на GitHub указав **name**, **repo** и **branch** предварительно создав репозиторий. [Подробнее](https://www.netlifycms.org/docs/backends-overview/) * **media_folder** - этот параметр указывает путь к папке, в которой должны быть сохранены загруженные файлы, относительно репозитория. -* **public_folder** - параметр указывает путь к папке, в которой будут доступны файлы, загруженные медиатекой, относительно созданного сайта. Для полей с виджетами `файл` или `изображение`, значение поля создается путем добавления этого пути к выбранному файлу. +* **public_folder** - параметр указывает путь к папке, в которой будут доступны файлы, загруженные медиатекой, относительно созданного сайта. Для полей с виджетами **файл** или **изображение**, значение поля создается путем добавления этого пути к выбранному файлу. * **collections** - данный параметр определяет какие типы контента и поля редактора в UI генерируют файлы и контент в вашем репозитории. [Подробнее об этом параметре](https://www.netlifycms.org/docs/configuration-options/#collections) -Как видим, в нашей конфигурации ничего сложного нет, мы создали только одну коллекцию `articles` и определили несколько полей со встроенными виджетами. Виджеты `widget` определяют тип данных и интерфейс для полей ввода. +Как видим, в нашей конфигурации ничего сложного нет, мы создали только одну коллекцию **articles** и определили несколько полей со встроенными виджетами. Виджеты **widget** определяют тип данных и интерфейс для полей ввода. -Так же мы указали опцию `folder`, где будут хранится наши статьи в формате `.md`. Поле `Template key` понадобится нам для того, чтобы в будущем получить эти статьи через GraphQL запрос. +Так же мы указали опцию **folder**, где будут хранится наши статьи в формате **.md**. Поле **Template key** понадобится нам для того, чтобы в будущем получить эти статьи через GraphQL запрос. ## Деплой сайта на хостинг Netlify @@ -689,7 +689,7 @@ collections: Для того чтобы развернуть сайт на Netlify, для начала необходимо загрузить в этот репозиторий наш сайт с CMS: -```text +```bash git init git add . git commit -m "site" @@ -698,32 +698,32 @@ git remote add origin https://github.com/username/repo-name.git git push -u origin main ``` -Далее переходим на сам сайт [Netlify](https://www.netlify.com/) и регистрируемся. После нажимаем на кнопку `New site from Git`, выбираем Git провайдера (GitHub) и далее выбираем наш репозиторий с сайтом. Вконце нажимем `Deploy site`. Далее ждем когда Netlify установит все необходимые пакеты и соберет сайт. После сборки вы должны увидеть свой сайт. +Далее переходим на сам сайт [Netlify](https://www.netlify.com/) и регистрируемся. После нажимаем на кнопку **New site from Gi**`, выбираем Git провайдера (GitHub) и далее выбираем наш репозиторий с сайтом. Вконце нажимем **Deploy site**. Далее ждем когда Netlify установит все необходимые пакеты и соберет сайт. После сборки вы должны увидеть свой сайт. ## Настройка OAuth на Github Чтобы убедиться, что Netlify CMS имеет доступ к вашему репозиторию GitHub, вам необходимо настроить приложение OAuth на GitHub. -* Переходим [сюда](https://github.com/settings/developers) и создаем новое приложение нажав на кнопку `New OAuth App` +* Переходим [сюда](https://github.com/settings/developers) и создаем новое приложение нажав на кнопку **New OAuth App** * Далее заполняем поля: - * `Application name` - вводим имя приложения. - * `Homepage URL` - вводим ссылку на наш сайт `.netlify.app` - * `Authorization callback URL` - вводим ссылку: `https://api.netlify.com/auth/done` + * **Application name** - вводим имя приложения. + * **Homepage URL** - вводим ссылку на наш сайт **.netlify.app** + * **Authorization callback URL** - вводим ссылку: **https://api.netlify.com/auth/done** -После создания приложения у вас должны появится два ключа: `Client ID` и `Client Secret`. `Client secret` вы должны сгенерировать нажав на кнопку `Generate new client secret`. Эти ключи нужно добавить на ваш сайт Netlify. +После создания приложения у вас должны появится два ключа: **Client ID** и **Client Secre**. **Client secret** вы должны сгенерировать нажав на кнопку **Generate new client secret**. Эти ключи нужно добавить на ваш сайт Netlify. * На сайте Netlify переходим по пути **Site settings > Access control > OAuth** * В разделе **Authentication Providers** выбираем **Install Provider**. * Выбираем GitHub в качестве провайдера и вставляем наши ключи. -Теперь когда всё это сделано, у вас есть возможность перейти в CMS. Достаточно в конце URL дописать `/admin/`. После перехода в CMS создадим три статьи. В качестве описания и содержания вставим любой текст, для обложки найдем любую картинку. +Теперь когда всё это сделано, у вас есть возможность перейти в CMS. Достаточно в конце URL дописать **/admin/**. После перехода в CMS создадим три статьи. В качестве описания и содержания вставим любой текст, для обложки найдем любую картинку. ![демонстрация-админ-панели](/assets/ueqolge.png) ## Вывод статей на главную страницу -Выведем список стайтей на нашу главную страницу. Переходим в редактор кода и в териминал прописываем `git pull origin main`. После этого вы должны были получить созданные нами ранее статьи, конкретно `.md` файлы в папке `content` и картинки в папке `static/assets`. +Выведем список стайтей на нашу главную страницу. Переходим в редактор кода и в териминал прописываем **git pull origin main**. После этого вы должны были получить созданные нами ранее статьи, конкретно **.md** файлы в папке **content** и картинки в папке **static/assets**. Устанавливаем следующие пакеты: @@ -796,9 +796,9 @@ module.exports = { } ``` -То мы получим всё, что находится в папке `content`. +То мы получим всё, что находится в папке **content**. -Изменим `index.jsx` таким образом: +Изменим **index.jsx** таким образом: ```jsx // ./src/pages/index.jsx @@ -853,13 +853,13 @@ export const query = graphql` export default IndexPage ``` -С помощью тэга graphql мы делаем запрос для получения статей. Также указываем еще и `templateKey` в качестве параметра чтобы получить именно статьи. Далее мы просто получаем эти статьи в аргументе страницы `IndexPage` и поставляем нужные значения. +С помощью тэга graphql мы делаем запрос для получения статей. Также указываем еще и **templateKey** в качестве параметра чтобы получить именно статьи. Далее мы просто получаем эти статьи в аргументе страницы **IndexPage** и поставляем нужные значения. ![Вывод-всех-статей-на-страницу](/assets/yvvs281.png) ## Создание динамической страницы -Теперь наша задача заключается в том, чтобы взять `md` файлы из папки `content` и на каждый файл создать отдельную страницу, разумеется в этом нам поможет Gatsby. Создадим шаблон для динамической страницы создав файл `./src/templates/article.jsx`: +Теперь наша задача заключается в том, чтобы взять **md** файлы из папки **content** и на каждый файл создать отдельную страницу, разумеется в этом нам поможет Gatsby. Создадим шаблон для динамической страницы создав файл **./src/templates/article.jsx**: ```jsx // ./src/templates/article.jsx @@ -914,9 +914,9 @@ export const query = graphql` export default articleTemplate ``` -Здесь мы делаем похожий принцип. Но чтобы получить нужную статью по которой мы кликнули, мы должны в качестве переменной в graphql запрос передать значение `$slug`. Далее просто подставляем значения. +Здесь мы делаем похожий принцип. Но чтобы получить нужную статью по которой мы кликнули, мы должны в качестве переменной в graphql запрос передать значение **$slug**. Далее просто подставляем значения. -Далее создаем файл в корне проекта с названием `gatsby-node.js`. Код в этом файле будет запускаться только один раз в процессе создания сайта. Как раз он нам и пригодится чтобы создать страницы. [Подробнее о Gatsby Node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/). +Далее создаем файл в корне проекта с названием **gatsby-node.js**. Код в этом файле будет запускаться только один раз в процессе создания сайта. Как раз он нам и пригодится чтобы создать страницы. [Подробнее о Gatsby Node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/). ```js // ./gatsby-node.js @@ -965,13 +965,13 @@ exports.createPages = async ({ actions, graphql }) => { } ``` -Здесь тоже всё просто. Сначала получаем абсолютный путь до нашего шаблона `src/templates/article.jsx`. Далее выполняем запрос на получение всех существующих "узлов". Отфилтровываем массив для получения только статей и далее через функцию forEach создаем страницу с помощью [createPage](https://www.gatsbyjs.com/docs/reference/config-files/actions/#createPage) где: +Здесь тоже всё просто. Сначала получаем абсолютный путь до нашего шаблона **src/templates/article.jsx**. Далее выполняем запрос на получение всех существующих "узлов". Отфилтровываем массив для получения только статей и далее через функцию forEach создаем страницу с помощью [createPage](https://www.gatsbyjs.com/docs/reference/config-files/actions/#createPage) где: * **path** - валидный URL. * **component** - абсолютный путь к компоненту для этой страницы -* **context** - данные контекста для этой страницы. Передается как реквизит в компонент `this.props.pageContext`, а также в запрос graphql как аргументы graphql. +* **context** - данные контекста для этой страницы. Передается как реквизит в компонент **this.props.pageContext**, а также в запрос graphql как аргументы graphql. -Теперь осталось перезапустить сервер и протестировать сайт. Если по какой то причине контент не обновляется или возникают другие проблемы, попробуйте прописать команду `gatsby clean` в терминал. +Теперь осталось перезапустить сервер и протестировать сайт. Если по какой то причине контент не обновляется или возникают другие проблемы, попробуйте прописать команду **gatsby clean** в терминал. Для того чтобы запустить сайт в финальной сборке, достаточно написать: @@ -996,8 +996,8 @@ git push origin main ![netlify-identity](/assets/wyoedkj.png) -Затем перейти по пути **Site settings > Identity > Services > Git Gateway** и выбираем **Enable Git Gateway**. Далее в файле `config.yml` меняем поле `backend` с `github` на `git-gateway`. И делаем push в репозиторий. -После очередной сборки сайта, вы можете перейди в админ-панель и нажать на кнопку `Login with Netlify Identity`. Далее вы сможете создать нового пользователя и войти в админ-панель. +Затем перейти по пути **Site settings > Identity > Services > Git Gateway** и выбираем **Enable Git Gateway**. Далее в файле **config.yml** меняем поле **backend** с **github** на **git-gateway**. И делаем push в репозиторий. +После очередной сборки сайта, вы можете перейди в админ-панель и нажать на кнопку **Login with Netlify Identity**. Далее вы сможете создать нового пользователя и войти в админ-панель. ![netlify-identity-signup](/assets/td2wlx2.png) diff --git a/src/styles/global.scss b/src/styles/global.scss index 2a73c64..b5dcffb 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -195,11 +195,23 @@ article .gt-container { } } + .gatsby-highlight pre[class*="language-scss"]:before { + content: "scss"; + background: #e73eaf; + color: $white-clr; + } + .gatsby-highlight pre[class*="language-js"]:before { content: "js"; background: rgb(247, 223, 30); } + .gatsby-highlight pre[class*="language-jsx"]:before { + content: "jsx"; + background: #0a91eb; + color: $white-clr; + } + .gatsby-highlight pre[class*="language-ts"]:before { content: "ts"; background: #007acc; diff --git a/static/admin/config.yml b/static/admin/config.yml index f32247d..8ecab2a 100644 --- a/static/admin/config.yml +++ b/static/admin/config.yml @@ -11,7 +11,7 @@ collections: create: true slug: "{{year}}-{{month}}-{{day}}_{{slug}}" fields: - - {label: "Template Key", name: "templateKey", wisdget: "hidden", default: "article"} + - {label: "Template Key", name: "templateKey", widget: "hidden", default: "article"} - {label: "Slug", name: "slug", widget: "string"} - {label: "Keywords", name: "keywords", widget: "list"} - {label: "Время чтения", name: "time", widget: "string"}