mirror of
https://github.com/sergeyyarkov/devthread.ru.git
synced 2026-10-11 02:09:04 +03:00
upd article
This commit is contained in:
parent
c987e1bd77
commit
c50c1aa675
@ -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 создадим три статьи. В качестве описания и содержания вставим любой текст, для обложки найдем любую картинку.
|
||||
|
||||
|
||||
|
||||
## Вывод статей на главную страницу
|
||||
|
||||
Выведем список стайтей на нашу главную страницу. Переходим в редактор кода и в териминал прописываем `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** и поставляем нужные значения.
|
||||
|
||||
|
||||
|
||||
## Создание динамической страницы
|
||||
|
||||
Теперь наша задача заключается в том, чтобы взять `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
|
||||
|
||||
|
||||
|
||||
Затем перейти по пути **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**. Далее вы сможете создать нового пользователя и войти в админ-панель.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user