0

我的设置是使用 Ghost 作为外部 CMS 的 GatsbyJS，我正在尝试在本地加载页面的所有图像。

所以我找到了一篇博客文章，向我展示了一种对一张图片执行此操作的方法，这对我有用：https ://ghost.joonaviertola.com/optimize-ghost-images-in-gatsby/

然后我想我也可以对多个图像执行此操作，而不是将一个图像链接到节点，而是创建一个包含所有图像的数组。我第一次尝试只为一张图片。直接链接图像并将图像推送到节点上的数组中。

imgUrls = [...]; // list of absolute URLs of remote images
node.localImages = [];

// test with only one image first
if (imgUrls.length) {
    const fileNode = await createRemoteFileNode({
        url: imgUrls[0],
        store,
        cache,
        createNode,
        parentNodeId: node.id,
        createNodeId
    });

    if (fileNode) {
        node.localImage___NODE = fileNode.id;
        node.localImages.push(fileNode);
    }
}

在 GraphQL 资源管理器中，我现在看到：

在此处输入图像描述

工作也是如此node.localImage___NODE = fileNode.id，我得到了链接到节点的图像，childImageSharp里面有。

node.localImages.push(fileNode)另一方面似乎有效，因为我得到了一个包含（在这种情况下）一个图像的数组。只有childImageSharpandchildMarkdownRemark丢失了，这是我想要开始的部分。

现在我不确定这整个方法是否完全错误，或者我只是一步之遥。有什么想法吗？

4

1 回答 1

1 
exports.onCreateNode = async ({ node, getNode, actions, store, createNodeId, cache }) => {
    const { createNodeField, createNode } = actions;
    // Download image and create a File node with gatsby-transformer-sharp.
    if ([`GhostPost`, `GhostPage`].includes(node.internal.type)) {
        // Parse HTML and get all images
        if (node.html) {
            const regex = /<img.+?src="(.+?)".+?>/g;

            let imgUrls = [];
            let matches = regex.exec(node.html);
            while (matches) {
                imgUrls.push(matches[1]);
                matches = regex.exec(node.html);
            }

            const localImages = [];

            for (const imgUrl of imgUrls) {
                if (!['.jpg', '.jpeg', '.png'].some(item => imgUrl.toLowerCase().includes(item))) {
                    continue;
                }

                const fileNode = await createRemoteFileNode({
                    url: imgUrl,
                    store,
                    cache,
                    createNode,
                    parentNodeId: node.id,
                    createNodeId
                });

                if (fileNode) {
                    localImages.push(fileNode.id);
                }
            }

            node.localImages___NODE = localImages;
        }
    }
};

不确定这是否是正确/最好的方法，但它现在似乎有效。从 Ghost 中为每个帖子创建一个 GhostPost 节点，从 html 中提取所有图像（jpg 和 png），创建它们的图像节点并将它们链接到 GhostPost 节点。

于 2020-02-21T23:13:58.783 回答