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

Как построить реагировать и GATSBY-блог примерно за 10 минут

Emmanuel yusufu, как построить блог с реагированием и гидромассаженым управлением примерно в 10 минутах учреждений / фотография Genevieve Perron-Migneron на Unsplashdisclaimer: это было написано для GATSBY версии 1, версия 2 была только что выпущена и имеет некоторые изменения. Я буду работать над другим учебным пособием для этого .gatsby – это пылающий

Автор оригинала: FreeCodeCamp Community Member.

Эммануэль Юсуфу

GATSBY является пылающим быстрым статическим генератором сайта на основе REVENTJS.

А Статический генератор сайта (SSG) – это компромисс между жесткокодированным HTML Статический сайт и полноценные CMS (система управления контентом), как WordPress.

SSG можно использовать для генерации HTML-страниц для веб-сайтов, управляемых контентами (например, блогов). Все это требует, это данные для содержимого страницы и шаблон для заполнения контента.

Этот пост будет разделен на пять разделов:

  1. Начиная.
  2. Создание компонентов макета.
  3. Создание постов в блоге.
  4. Создание новых страниц из записей в блоге.
  5. Создайте список файлов Markdown нашего сайта на странице посадки.

Мы возьмем глубокое погружение в GATSBY и некоторые его функции, создав воображаемый статический блог, называемый Codestack. Макетка показана ниже. Пошли! ✌️.

1. Начало работы

Предпосылки

Во-первых, убедитесь, что у вас есть Node.js, установленные в вашей системе. Если нет, перейдите к nodejs.org И установите недавнюю версию для вашей операционной системы.

Кроме того, эта статья предполагает, что у вас понимает реагирование.

Установите CLI

GATSBY имеет инструмент командной строки, который обеспечивает полезные команды, такие как:

  • GATSBY новый : Для лесов нового проекта GATSBY.
  • GATSBY Развивается : Для запуска сервера веб-разработки с поддержкой горячей перезагрузки.
  • Гэтсби построить : Для строительства добычей производственной версии проекта.

Чтобы установить, введите следующее на свой терминал и нажмите Enter:

npm install --global gatsby-cli

Давайте создадим папку проекта Codestack-Blog и перемещаться по терминалу к нему.

gatsby new codestack-blog && cd $_

Если вы выполняете GATSBY Развивается На папке проекта сайт лесов должен выглядеть так:

Добавление плагинов

GATSBY имеет большой и Растущий набор плагинов. Они по существу, являются пакетами Node.js этот интерфейс с APIS GATSBY.

Они могут быть установлены через NPM (Manager Unode Package) на терминале, и, как правило, имеют три категории: Функциональный , Источник и трансформатор плагины.

Функциональные плагины

Эти плагины обеспечивают дополнительную функциональность на сайте GATSBY или в своей среде разработки. Для нашего приложения нам понадобится:

  • GATSBY-Plugin-React-Sharmet : Позволяет модифицировать голова Теги. Обратите внимание, что его уже установлено в нашем проекте по лесам.
  • GATSBY-Plugin-Catch-Links : Перехватывает локальные ссылки с Markdown и других неадреационных страниц, а также на стороне клиента Pushstate, чтобы избежать браузера, необходимого для обновления страницы.

Установите плагины или только второй плагин только.

npm install gatsby-plugin-react-helmet gatsby-plugin-catch-links

В любое время мы добавляем новый плагин, нам нужно обновить gatsby-config.js Файл с новым плагином, поэтому GATSBY распознает и использует его. Мы используем Back-Ticks Отказ

module.exports = {  siteMetadata: {    title: `Gatsby Default Starter`,  },  plugins: [    `gatsby-plugin-react-helmet`,    `gatsby-plugin-catch-links`,  ],}

Источник плагинов

Эти плагины «исходные» данные из удаленных или локальных мест в какие GATSBY звонит узлы Отказ Чтобы написать наши сообщения в Markdown на нашем локальном диске, нам нужно:

  • GATSBY-Source-filesystem : Источники данные о файлах из файловой системы вашего компьютера.
npm install gatsby-source-filesystem

Обновите gatsby-config.js файл:

module.exports = {  siteMetadata: {    title: `Gatsby Default Starter`,  },  plugins: [    `gatsby-plugin-react-helmet`,    `gatsby-plugin-catch-links`,    {      resolve: `gatsby-source-filesystem`,      options: {        path: `${__dirname}/src/pages`,        name: 'pages',      },    }  ],}

Что тут происходит? Варианты Объект может быть передан в плагин для получения дополнительной конфигурации. Мы проходим файловую систему путь (то есть, где будут расположены наши файлы Markdown), а затем Имя Для исходных файлов, так что GATSBY знает о наших исходных файлах и где применить плагины трансформатора.

Трансформаторные плагины

Эти плагины преобразуют необработанные данные от узлы в используемые форматы данных. Например, нам понадобится:

  • GATSBY-Transformer - замечание : Это преобразовывает сообщения в блоге, написанные в Markdown .md Файлы на локальном диске в HTML для рендеринга.
npm install gatsby-transformer-remark

Обновите gatsby-config.js файл снова.

module.exports = {  siteMetadata: {    title: `Gatsby Default Starter`,  },  plugins: [    `gatsby-plugin-react-helmet`,    `gatsby-plugin-catch-links`,    {      resolve: `gatsby-source-filesystem`,      options: {        path: `${__dirname}/src/pages`,        name: 'pages',      },    },    `gatsby-transformer-remark`,  ],}

2. Создание компонентов макета

GATSBY позволяет легко создавать «компоненты макета». Компоненты макета являются участками вашего сайта, который вы хотите поделиться на нескольких страницах. Для блога мы строим, это заголовок и боковые панели Отказ

Из корневой папки посмотрите на SRC/макеты Отказ Вы обнаружите index.js Файл, где мы определяем компоненты макета. index.csss Уже пришли с стилями.

После изучения index.js Файл, вы увидите, что два компонента уже созданы: Заголовок и TemplateWarapper Отказ В TemplateWarapper Мы обертываем содержимое нашего сайта с компонентами макета, которые мы хотим присутствовать на нескольких страницах.

Это сделано возможным благодаря Дети () реквизит. Он окажет все компоненты не раскладки нашего сайта, где он находится. Обратите внимание, что в отличие от React детей реквизиты, дети опоры, переданные к компонентам макета, представляют собой функцию и должны быть выполнены.

Прежде всего, создайте новую папку и файл CSS в SRC/Стили/Layout-Overide.css Отказ Добавить в список импорта в index.js файл. Нам нужно Импортировать его после index.csss переопределить некоторые существующие правила стиля.

import React from 'react'import PropTypes from 'prop-types'import Link from 'gatsby-link'import Helmet from 'react-helmet'
import './index.css'import "../styles/layout-overide.css";

Открыть Макет-переопределение.css и вставьте следующие правила стилей. Нет необходимости понимать их.

* {    background: #f5f5f5;    color: black;}html {    height: 100%;}
body {    height: 100%;    border: 5px solid #ffdb3a;}
h1 {    font-size: 1.5rem;    line-height: 0.5rem;}
p, div {    font-size: 16px;}

Обновите компонент заголовка.

const Header = () => (  

CodeStack

);

Также создайте Боковая панель составная часть.

const Sidebar = (props) => (
{props.title}. {props.description}
);

Мы желаем Боковая панель и оказал {дети ()} Компоненты ведут себя отзывчиво, как это:

Поскольку нет простого способа определить медиа-запросы в реакции, я нашел библиотеку под названием Реагистрационные медиа , Компонент CSS медиа запроса для реагирования. Установите его.

npm install --save react-media

Это обеспечивает IA> Компонент Это слушает матчи с помощью медиа-запроса CSS и отображает вещи на основе того, следует ли соответствовать запросу или нет.

Добавьте его в список импорта в нашем файле.

import Media from 'react-media'

Давайте раскладываем все в ( заголовок , боковая панель и дети () компоненты), как мы желаем в TemplateWarapper Отказ Сделайте следующие изменения (простите за бесстыдной вилкой моего имени):

const TemplateWrapper = ({ children }) => (  
{matches => matches ? (
{children()}
) : (
{children()}
) } );

Что происходит в этом монолитеном блоке кода? Реагистрационные среды используют Тройная операция Чтобы определить, что оказывать на основе maxwidth of 848px Отказ Когда экран соответствует ширине, только Заголовок и Дети () компоненты отображаются.

        {matches =>          matches ? (            ...stuff to render...          ) : (            ...stuff to render...          )        }      

Если вы заметили, мы также использовали Flexbox для размещения позиций Дети () и Боковая панель составные части.

Беги GATSBY Развивается На терминале и наш статический блог теперь должен выглядеть так:

3. Создание сообщений в блоге

Теперь давайте отправимся в создание фактических постов в блоге. GATSBY использует GraphQL для получения данных из одного или многих источников, таких как ваш локальный диск, API WordPress и так далее.

Лично мне нравится тот факт, что я могу создать статический блог и контент извлечения из API WordPress. У моего клиента есть доступ к редактору WordPress, где он создает посты, и я избегаю проблем со всеми хлопотами разработки сайта WordPress.

В этом посте мы загрузим данные из файлов Markdown, которые мы создадим на нашем локальном диске. GATSBY-Source-filesystem Плагин, который мы настроили ранее ожидает, что наш контент будет в SRC/страницы Итак, именно именно там мы поставим!

Типичная практика для постов в блоге – назвать папку нечто вроде типа MM-DD-YYYY. Вы можете назвать это, что вам нравится или просто поместите файл Markdown внутри /Страницы папка.

Давайте создадим папку SRC/страницы/12-22-2017-первое пост и поместите index.md внутри. Писать:

---path: "/hello-world"date: "2017-07-12T17:12:33.962Z"title: "My First Gatsby Post"---
Oooooh-weeee, my first blog post!
First post Ipsum is a major key to success. Congratulations, you played yourself. Surround yourself with angels. Celebrate success right, the only way, apple.  The key is to drink coconut, fresh coconut, trust me. Egg whites, turkey sausage, wheat toast, water. Of course they don't want us to eat our breakfast, so we are going to enjoy our breakfast. 

Блок, окруженный тиреми, называется Frontmatter Отказ Данные, которые мы указываем здесь, а также другие файлы Markdown, будут распознаны GATSBY-Transformer – замечание плагин.

Плагин преобразует метаданную часть Frontmatter для вашего файла Markdown на Frontmatter И часть контента (YIppeeee, мой первый блог!) до HTML.

Когда мы начинаем генерировать страницы блога напрямую от файлов Markdown в Раздел 4 (Следующий раздел), путь будет использоваться для указания пути URL-адреса для рендеринга файла. Например, файл Markdown выше будет отображен на Localhost: 8000/Hello-World Отказ

До этого, давайте создадим шаблон, который сделает любой файл Markdown в свой блог. Создать файл SRC/шаблоны/blog-post.js (Пожалуйста, создайте SRC/шаблоны папка).

import React from "react";import Helmet from "react-helmet";
export default function Template({  data }) {  const post = data.markdownRemark;   return (    

{post.frontmatter.title}

);}

Мы создали Шаблон Компонент для получения данные Объект, который придет из запроса GraphQL, мы собираемся написать.

Еще раз, запрос GraphQL необходим для получения данных в компонент. Результат запроса вводится GATSBY в компонент шаблона как данные и MarkDownremark Отказ

Мы найдем, что MarkDownremark Свойство содержит все детали файла Markdown.

Давайте сейчас на самом деле сделайте запрос. Это должно быть размещено ниже Шаблон составная часть:

export const pageQuery = graphql`  query BlogPostByPath($path: String!) {    markdownRemark(frontmatter: { path: { eq: $path } }) {      html      frontmatter {        date(formatString: "MMMM DD, YYYY")        path        title      }    }  }`;

Если вы не знакомы с graphql, я постараюсь сломать то, что здесь происходит. Чтобы узнать больше о graphql, рассмотрим этот Отличный ресурс Отказ

GraphQL – это просто идея Facebook о определенном типе сервера. Они написали спецификацию о таком просьбах, которые могут быть отправлены на этот сервер и как сервер должен ответить. API GraphQL лучше, чем отдых, потому что вы описываете точные данные, которые необходимо связать клиентские потребности, так что нет больше недостаточной или чрезмерной выборки данных.

Это означает, что вы должны создать свой собственный сервер GraphQL. К счастью для нас, GATSBYJS поставляется с собственным сервером GraphQL из коробки.

В коде выше, BlogpostbyPath Является ли базовый запрос, который приведет к возвращению почты в блоге. Это будет возвращено как данные для инъекции в Шаблон составная часть.

Мы проходим BlogpostbyPath $ путь Аргумент, чтобы вернуть сообщение в блоге, связанном с Путь, который мы просматриваем.

Кроме того, вспомнить MarkDownremark преобразовали наши файлы Markdown. Он будет рассматриваться как свойство, содержимое которого будет доступно через data.markdownRemark Отказ

Мы могли бы получить доступ к HTML через data.markdownremark.html Отказ Кроме того, Frontmatter Содержание, которое мы создали с блоком DAHES, могут быть доступны через data.markdownremark.title и т.п.

Весь blog-template.js должен выглядеть так:

import React from "react";import Helmet from "react-helmet";
export default function Template({  data }) {  const post = data.markdownRemark;   return (    

{post.frontmatter.title}

);}
export const pageQuery = graphql`  query BlogPostByPath($path: String!) {    markdownRemark(frontmatter: { path: { eq: $path } }) {      html      frontmatter {        date(formatString: "MMMM DD, YYYY")        path        title      }    }  }`;

С этой точки зрения:

  • У нас есть группа плагинов, установленных для выполнения некоторых утилит, а также загрузки файлов выключения диска и откидывания преобразования до HTML.
  • У нас есть одиночный, одинокий файл Markdown, который будет отображаться как пост блога.
  • У нас есть шаблон React для рендеринга сообщений блога в макете, а также на проводной график для запроса данных для записи блога и ввести шаблон реагирования с запрашиваемыми данными.

Сладкий!

4. Создание новых страниц из записей в блоге.

GATSBY предоставляет API узла, который предоставляет функциональность для создания динамических страниц из блога. Этот API выставлен в gatsby-node.js Файл в корневом каталоге вашего проекта. Этот файл может экспортировать несколько API узла, но мы заинтересованы в Createpages API.

Используйте следующий блок фрагмента кода AS Предоставляется в официальных документах ( Обратите внимание, что путь Blogposttemplate был установлен, чтобы отразить наши ):

const path = require('path');
exports.createPages = ({ boundActionCreators, graphql }) => {  const { createPage } = boundActionCreators;
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
return graphql(`{    allMarkdownRemark(      sort: { order: DESC, fields: [frontmatter___date] }      limit: 1000    ) {      edges {        node {          excerpt(pruneLength: 250)          html          id          frontmatter {            date            path            title          }        }      }    }  }`)    .then(result => {      if (result.errors) {        return Promise.reject(result.errors);      }
result.data.allMarkdownRemark.edges        .forEach(({ node }) => {          createPage({            path: node.frontmatter.path,            component: blogPostTemplate,            context: {} // additional data can be passed via context          });        });    });}

Проверьте, работает ли это. Я рекомендую закрыть окно Broswer, остановившись GATSBY Развивается Сервер от терминала, используя Ctrl C Отказ Сейчас беги Гэтсби снова развиваю и открыть http://localhost: 8000/Hello-World Отказ

Создайте другой файл SRC/Pages/24-12-2017-Learning-Grid/index.md

---path: "/another-one"date: "2017-07-12T17:12:33.962Z"title: "My Second Gatsby Post"---
In life there will be road blocks but we will over come it. Special cloth alert. Don't ever play yourself. The key to more success is to get a massage once a week, very important, major key, cloth talk.
// some css grid code 

Опять же, закройте окно браузера, остановите GATSBY Развивается сервер. Беги Гэтсби снова развиваю и открыть http://localhost: 8000/Другое- один Отказ Это показано:

Перейдите, если хотите и создадите свои собственные страницы. ✌.

5. Создайте список файлов Markdown нашего сайта на странице посадки.

Страница по делям по умолчанию, которая поставляется с сайтом GATSBY для лесов, находится в SRC/Pages/index.js Отказ Это где мы определим шаблон и сделать запрос, чтобы ввести его с данными для списка .md файлы. Сделай это:

import React from "react";import Link from "gatsby-link";import Helmet from "react-helmet";
import '../styles/blog-listing.css';
export default function Index({ data }) {  const { edges: posts } = data.allMarkdownRemark;  return (    
{posts .filter(post => post.node.frontmatter.title.length > 0) .map(({ node: post }) => { return (

{post.frontmatter.title}

{post.frontmatter.date}

{post.excerpt}

); })}
);}
export const pageQuery = graphql`  query IndexQuery {    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {      edges {        node {          excerpt(pruneLength: 250)          id          frontmatter {            title            date(formatString: "MMMM DD, YYYY")            path          }        }      }    }  }`;

Я доверяю вам ночи в этот момент и уже знаком с тем, что происходит. Обратите внимание, что мы написали Импорт Выше этого не существует. Теперь создайте файл /styles/blog-listing.css :

div.blog-post-preview {    border-bottom: 2px solid #e6e6e6;    padding-top: 1rem;    padding-bottom: 1rem;    margin-bottom: 1rem;}
h1 > * {    font-size: 1.2rem;    text-decoration-line: none;}
h2 {    font-size: 0.8rem !important;    font-weight: 100 !important;}

Перезапустите сервер, посетите страницу посадки, и вы должны увидеть список на работе:

Заключение

Мы подошли к концу этого урока. Спасибо за чтение до сих пор.

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

  • Функциональность поиска
  • Использование тегов для классификации сообщений блога
  • Развертывание Ваш сайт GATSBY

Вы можете захватить окончательный исходный код здесь Отказ Не стесняйтесь поддерживать меня ( devapparel.co ) и хорошо выглядеть в этом. Также комментировать или поделитесь этим постом. Спасибо за прочтение!

Я работаю на книге React с Оганес Эммануил Это было бы у вас хозяина реагировать, построение 30 небольших проектов за 30 дней. Если вы хотите остановиться в этом обновлении, присоединяйтесь к Список рассылки Отказ Спасибо!