Question

我正在尝试迁移博客，并且可以提取HTML格式的帖子以及标题，关键字，数据，元描述等。

如何使用它们在GatsbyJS中创建博客文章？我只能找到有关使用Markdown的说明。手工迁移数百个并将其转换为markdown并不是真正可行的方法，因为格式复杂，并且带有一些内联CSS样式。

是否有某种方法可以将HTML添加到单独的Javascript文件中，从而使其包含（通过模板？）并且元数据位于markdown文件中？

Answer 1

我认为您可以将gatsby-source-filesystem指向您的html文件夹并为其中的每个文件创建一个节点。一旦有了这些，就可以像在其他markdown节点中一样在模板中查询它们。

假设您的内容文件夹中包含htmls

root
 |--content
 |   `--htmls
 |       |--post1.html
 |       `--post2.html
 |  
 |--src
 |   `--templates
 |        `--blog.js
 |
 |--gatsby-config.js
 `--gatsby-node.js

将gatsby-source-filesystem指向您的html文件夹：

// gatsby-config.js
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/htmls`,
    name: `html`,
  },
},

然后在gatsby-node.js中，您可以使用loadNodeContent来读取原始html。从那时起，这很简单，只需按照Gatsby的文档中有关creating node的示例进行操作即可。

exports.onCreateNode = async ({
  node, loadNodeContent, actions
}) => {

  // only care about html file
  if (node.internal.type !== 'File' || node.internal.mediaType !== 'text/html') return;

  const { createNode } = actions;

  // read the raw html content
  const nodeContent = await loadNodeContent(node);

  // set up the new node
  const htmlNodeContent = {
    content: nodeContent,
    name: node.name, // take the file's name as identifier
    internal: {
      type: 'HTMLContent',
    }
    ...otherNecessaryMetaDataProps
  }

  createNode(htmlNode);
}

创建节点后，可以使用

查询它们

{
  allHtmlContent {
    edges {
      node {
        name
        content
      }
    }
  }
}

，从那时起，就将它们视为其他降价节点。如果您需要解析内容（例如定位图像文件等），它将变得更加复杂。在这种情况下，我认为您需要研究类似rehype的东西。

如何使用已迁移的HTML内容为盖茨比创建博客条目

1 个答案: