Gatsby 学习 - 03 Gatsby 插件

最新推荐文章于 2021-12-02 08:55:17 发布
最新推荐文章于 2021-12-02 08:55:17 发布
阅读量685 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/119041682
版权

Gatsby 插件

Gatsby 框架内置插件系统，插件是为应用添加功能的最好的方式。

在 Gatsby 中有三种类型的插件：

  • 数据源插件（source）：负责从应用外部获取数据，将数据统一放在 Gatsby 的数据层中
  • 数据转换插件（transformer）：负责转换特定类型的数据的格式，比如将 Markdown 文件中的内容转化成对象形式
  • 功能插件（plugin）：为应用提供功能，比如通过插件让应用支持 Less 或 TypeScript

Gatsby 官方提供了非常多且非常有用的插件，开发者也可以自己编写插件，以及发布供他人使用。

Gatsby 对插件的命名规范有要求：

  • 数据源插件名称中必须包含 source
  • 数据转换插件名称中必须包含 transformer
  • 功能插件名称中必须包含 plugin

将本地 JSON 文件数据添加到数据层

添加示例文件

在根目录下创建 json 文件夹，在里面添加 products.json 文件。

json\products.json：

[
  {
    "title": "Vans范斯 男子短袖T恤 Work Weird新款运动休闲TEE迷彩官方正品",
    "price": 208,
    "url": "/images/product-1.jpg",
    "address": "上海",
    "id": "1"
  },
  {
    "title": "小ck女包包2020新款潮真皮斜挎包女百搭ins2019单肩包时尚手提包",
    "price": 239,
    "url": "/images/product-2.webp",
    "address": "北京",
    "id": "2"
  },
  {
    "title": "潮牌羊毛开衫男川久爱心毛衣保桃心play外套玲",
    "price": 118,
    "url": "/images/product-3.webp",
    "address": "深圳",
    "id": "3"
  },
  {
    "title": "太平鸟男装 2020秋季pupu熊联名时尚大图案毛套衫圆领帅气针织衫",
    "price": 379,
    "url": "/images/product-4.webp",
    "address": "广州",
    "id": "4"
  }
]

JSON 中使用的图片放置在根目录的 static 文件夹中。

static 文件夹是静态资源文件夹，里面的资源在浏览器中可以直接访问，例如 http://localhost:8000/images/product-1.jpg 可以访问 static/images/product-1.jpg 文件。

安装插件

将本地 JSON 文件中的数据放入数据层需要安装两个插件：

  • gatsby-source-filesystem：用于将本地文件中的数据添加至数据层
  • gatsby-transformer-json：将原始 JSON 字符串转换成 JavaScript 对象

安装完成后，需要将插件配置到 gatsby-config.js 中：

// gatsby-config.js
/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  // siteMetadata 对象用于配置网站元数据
  siteMetadata: {
    title: "Hello Gatsby",
    author: "Jone",
  },
  /* Your site config here */
  plugins: [
    {
      resolve: "gatsby-source-filesystem", // 插件名
      options: {
        // 分类名称，用于区分不同数据，可以不设置
        name: "json",
        // 插件将转化 path 文件夹下的 json 文件
        // 最终以<文件名Json>为数据名存储到数据层
        path: `${__dirname}/json/`,
      },
    },
    // 不需要特殊配置的可以直接放到 plugin 数组中
    "gatsby-transformer-json",
  ],
}

GraphQL 查询

query MyQuery {
  allFile {
    nodes { # 转化的文件
      absolutePath # 文件的绝对路径
      publicURL # 转化后的文件所在路径
      ext # 文件的扩展名
    }
  }
  productsJson { # 转化的数据（查询单个数据：只查询第一条）
    title
    url
    price
    address
  }
  allProductsJson { # 转化的数据（查询全部数据）
    nodes {
      title
      url # 取的 JSON 数据的 url 字段的值
      price
      address
    }
  }
}

图像优化

存在的问题

  1. 图像文件和数据文件不在源代码中的同一个位置
    • 图像文件存储在 static
    • 数据文件存储在 json
  2. 图像路径基于构建站点的绝对路径，而不是相对于数据(.json 文件)的路径，难以分析出图片的真实存储位置
  3. 图像没有经过任何优化操作
    • 压缩、生成响应式图片等

安装插件

  • gatsby-source-filesystem：用于将本地文件信息添加到数据层
  • gatsby-plugin-sharp：提供本地图像的处理功能（调整图像尺寸、压缩体积等）
    • 依赖的 sharp 模块可能受国外访问限制，可以配置镜像
    • 依赖的 mozjpeg 模块从 github 下载安装包，如果 github 访问受限，可以配置 hosts
    • PS：配置 VPN 一劳永逸
  • gatsby-transformer-sharp：将 gatsby-plugin-sharp插件处理后的图像信息添加到数据层
    • 该插件会识别数据中的图片地址，如果定位的图片文件被 gatsby-source-filesystem 添加到数据层，则会将 url 的 GraphQL 查询结果替换为图片信息对象
  • gatsby-image：React 组件，优化图像显示，基于gatsby-transformer-sharp插件转化后的数据。

优化内容

  1. 生成多个具有不同宽度的响应式图像版本，为图像设置 srcset 和 sizes 属性，不同宽度的设备加载合适大小的图片
  2. 使用“模糊处理”技术，加载图片时，使用一个 20px 宽的小图像显示为占位符，直到实际图像下载完成为止

配置插件

// gatsby-config.js
/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  // siteMetadata 对象用于配置网站元数据
  siteMetadata: {
    title: "Hello Gatsby",
    author: "Jone",
  },
  /* Your site config here */
  plugins: [
    {
      resolve: "gatsby-source-filesystem", // 插件名
      options: {
        // 分类名称，用于区分不同数据，可以不设置
        name: "json",
        // 插件将转化 path 文件夹下的 json 文件
        // 最终以<文件名Json>为数据名存储到数据层
        path: `${__dirname}/json/`,
      },
    },
    // 不需要特殊配置的可以直接放到 plugin 数组中
    "gatsby-transformer-json",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
  ],
}

改动图像资源

将图像文件夹 images 从 static 移动到数据文件所在的 json 文件夹下。

修改数据中的图像路径："/images/xxxx" -> "./images/xxxx"。

查看 GraphQL

重启项目 gatsby develop，打开 GraphQL 调试页面。

查询数据多了 allImageSharp 和 imageSharp 节点，而 JSON 数据项的 url 节点也增加了相应节点：

query MyQuery {
  allImageSharp {
    nodes {
      fixed { # 固定大小的图片（可以生成指定宽高的图片）
        src
      }
      fluid { # 响应大小的图片
        src
      }
    }
  }
  allProductsJson {
    nodes {
      title
      price
      address
      url {
        childImageSharp {
          fluid {
            # 响应图片相关属性
            src
            srcSet
            sizes
            aspectRatio # 像素比
          }
          fixed(width:200,height:200) { # 指定宽高
            src
            srcSet
            width
            height
          }
        }
      }
    }
  }
}

显示图片

响应式图片：

// src\pages\product.js
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default function Product({ data }) {
  return (
    <div>
      {data.allProductsJson.nodes.map((node, index) => (
        <div key={index}>
          <p>{node.title}</p>
          <p>{node.address}</p>
          <p>{node.price}</p>
          <div style={{ width: 400 }}>
            {/* fluid 接收响应式图片 图片的宽以父元素为准 */}
            <Img fluid={node.url.childImageSharp.fluid} />
          </div>
        </div>
      ))}
    </div>
  )
}

// 响应式图片
export const query = graphql`
  query {
    allProductsJson {
      nodes {
        title
        url {
          childImageSharp {
            fluid {
              src
              srcSet
              sizes
              aspectRatio
            }
          }
        }
        price
        address
      }
    }
  }
`

固定大小图片：

// src\pages\product.js
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default function Product({ data }) {
  return (
    <div>
      {data.allProductsJson.nodes.map((node, index) => (
        <div key={index}>
          <p>{node.title}</p>
          <p>{node.address}</p>
          <p>{node.price}</p>
          <div style={{ width: 400 }}>
            {/* fixed 接收固定大小图片 图片的宽高固定 */}
            <Img fixed={node.url.childImageSharp.fixed} />
          </div>
        </div>
      ))}
    </div>
  )
}

// 固定大小图片
export const query = graphql`
  query {
    allProductsJson {
      nodes {
        title
        url {
          childImageSharp {
            fixed(width: 200, height: 200) {
              src
              srcSet
              height
              width
            }
          }
        }
        price
        address
      }
    }
  }
`

将本地 Markdown 数据添加到数据层

需求描述

  • 在本地有多个 Markdown 文件，一个文件代表一篇文章
  • 将本地 Markdown 文件的数据添加到数据层，构建文章列表页和详情页。

示例文件

添加文件 /posts/gatsby.md：

---
title: "Hello Gatsby"
date: "2048-01-05"
---

Hello Gatsby, this is a post.

添加文件 /posts/react.md：

---
title: "Hello React"
date: "9012-12-23"
---

This is a test markdown file

![](./images/1.jpg)

添加图片 /posts/images/1.jpg

安装插件

  • gatsby-source-filesystem：将 Markdown 文件数据放入数据层
    • 仅使用此插件，放入的只是原始 Markdown 数据，无法使用
  • gatsby-transformer-remark：将数据层中的原始 Markdown 数据转化成可用的对象形式

配置插件

// gatsby-config.js
/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  // siteMetadata 对象用于配置网站元数据
  siteMetadata: {
    title: "Hello Gatsby",
    author: "Jone",
  },
  /* Your site config here */
  plugins: [
    {
      resolve: "gatsby-source-filesystem", // 插件名
      options: {
        // 分类名称，用于区分不同数据，可以不设置
        name: "json",
        // 插件将转化 path 文件夹下的 json 文件
        // 最终以<文件名Json>为数据名存储到数据层
        path: `${__dirname}/json/`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "markdown",
        path: `${__dirname}/posts/`,
      },
    },
    // 不需要特殊配置的可以直接放到 plugin 数组中
    "gatsby-transformer-json",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-transformer-remark",
  ],
}

重新启动 gatsby develop。

查看 GraphQL

GraphQL 调试页面的查询数据中多了 allMarkdownRemark 和 markDownRemark 节点：

query MyQuery {
  allMarkdownRemark {
    nodes {
      html # 解析的内容部分
      frontmatter {
        date # 解析的 date 字段
        title # 解析的 title 字段
      }
      fileAbsolutePath # markdown 文件的绝对路径
      internal { # 内部属性
        type # 标识文件内部得一个类型，用于区分文件类型，如 markdown 文件、json 文件、页面文件等
      }
    }
  }
}

构建列表页面

// src\pages\list.js
import React from "react"
import Header from "../components/Header"
import { graphql } from "gatsby"

export default function List({ data }) {
  return (
    <div>
      List Page
      <Header />
      <hr />
      {data.allMarkdownRemark.nodes.map(post => (
        <div key={post.id}>
          <p>{post.frontmatter.title}</p>
          <p>{post.frontmatter.date}</p>
          <div dangerouslySetInnerHTML={{ __html: post.html }}></div>
        </div>
      ))}
    </div>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      nodes {
        id
        html
        frontmatter {
          date
          title
        }
      }
    }
  }
`

构建文章详情页

重新构建查询数据

为每篇文章的数据添加 slug （访问路径）作为请求标识，slug 值为文件名称。

  • gatsby.md -> /posts/gatsby
  • react.md -> /posts/react

添加方式有两种：

  1. 手动在每个 Markdown 文件中添加 slug 属性
  2. 【推荐】使用编程方式一次性为数据层中的每篇 Markdown 文章添加 slug 属性

编程方式添加 slugn 属性

在 gatsby-node.js 文件中导出一个 onCreateNode 方法，该方法在创建每个节点（Node）后被调用。

Gatsby 应用启动时，会先启动插件，通过插件从外部数据源获取数据，然后将获取到的数据添加到数据层中，向数据层中每添加一条数据实际上就是创建一个数据节点，每创建完一个数据节点，Gatsby 都会调用一次 onCreateNode 方法。

onCreateNode 是框架为开发者提供的用于修改节点信息的方法。

onCreateNode 接收的参数中可以解构出 node 对象，就是 Gatsby 创建的数据节点：

  • 通过数据节点的内部 type 属性，可以获取当前节点的内部类型，区分 Markdown 文件。
  • 通过数据节点的 fileAbsolutePath 文件绝对路径属性，获取文件名作为 slug 的值。

最后使用从 actions 对象中解构的 createNodeField 方法为数据添加属性，方法接受三个参数：

  • node：要添加属性的数据节点对象
  • name：要添加的属性的名字
  • value：要添加的属性的值
// gatsby-node.js
const path = require("path")

// 为数据节点添加属性
function onCreateNode({ node, actions }) {
  const { createNodeField } = actions
  if (node.internal.type === "MarkdownRemark") {
    const slug = path.basename(node.fileAbsolutePath, ".md")
    createNodeField({
      node,
      name: "slug",
      value: slug,
    })
  }
}

module.exports = { createPages, onCreateNode }

重启 gatsby develop

查看 GraphQL

createNodeField 添加的属性，会添加到 nodes 节点下的 fields 属性下。

query MyQuery {
  allMarkdownRemark {
    nodes {
      html
      frontmatter {
        date
        title
      }
      fields {
        slug
      }
    }
  }
}

根据 slug 构建文章详情页

创建页面

使用 createPages 编程式创建页面：

  • 从参数中解构 graphql 方法，用于查询数据
    • 与 gatsby 模块中的 graphql 方法不同
    • 它接收一个查询命令的字符串
    • 返回 Promise，值是查询结果
  • 通过 context 传递给页面的数据，可以在页面中使用的查询命令中作为参数接收 $<参数名>
// gatsby-node.js
const path = require("path")

// 创建文章详情页
async function createPages({ graphql, actions }) {
  // 获取模板绝对路径
  const template = require.resolve("./src/templates/post.js")
  // 获取组件所需数据
  // 注意此处的 graphq 和 组件中使用的 graphql 传参方式不一样
  const { data } = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          fields {
            slug
          }
        }
      }
    }
  `)

  // 根据模板和数据创建页面
  const { createPage } = actions
  data.allMarkdownRemark.nodes.forEach(node => {
    createPage({
      path: `/posts/${node.fields.slug}`, // 页面访问地址
      component: template, // 模板绝对路径
      // 组件中使用的查询命令可以通过 `$slug` 接收传递给页面的参数
      context: {
        slug: node.fields.slug,
      },
    })
  })
}

// 为数据节点添加属性
function onCreateNode({ node, actions }) {
  const { createNodeField } = actions
  if (node.internal.type === "MarkdownRemark") {
    const slug = path.basename(node.fileAbsolutePath, ".md")
    createNodeField({
      node,
      name: "slug",
      value: slug,
    })
  }
}

module.exports = { createPages, onCreateNode }

查询命令

在这里插入图片描述

文章详情页模板

// src\templates\person.js
import React from "react"
import { graphql } from "gatsby"

export default function Post({ data }) {
  return (
    <div>
      <p>{data.markdownRemark.frontmatter.title}</p>
      <p>{data.markdownRemark.frontmatter.date}</p>
      <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}></div>
    </div>
  )
}

export const query = graphql`
  query ($slug: String) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date
        title
      }
      id
    }
  }
`

处理 Markdown 文件中的图片

react.md 中插入了一个图片 ./images/1.jpg，在转化数据时，并没有将 Markdown 数据中的图片地址替换为这个图片资源文件转化后的路径。

gatsby-remark-images 插件用于处理 Markdown 中的图片，将图片路径替换为转化后的资源路径，以及一些其它优化。

安装 npm i gatsby-remark-images

该插件要作为 gatsby-transformer-remark 的插件去配置：

// gatsby-config.js
/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  // siteMetadata 对象用于配置网站元数据
  siteMetadata: {
    title: "Hello Gatsby",
    author: "Jone",
  },
  /* Your site config here */
  plugins: [
    {
      resolve: "gatsby-source-filesystem", // 插件名
      options: {
        // 分类名称，用于区分不同数据，可以不设置
        name: "json",
        // 插件将转化 path 文件夹下的 json 文件
        // 最终以<文件名Json>为数据名存储到数据层
        path: `${__dirname}/json/`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "markdown",
        path: `${__dirname}/posts/`,
      },
    },
    // 不需要特殊配置的可以直接放到 plugin 数组中
    "gatsby-transformer-json",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 600, // 生成图片的最大宽度，默认 650
              linkImagesToOriginal: false, // 是否将图片包裹在 a 标签中
            },
          },
        ],
      },
    },
  ],
}
皮蛋很白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅聊Gatsby静态站点生成器
前端高薪进击手记
03-18 1070
gatsby-remark-images：处理markdown 文章中的图片，以便可以在生产环境中使用，它是作为gatsby-transformer-remark 插件的options 配置选项plugins 使用的。将static中的images文件夹移动到json目录下，使得json数据及依赖的图像放置在相同位置中，并修改json中的图像引用地址，改绝对定位‘/’为相对定位 ‘./’。在页面组件中导出查询命令，框架执行查询并将结果传递给组件的props对象，存储在props对象中的data属性中。
学习gatsby，从这里开始
Learn-anything.cn
12-01 567
一、Gatsby 是什么？ 可建立一个访问速度极快的静态网站。 轻松发布：只需执行 gatsby build 命令，所有网站数据都被打包到 public 文件夹中，拷贝此文件夹到 nginx 即可完成网站发布。 不中断：网站更新也只是文件覆盖操作，不会因更新而中断服务。 速度快：网站所需数据在编译期就获取、压缩、优化完成，无需在打开网页时再花费时间从第三方获取数据，所以网站的访问速度非常快。 完善的插件库生态：2500多个插件可免费使用，极大缩短网站开发周期。 使用场景 如果你有一堆用 Markdow
gatsby_前5个gatsby插件
weixin_26723981的博客
09-08 414
gatsbyGatsby is a React-based free and open source framework that equips developers with the tools to generate static sites that are optimized for the latest web standards. With a large community, ple...
Gatsby 学习 - 07 其它插件（管理页面元数据、Less 支持）
皮蛋很白的博客
07-23 300
管理页面中的元数据 安装模块 向页面添加 SEO，也就是管理页面的元数据，需要安装两个模块： react-helmet：一个组件，用于设置文档的 head。 页面加载后通过 JS 设置文档的 head gatsby-plugin-react-helmet：Gatsby 插件，用于生成静态 HTML 页面（gatsby build）时将 react-helmet 设置的 head 添加到 Gatsby 构建的静态 HTML 页面中。 安装模块：npm i react-helmet gatsby-pl
用 Gatsby 创建一个博客
itheima_Wujie的博客
12-21 4389
Gatsby 是一个令人难以置信的静态站点生成器，它允许使用React作为渲染引擎引擎来搭建一个静态站点，它真正具有现代web应用程序所期望的所有优点。它通过在构建时通过服务器端渲染将动态的 React 组件呈现为静态 HTML 内容。这意味着您的用户可以获得静态站点的所有好处，比如不使用 JavaScript、搜索引擎友好性、非常快的加载速度等等，也并没有失去现代 web 所期望的活力和交互
gatsby-plugin-material-ui:具有内置服务器端渲染支持的Material-UI的Gatsby插件
05-01
"material-ui"和"gatsby-plugin"分别对应了上述的UI库和Gatsby插件。"JavaScript"标签则表明整个项目是用JavaScript语言编写的。 关于“文献资料”，通常在开发过程中，官方文档和相关教程是非常重要的参考资料。...
gatsby-plugin-favicon:Favicon Gatsby插件
04-30
将插件包括在您的gatsby-config.js文件中。 在您的src文件夹中添加一个favicon.png文件。 文件的建议大小为：1500x1500px。 // in gatsby-config.js plugins: [ `gatsby-plugin-favicon` ] ; 选项 以下是选项的...
gatsby-plugin-preconnect:Gatsby插件可添加一个对于每个指定的域
05-13
安装npm install --save gatsby-plugin-preconnect 这个插件的作用只需在页面上添加<link rel="preconnect" href="https://example.com" crossorigin> （请参阅）。如何使用// In your gatsby-config....
gatsby-remark-oembed-example-site:gatsby-remark-oembed 插件的示例站点
05-30
`gatsby-remark-oembed` 是一个用于 Gatsby.js 的 Markdown 处理插件，它能够将 Markdown 文件中的 Web URL 自动转换为...通过学习和应用这个插件，你可以提升你的 Gatsby 站点的用户体验，使内容更加生动和吸引人。
gatsby-source-flamelink:Gatsby Flamelink的源插件
04-29
用于Flamelink的Gatsby源代码插件 用于从将数据提取到Gatsby v2中的源插件。安装npm install --save gatsby-source-flamelink 或者yarn add gatsby-source-flamelink如何使用为了使用该插件，您需要对其进行配置，使...
netlify-gatsby-md:使用netlify编辑markdown示例
04-06
盖茨比的博客入门 使用此博客样板启动您的项目。 该入门工具随附了主要的Gatsby配置文件，您可能需要使用React的快速应用生成器来快速启动和运行。 还有其他更具体的想法吗？ 您可能需要查看我们充满活力的集合。 :rocket: 快速开始 创建一个Gatsby网站。 使用Gatsby CLI创建一个新站点，并指定博客启动器。 # create a new Gatsby site using the blog starter gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog 开始开发。 导航到新站点的目录并启动。 cd my-blog-starter/ gatsby develop 打开源代码并开始编辑！ 您的站点现在在http://localhost:8000 ！ 注意：您还将看到第
gatsby-plugin-paginate:Gatsby的即插即用分页插件
05-11
Gatsby分页插件 只需即插即用。 在我的上查看我如何使用它的示例。 安装 npm i --save gatsby-plugin-paginate 配置 插入 在您的gatsby-config.js ： module . exports = { plugins : [ ... { resolve : `gatsby-plugin-paginate` , options : { sources : [ { path : `/page` , pageSize : 5 , template : ` ${ __dirname } /src/templates/page.js` , serialize : ( resu
Gatsby插件将Firebase变成Gatsby数据源
08-11
Gatsby插件将Firebase变成Gatsby数据源
解决gatsby安装失败sharp: Command failed
weixin_34133829的博客
05-30 3719
gatsby是一个基于React和Graphql搭建静态网站的工具，相较于其他的一些静态网站构建工具，他有很多优势，比如： 静态网站享受webapp的体验同时又能够享受seo React组件化的开发体验，以及丰富的生态功能 丰富的数据源，不局限于Markdown 等等等等... 然而在使用gatsby的过程中常常出现安装错误，最常见的就是使用gatsby-transformer-sharp来处...
Gatsby入门指南—Gatsby支持Markdown（1）
前端大彬哥666
05-31 901
1.安装插件 我用Gatsby就是因为它支持Markdown.所以不墨迹，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>pages下面,添加三篇文章，头部格式如下： path : "/blog/my-first-post"date : "2...
HTML转为markdown工具
哈罗猫的博客
01-04 4493
Remark 是一个将html转换成markdown格式的Java库，支持 Markdown, Markdown Extra以及MultiMarkdown格式。 简单用法： import com.overzealous.remark.Remark;Remark remark = new Remark();String htmlInput = ...;String markdown = re
Gatsby入门指南—使用GraphQL解析Markdown（2）
前端大彬哥666
05-31 526
1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。 官网：http://graphql.cn/ 2.为什么需要它？ 一图抵万言： ...
gatsby-config.js有什么作用？
Learn-anything.cn
12-02 194
一、简介 gatsby-config.js 位于项目根目录，用于配置项目信息，如果没有就新建一个。 plugins 用于配置 plugin ，这个是最常用的 siteMetadata 设置项目的基本信息：title等描述 flags 可设置的值，看这里！ pathPrefix 转换 URL http://www.example.com 为 http://www.example.com/blog proxy 开发模式下，让不存在的URL 重定向到指定的URL。详细内容，看这里！ /
Gatsby
qt的博客
02-25 547
Gatsby 介绍 Gatsby 是一个静态站点生成器. 官网：https://www.gatsbyjs.org/ 静态应用的优势 访问速度快 更利于 SEO 搜索引擎的内容抓取 部署简单 Gatsby 总览 基于 React 和 GraphQL. 结合了 webpack, babel, react-router 等前端领域中最先进工具. 开发人员开发体验好 采用数据层和UI层分离而不失 SEO 的现代前端开发模式. 对SEO非常友好 数据预读取, 在浏览器空闲的时候预先读取链接对应的页面内容.
Gatsby使用来做什么的
最新发布
02-08
它是基于React框架构建的，并通过使用各种插件和工具，可以支持各种功能，如数据源的集成，自动代码分割和优化，以及对移动设备的优化等。Gatsby的目标是帮助开发人员构建快速，可扩展的网站，并为访问者提供极佳的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值