如何將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網站。 這篇中篇文章展示了如何使用香草React ... https://medium.com/@ReactionGears/react-app-inside-a-wordpress-page-or-post-4c7d38181b3d ...但我不是確定如何翻譯成蓋茨比。 任何幫助，將不勝感激！ :)

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文件。