Я только что создал плагин для 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