gatsby-source-wordpress:netlify部署上的ACF字段中图像上的localFile字段为空

时间:2018-09-16 09:37:59

标签: javascript wordpress-rest-api gatsby static-site netlify

我正在使用gatsby wordpress插件从托管的WP网站检索我的帖子。在本地,gatsby构建工作正常,并且检索了我的所有ACF字段。但是,在我的Netlify部署上,属性本地文件似乎为空。使用其他字段,可以正确检索ACF字段。

这是我的GraphQL查询:

{
  allWordpressPost {
            edges {
              node {
                id
                wordpress_id
                date
                guid
                modified
                slug
                status
                type
                link
                title
                content  
                acf {
                  description
                  title
                  icon
                  link
                image{             
                    slug
                    title
                    localFile{
                     childImageSharp{
                      sizes{
                        sizes
                      }
                      resolutions{
                        srcSet
                        src
                      }
                    }
                    }
                    source_url
                    link
                  }

                }
              }
            }
          }
        }

我已经在此ticket所引用的Wordpress函数文件中实现了nullify函数修复程序:

function nullify_empty($value, $post_id, $field)
{
    if (empty($value)) {
        return null;
    }

    return $value;
}

add_filter('acf/format_value_for_api/type=text', 'nullify_empty', 100, 3);
add_filter('acf/format_value_for_api/type=image', 'nullify_empty', 100, 3);
add_filter('acf/format_value_for_api/type=repeater', 'nullify_empty', 100, 3);

我发现与本地日志相比,Netlify上的构建日志有何不同。我认为这是问题所在:

enter image description here

在本地,对于同一警告仅显示以下内容:

enter image description here

这是在Netlify构建日志中记录的ACF字段的示例。注意localfile属性:

enter image description here

我的盖茨比环境:

System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.8.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 59.0
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.167 => 1.9.277
    gatsby-image: ^1.0.55 => 1.0.55
    gatsby-link: ^1.6.31 => 1.6.32
    gatsby-pagination: ^1.1.0 => 1.1.0
    gatsby-plugin-catch-links: ^1.0.14 => 1.0.14
    gatsby-plugin-feed: ^1.3.15 => 1.3.15
    gatsby-plugin-google-analytics: ^1.0.14 => 1.0.15
    gatsby-plugin-manifest: ^1.0.10 => 1.0.12
    gatsby-plugin-netlify: ^1.0.21 => 1.0.21
    gatsby-plugin-netlify-cms: ^2.0.1 => 2.0.1
    gatsby-plugin-nprogress: ^1.0.9 => 1.0.9
    gatsby-plugin-offline: ^1.0.12 => 1.0.12
    gatsby-plugin-react-helmet: ^1.0.2 => 1.0.8
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-plugin-sitemap: ^1.2.7 => 1.2.9
    gatsby-plugin-twitter: ^1.0.14 => 1.0.14
    gatsby-remark-autolink-headers: ^1.4.10 => 1.4.11
    gatsby-remark-copy-linked-files: ^1.5.23 => 1.5.25
    gatsby-remark-images: ^1.5.34 => 1.5.36
    gatsby-remark-prismjs: ^1.2.24 => 1.2.24
    gatsby-remark-responsive-iframe: ^1.4.16 => 1.4.16
    gatsby-source-filesystem: ^1.5.10 => 1.5.11
    gatsby-source-wordpress: ^2.0.93 => 2.0.93
    gatsby-transformer-json: ^1.0.14 => 1.0.14
    gatsby-transformer-remark: ^1.7.44 => 1.7.44
    gatsby-transformer-sharp: ^1.6.27 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 1.1.58

gatsby-config.js:

const config = require("./data/SiteConfig");

const pathPrefix = config.pathPrefix === "/" ? "" : config.pathPrefix;

module.exports = {
  pathPrefix: config.pathPrefix,
  siteMetadata: {
    siteUrl: config.siteUrl + pathPrefix,
    rssMetadata: {
      site_url: config.siteUrl + pathPrefix,
      feed_url: config.siteUrl + pathPrefix + config.siteRss,
      title: config.siteTitle,
      description: config.siteDescription,
      image_url: `${config.siteUrl + pathPrefix}/logos/logo-512.png`,
      author: config.siteRssAuthor,
      copyright: `${config.copyright.label} © ${config.copyright.year ||
        new Date().getFullYear()}`
    }
  },
  plugins: [
    "gatsby-plugin-react-helmet",

    {
      resolve: `gatsby-source-wordpress`,
      options: {
        /*
        * The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
        * Example : 'gatsbyjswpexample.wordpress.com' or 'www.example-site.com'
        */
        baseUrl: `hiddenForSO`,
        // The protocol. This can be http or https.
        protocol: `http`,
        // Indicates whether the site is hosted on wordpress.com.
        // If false, then the asumption is made that the site is self hosted.
        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
        // If your site is hosted on wordpress.org, then set this to false.
        hostingWPCOM: false,
        // If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
        // This feature is untested for sites hosted on Wordpress.com
        useACF: true,
        excludedRoutes: ["/*/*/comments", "/yoast/**"],
        normalizer: function({ entities }) {
          return entities;
        },
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              // Class prefix for <pre> tags containing syntax highlighting;
              // defaults to 'language-' (eg <pre class="language-js">).
              // If your site loads Prism into the browser at runtime,
              // (eg for use with libraries like react-live),
              // you may use this to prevent Prism from re-processing syntax.
              // This is an uncommon use-case though;
              // If you're unsure, it's best to use the default value.
              classPrefix: "language-",
              // This is used to allow setting a language for inline code
              // (i.e. single backticks) by creating a separator.
              // This separator is a string and will do no white-space
              // stripping.
              // A suggested value for English speakers is the non-ascii
              // character '›'.
              inlineCodeMarker: null,
              // This lets you set up language aliases.  For example,
              // setting this to '{ sh: "bash" }' will let you use
              // the language "sh" which will highlight using the
              // bash highlighter.
              aliases: {},
            },
          },
        ],
      },
    },
    "gatsby-transformer-json",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 710
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
    },
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
    {
      resolve: "gatsby-plugin-nprogress",
      options: {
        color: config.themeColor
      }
    },
    "gatsby-plugin-sharp",
    "gatsby-plugin-catch-links",
    'gatsby-transformer-sharp',
    "gatsby-plugin-twitter",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: config.siteTitle,
        short_name: config.siteTitle,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: "minimal-ui",
        icons: [
          {
            src: "/logos/logo-192x192.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "/logos/logo-512x512.png",
            sizes: "512x512",
            type: "image/png"
          }
        ]
      }
    },
    {
    resolve: `gatsby-plugin-netlify`,
    options: {
      headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
      allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
      mergeSecurityHeaders: true, // boolean to turn off the default security headers
      mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
      mergeCachingHeaders: true, // boolean to turn off the default caching headers
      transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
      generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
    },
  },
  ]
};

gatsby-node.js

const path = require("path");
const _ = require("lodash");
const fs = require("fs");
const webpackLodashPlugin = require("lodash-webpack-plugin");
const siteConfig = require("./data/SiteConfig");
const {
  createPaginationPages,
  createLinkedPages
} = require("gatsby-pagination");



exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  return new Promise((resolve, reject) => {
    const indexPage = path.resolve("src/templates/index.jsx");
    const postPage = path.resolve("src/templates/post.jsx");
    const tagPage = path.resolve("src/templates/tag.jsx");
    const categoryPage = path.resolve("src/templates/category.jsx");
    const authorPage = path.resolve("src/templates/author.jsx");

    resolve(
      graphql(
        `
        {
          allWordpressPost {
            edges {
              node {
                id
                wordpress_id
                date
                guid
                modified
                slug
                status
                type
                link
                title
                content  
                acf {
                  description
                  title
                  icon
                  link
                  team_photo: image{

                    slug
                    title
                    localFile{
                     childImageSharp{
                      sizes{
                        sizes
                      }
                      resolutions{
                        srcSet
                        src
                      }
                    }
                    }
                    source_url
                    link
                  }

                }
              }
            }
          }
        }
        `
      ).then(result => {
        if (result.errors) {
          /* eslint no-console: "off" */
          console.log(result.errors);
          reject(result.errors);
        }

        // Creates Index page
        createPaginationPages({
          createPage,
          edges: result.data.allWordpressPost.edges,
          component: indexPage,
          limit: siteConfig.sitePaginationLimit
        });

        // Creates Posts
        createLinkedPages({
          createPage,
          edges: result.data.allWordpressPost.edges,
          component: postPage,
          edgeParser: edge => ({
            path: edge.node.slug,
            context: {
              slug: edge.node.slug,
              id: edge.node.id,
            }
          }),
          circular: true
        });



        _.each(result.data.allWordpressPage.edges, edge => {
          // Gatsby uses Redux to manage its internal state.
          // Plugins and sites can use functions like "createPage"
          // to interact with Gatsby.
          createPage({
            // Each page is required to have a `path` as well
            // as a template component. The `context` is
            // optional but is often necessary so the template
            // can query data specific to each page.
            path: `/${edge.node.slug}/`,
            component: slash(pageTemplate),
            context: {
              id: edge.node.id,
            },
          })
        })*/
      })
    );
  })
};

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === "build-javascript") {
    config.plugin("Lodash", webpackLodashPlugin, null);
  }
};

1 个答案:

答案 0 :(得分:1)

Workaroud限制并发下载

“ GATSBY_CONCURRENT_DOWNLOAD = 5个gatsby开发”

也适用于gatsby构建, 来自this