Gatsby构建时如何下载对应页面/文章的远程文件并生成静态TXT

你当前的实现逻辑存在本质错误，无法达成需求：

• createPage是Gatsby提供的生成HTML页面的专用API，传入的React组件最终会被渲染为HTML内容，不能直接输出纯TXT格式的静态文件
• React组件内的axios请求属于客户端侧执行逻辑，Gatsby构建阶段不会运行这部分代码，自然无法拿到远程文件内容
• createPage的path参数是站点的访问路由路径，不是本地文件的输出存储路径

直接在gatsby-node.js的Node.js运行环境中完成远程文件下载、本地写入逻辑，不需要额外的React模板组件。

步骤1：安装必要依赖 #

npm install axios fs-extra

步骤2：修改gatsby-node.js逻辑 #

在你原有获取文章列表的逻辑中，增加远程文件下载、写入到public目录的逻辑即可，示例代码如下：

const axios = require('axios')
const fs = require('fs-extra')
const path = require('path')

// 下载远程TXT并保存到本地构建目录
const downloadTXT = async (postId) => {
  try {
    // 请求远程TXT内容
    const res = await axios.get(`http://someaddr/files/${postId}.txt`, {
      responseType: 'text'
    })
    // 定义本地输出路径：构建后public/code目录下，对应访问路径为 /code/post-{id}.txt
    const outputPath = path.join(__dirname, 'public', 'code', `post-${postId}.txt`)
    // 自动创建不存在的目录
    await fs.ensureDir(path.dirname(outputPath))
    // 写入文件
    await fs.writeFile(outputPath, res.data, 'utf-8')
    return res.data
  } catch (err) {
    console.error(`ID为${postId}的文件下载失败：`, err.message)
    return ''
  }
}

exports.createPages = async ({ graphql, actions }) => {
  // ----- 这里保留你原有获取所有文章的查询逻辑 -----
  const postRes = await graphql(`
    query {
      allYourPostType {
        nodes {
          id
        }
      }
    }
  `)
  const posts = postRes.data.allYourPostType.nodes

  // 批量下载所有文章对应的TXT文件
  await Promise.all(
    posts.map(async post => {
      const txtContent = await downloadTXT(post.id)
      // ----- 这里保留你原有创建文章详情页的逻辑 -----
      actions.createPage({
        path: `/post/${post.id}`,
        component: path.resolve(`./src/templates/post.js`),
        context: {
          id: post.id,
          // 如果需要在页面中嵌入TXT内容，直接通过context传入即可，页面内可通过pageContext.txtContent直接调用
          txtContent: txtContent
        }
      })
    })
  )
}

补充说明 #

上述代码写入到public/code目录下的文件，构建完成后直接通过你的站点域名/code/post-{id}.txt即可正常访问，不需要额外配置。

内容的提问来源于stack exchange，提问作者yuvrajm