如何使用已迁移的HTML内容为盖茨比创建博客条目 [英] How can I create blog entries for Gatsby with migrated HTML content

问题描述

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

I am trying to migrate a blog, and can extract the posts in HTML format as well as title, keywords, data, meta description, etc.

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

How can I use them to create the blog posts in GatsbyJS? I can only find instructions for using Markdown. It is not really feasible to migrate several hundred of this by hand and converting them to markdown because of the complex formatting along with some inline CSS styles.

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

Is there some way of adding the HTML in a separate Javascript file so that it gets included (via the template?) and the meta data is in the markdown file?

推荐答案

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

I think you can point gatsby-source-filesystem to your html folder & create a node for each of the file in there. Once you have that, you can query them in your template just like with other markdown nodes.

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

Say you have the htmls in a content folder:

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

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

Point gatsby-source-filesystem to your html folder:

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

然后在gatsby-node.js中，您可以使用loadNodeContent读取原始html.从那时起，很简单，只需按照Gatsby的文档上的示例了解有关创建节点.

Then in gatsby-node.js, you can use loadNodeContent to read the raw html. From then on it's pretty straight forward, just follow this example on Gatsby's doc about 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
      }
    }
  }
}

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

and from then on pretty much treat them as other markdown nodes. It'll get more complex if you need to parse the content, like locating images file etc. in which case I think you'd need to look into something like rehype.

这篇关于如何使用已迁移的HTML内容为盖茨比创建博客条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！