如何将Gatsby站点部署到Wordpress子目录？

Question

我有一个Wordpress网站的'portfolio‘子目录，所以网站结构看起来像这样…

www.sitename.com/portfolio/project-1
www.sitename.com/portfolio/project-2
www.sitename.com/portfolio/project-3

在‘...and -3’的页面，我已经和盖茨比建立了一个页面，并希望将其托管在那里。其他项目将保留为Wordpress页面，但只有'project-3‘页面将使用Gatsby构建。如何做到这一点？我想它包含了'gatsby-config.js‘中的'pathPrefix’，但是一旦我建立了我的页面，我怎么把它放到我的Wordpress站点上呢？这篇Medium文章展示了如何使用vanilla React...我不确定它怎么翻译成https://medium.com/@ReactionGears/react-app-inside-a-wordpress-page-or-post-4c7d38181b3d ...but。在这方面的任何帮助都将不胜感激！:)

Answer 1

@fabian-schultz的评论是正确的，您可以使用pathPrefix构建Gatsby站点，然后将该站点放入子目录中。

WordPress使用“虚拟”子目录，因此/portfolio不会存在于您的文件系统中。您可以将项目组合目录更改为/portfolio-project-1 (因此是单个文件夹而不是嵌套文件夹)，也可以创建/portfolio目录。如果这样做，则需要从/目录复制index.php文件，然后更改包含路径。

您的portfolio/index.php文件可能如下所示：

<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/../wp-blog-header.php' );

最后一行上的/..告诉WordPress在上面的文件夹中搜索wp-blog-header.php文件。