npm 包 gatsby-source-medium-users 使用教程

前言

在前端开发中,许多项目需要与数据源进行交互。而在使用 Gatsby 框架开发静态网站时,我们经常会遇到需要将 Medium 博客的文章或者作者信息展示在网站上的需求。而 gatsby-source-medium-users 是一个可以将 Medium 上指定用户的文章信息获取后,转换成 GraphQL 资源供 Gatsby 中使用的 NPM 包。本文将介绍 gatsby-source-medium-users 包的使用流程,适用于想在 Gatsby 中实现展示 Medium 用户的博客或者作者信息的开发者。

安装

在终端中,运行以下命令以安装 gatsby-source-medium-users:

--- ------- ------ --------------------------

使用

  1. 在博客的阅读页面中获取 Medium 用户的链接,例如 https://medium.com/@medium

  2. 在 Gatsby 项目的 gatsby-config.js 文件中进行配置:

-------------- - -
  -------- -
    -
      -------- -----------------------------
      -------- -
        --------- ---------
      --
    --
  --
-

username 需要填写上步骤中获取的 Medium 用户名。

  1. 在 Gatsby 项目中执行以下命令编译并启动服务:
------ -------

在浏览器中输入 http://localhost:8000/\_\_graphql,可以看到类似于 GraphQL Playground 的界面。

  1. 在 GraphQL Playground 中输入以下代码获取 Medium 用户的文章信息:
-
  --------------------- - -------- - --- - --- --------- - - -- -
    ----- -
      ---- -
        --
        -----
        ----------------------- ----- ---------
        -------- -
          ------------ -
            -------
          -
          ---- -
            ----
          -
        -
      -
    -
  -
-

user-id 需要填写 Medium 用户的 ID,可以在 Medium URL 中获取。

示例代码

------ ----- ---- -------
------ - ------- - ---- --------

------ ------- -------- ------ ---- -- -
  ------ -
    -----
      ---------- ----------
      -------------------------------- ---- -- -- -
        ---- --------------
          ---------------------
          -----------------------
          ----
            -------------------------------------------------------------------------------------------
            ------
          --
          ----------------------------- -- -
            ----- --------------------------------
          ---
        ------
      ---
    ------
  -
-

------ ----- ----- - --------
  ----- -
    --------------------- - -------- - --- - --- --------- - - -- -
      ----- -
        ---- -
          --
          -----
          ----------------------- ----- ---------
          -------- -
            ------------ -
              -------
            -
            ---- -
              ----
            -
          -
        -
      -
    -
  -
-

结语

通过使用 gatsby-source-medium-users,我们可以方便的在 Gatsby 中获取 Medium 用户的文章信息。在实际开发中,可以根据用户需求进行自定义配置,例如获取指定标签下的文章信息等等。希望本文对使用 gatsby-source-medium-users 进行开发的开发者有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671a330d09270238223f6


猜你喜欢

  • npm 包 wpilib-riolog 使用教程

    在前端开发中,使用一些好用的 npm 包可以大大提高开发效率,其中一个常用的包是 wpilib-riolog。这个包可以帮助我们进行机器人日志的可视化,方便开发者进行调试和故障排除。

    4 年前
  • npm 包 polkadot-middleware 使用教程

    Polkadot-middleware 是一个开源的 npm 包,提供了 Polkadot 区块链的中间件功能,可以用于快速开发 Polkadot 区块链的前端应用程序。

    4 年前
  • npm 包 postcss-modules-extend-rule 使用教程

    前言 在现代 web 应用的开发中,前端工程师和开发者们经常会使用各种前沿的技术和工具来提高项目开发的效率、质量和性能。其中,CSS 是前端开发过程中最为重要和基础的一环,而 postcss-modu...

    4 年前
  • NPM 包 Dolphin-Server 使用教程

    引言 在前端开发中,有许多后端处理问题需要解决。Dolphin-Server 是一个在前端领域使用的,基于 NodeJS 的、模拟后端请求与响应的开发调试工具。Dolphin-Server 具有易于使...

    4 年前
  • Sakura-ORM-CLI 的使用教程

    前言 在前端开发中,我们经常需要使用框架或者库来提升开发效率。而在这些框架或者库中,基本都使用了 ORM(Object-relational mapping) 的概念,使得我们能够在代码中像操作对象一...

    4 年前
  • npm 包 snakelize 使用教程

    在前端开发中,经常需要处理 JSON 数据或者对象属性名称的格式。有时候需要将驼峰式或者帕斯卡式的属性名称转化为下划线或者连字符的格式。为了解决这个问题,我们可以使用 npm 包 snakelize。

    4 年前
  • npm 包 dolphin-vue 使用教程

    作为前端开发人员,我们每天都在使用各种工具和框架来支撑我们的开发工作,其中常常离不开的就是 npm 包。今天,我要介绍的是一个非常实用的 npm 包——dolphin-vue。

    4 年前
  • npm包free-mask-dialog使用教程

    简介 free-mask-dialog是一个npm包,可以用来创建带有遮罩层的对话框,支持自定义样式和内容,并且可以在多个页面上使用。下面将详细介绍free-mask-dialog的使用方法。

    4 年前
  • npm 包 interestjs 使用教程

    npm 包 interestjs 是一个用于计算各种利息和回报率的 JavaScript 库。它包含多种方法可以帮助计算金融数据。 安装 通过 npm 可以简单地安装 interestjs。

    4 年前
  • npm 包 jsdeflate 使用教程

    随着 web 应用的不断发展,前端开发的重要性越来越凸显出来。作为前端工程师,我们需要掌握各种各样的技术,以方便我们高效地完成工作。本文将介绍 npm 包 jsdeflate 的使用教程,以协助前端开...

    4 年前
  • npm 包 @cfn2/parser 使用教程

    前言 在现代 web 开发中,前端领域经常涉及到大量的数据处理和解析工作。而在这些工作中,CFN2(CloudFormation)JSON 模板的解析是一个非常必要的环节。

    4 年前
  • npm 包 jupiter-gravity 使用教程

    前言 在前端开发中,我们常常需要使用一些第三方库来提高我们的开发效率和代码质量。其中,npm 包 jupiter-gravity 是一款非常实用的工具库,它提供了一些常用的函数和组件,可以帮助我们更轻...

    4 年前
  • npm 包 testtry 使用教程

    什么是 npm 包 testtry npm 是前端领域中一个非常重要的工具,它可以方便地管理和安装项目中使用的各种依赖包。而 testtry 是一个 npm 包,是一个基于 Mocha 和 Chai ...

    4 年前
  • NPM包@schacker/hpack-cli使用教程

    在前端开发中,经常需要处理 HTTP/2 协议中的头部数据,而 HPACK 是一个用于对 HTTP/2 头进行编码的压缩算法。@schacker/hpack-cli 是一个可以解压缩 HPACK 头的...

    4 年前
  • npm 包 @jamsesso/fxsync 使用教程

    在前端开发过程中,我们经常需要使用各种第三方库和工具,其中 npm 是一款非常流行的 JavaScript 包管理器,通过安装和使用 npm 包,可以轻松地实现前端开发中许多重要的功能。

    4 年前
  • npm 包 babyfs-wxapp-runningtime 使用教程

    简介 babyfs-wxapp-runningtime 是一个基于微信小程序的运行时管理工具库,旨在提供更加精细、高效的小程序运行时管理方案。本文将向您详细介绍该 npm 包的使用方法。

    4 年前
  • npm 包 babyfs-wxapp-runningtime1 使用教程

    Babyfs-wxapp-runningtime1 是一个方便您进行微信小程序运行时间统计的工具库。在本篇文章中,我们将详细介绍此 NPM 包的用法,帮助您在编写小程序时进行准确的性能统计。

    4 年前
  • npm 包 @768bit/msi-packager 使用教程

    前言 随着软件的开发越来越复杂,我们需要寻找一种简单的方式来打包我们的软件,并方便部署到不同的系统上。这时,MSI 安装包成为了一个理想的解决方案。 在前端开发中,我们有时需要打包我们的前端应用程序并...

    4 年前
  • npm 包 ah-newrelic-plugin 使用教程

    前言 在前端开发中,我们需要监控网站的性能和错误,以便及时发现和修复问题,提升用户的使用体验。而 New Relic 是一个非常优秀的 APM(应用程序性能管理)工具,它可以监控网站的性能、错误、事务...

    4 年前
  • npm 包 @chitkosarvesh/winston-logstash 使用教程

    在前端开发中,我们经常需要记录日志来帮助我们定位问题和分析系统运行情况。@chitkosarvesh/winston-logstash 是一个能够将 Node.js 应用程序中的日志传输到 Logst...

    4 年前

相关推荐

    暂无文章