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

Question

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

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

...对于位于 'project-3' 的页面，我已经使用 Gatsby 构建了一个页面，并希望将其托管在那里。其他项目将保留为 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 ...但我不确定它如何转化为 Gatsby。对此的任何帮助将不胜感激！ :)

Answer 1

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

WordPress 使用 "virtual" 个子目录，因此 /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 文件。

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

How to deploy a Gatsby site to a Wordpress sub-directory?

wordpress

reactjs

gatsby