Я только что создал плагин для Gridsome, исходный плагин для извлечения сообщений с использованием API dev.to.
Вы можете найти плагин в реестре NPM здесь

Что такое Гридсом?

Хорошо, подожди секунду! Что такое Гридсом?

Рад, что вы спросили!

Gridsome — это генератор статических сайтов, похожий на Gatsby (но все еще новый, поэтому не такой многофункциональный) для фреймворка Vue. Gridsome позволяет разработчикам легко создавать современные веб-сайты JAMstack и PWA, которые по умолчанию работают быстро.

Почему Гридсом?

Если вы собираетесь использовать gridsome, по умолчанию у вас есть следующее:

  • Локальная разработка с горячей перезагрузкой — следите за изменениями кода в режиме реального времени.
  • Плагины источников данных — подключайтесь к любым популярным Headless CMS, API или Markdown-файлам.
  • Маршрутизация страниц на основе файлов — быстро создавайте и управляйте маршрутами с помощью файлов.
  • Централизованное управление данными. Перенесите данные на локальный унифицированный уровень данных GraphQL.
  • Vue.js для внешнего интерфейса — легкая и доступная среда для внешнего интерфейса.
  • Автоматическая оптимизация кода. Готовые функции разделения кода и оптимизации ресурсов.
  • Создание статических файлов — безопасное развертывание на любом CDN или статическом веб-узле.

Для получения более подробной информации о Gridsome, пожалуйста, прочитайте документы.

Как использовать этот плагин?

Установка

Чтобы установить этот плагин, вам просто нужно добавить его в качестве зависимости от вашего проекта gridsome. Вы можете сделать это, выполнив следующую команду на своем терминале, используя yarn.

yarn add @perlatsp/gridsome-source-devto

или если вы предпочитаете npm

npm install @perlatsp/gridsome-source-devto

Когда установка завершится, вы должны быть готовы к следующему шагу — настройке плагина.

Конфигурация

Прежде чем мы продолжим настройку плагина, нам нужно сначала получить ключ API с https://dev.to. Для этого нам нужно перейти на сайт dev.to, перейти в аккаунт-›настройки, после чего вы должны увидеть поле ввода, добавить описание токена и нажать кнопку Generate Token. После этого может потребоваться некоторое время, чтобы токен был сгенерирован для вас (около 200ms в зависимости от вашего интернет-соединения 🤪).

Конфигурационный файл

Когда вы получите свой токен, мы можем перейти к следующему шагу. Добавление конфигурации в файл gridsome.config.js. В этом файле находится большинство конфигураций gridsome. Откройте файл конфигурации и добавьте следующее в массив plugins. Как следующее

...other gridsome plugins
   {
      use: '@perlatsp/gridsome-source-devto',
      options: {
        typeName: 'Article',
        username:'DEVTO_USERNAME',
        apiKey: process.env.DEVTO_API_KEY,
        route: '/:slug',
      }
    }
... rest of config file

Здесь мы сказали gridsome использовать наш плагин use: '@perlatsp/gridsome-source-devto' с объектом options. Объект параметров довольно прост, мы назначаем typeName: 'Article', это имя нашей «модели поста», которое мы будем использовать позже для запроса постов.

У нас есть username:'DEVTO_USERNAME' — имя пользователя автора, которое мы хотим получить из API.

ENV-файл

Переменная ключа API, apiKey: process.env.DEVTO_API_KEY, которая из соображений безопасности получает значение из файла .env, поэтому не используйте ее в нашей кодовой базе. Нам нужно создать файл .env в корневом каталоге нашего проекта и добавить следующий файл DEVTO_API_KEY=THE_API_KEY_FROM_DEVTO_SITE. И последняя настройка, которую нам нужно сделать, это маршрут. это будет тип отображения URL-адреса отдельного сообщения. Подробнее о gridsome маршрутизации здесь.

Теперь мы готовы перейти к следующему этапу отображения сообщений.

Показать сообщения

Чтобы отобразить сообщения, нам нужно перейти к файлу Index.vue и изменить компонент (если компонент не существует, создайте его), чтобы отразить следующее:

<page-query>
query Home {
    allArticle {
      edges {
        node {
          id
          title
          published_at
          path
          description
          tag_list
          canonical_url
          cover_image
        }
      }
    }
  }
</page-query>

Это запрос GraphQL.

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

Мы регистрируем объекты с именем allArticle (все + typeName, которые мы зарегистрировали в нашем файле конфигурации).

Нет необходимости получать все данные из наших статей, поэтому мы запрашиваем некоторые узлы (поля), такие как id, title, description и т. д.

Хорошо, у нас есть циклический запрос. что теперь? Это оно?

Конечно, нет! Теперь нам нужно как-то отобразить имеющиеся у нас данные. для этого прокрутите вверх до компонента. и измените его, чтобы отразить следующее:

html
<template>
<Layout>
<h1> Gridsome source plugin for
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" height="30"
width="30"></h1>
<div v-for="{ node } in $page.allArticle.edges" :key="node.id">
<h2> {{node.title}}</h2>
{{node.description}}
<div>
<g-link :to="node.path" class="single-post-link">Read More</g-link>
</div>
</div>
</Layout>
</template>

И вуаля теперь мы можем видеть наши сообщения! Откройте терминал и запустите yarn develop, чтобы скомпилировать и создать сервер разработки. ваш проект должен быть доступен на http://localhost:8080.

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

Лично мне не нравится, как это выглядит визуально. Давайте добавим несколько стилей.

Чуть лучше 😄 с простыми картами. Теперь мы закончили проект и можем запустить yarn build для создания всех статических файлов и готовы к развертыванию! ⛴

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