更新的问题:
我知道我之前问过不同的问题,但实际上这就是问题所在。我只需要将 WordPress 和 Angular 放在一起,这样每当我进入/wp-admin/时,我都会进入 WordPress 管理,而每当我去其他任何地方时,它都会呈现 Angular 应用程序。这样做的问题是:
- 如何删除 WordPress 模板并始终加载 Angular list 文件? (例如index.html)
- 如何创建 list
.php
文件,但加载 Angular 应用程序? - 放置所有 Angular 文件以及
/dist
的位置文件夹?
老问题:
使用.htaccess如何重写root以使用子文件夹,但仍然允许/wp-admin?
我已经设置了 WordPress,并在其根目录中上传了我的 Angular 应用程序,该应用程序的路径为 /angular/dist/spa
。我需要将重写规则添加到 .htaccess
所以任何 url 都会直接进入该子文件夹,但是 /wp-admin/*
.
无法找到完全有效的解决方案,它要么允许整个应用程序工作,要么允许管理面板工作。
这是我的默认值 .htaccess
:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
如果您建议任何其他想法如何在 WordPress 中使用 Angular 应用程序(无需额外插件strong>),那也会很有帮助,因为这是我发现的唯一方法,但感觉还有更好的方法。
最佳答案
首先,您应该将文件放入 WordPress 主题中。其中有 index.php
文件,因此您的 Angular list 代码 (index.html) 会出现在那里,但具有指向 Assets 的正确链接。
例如,ng build --prod
之后的样子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.b9ab77151b21dce46d94.css" />
</head>
<body>
<app-root></app-root>
<script src="runtime.e227d1a0e31cbccbf8ec.js" defer></script>
<script src="polyfills.a5e98176150f229fcd04.js" defer></script>
<script src="scripts.c5648532e9a6a23906a1.js" defer></script>
<script src="main.2965e15bb04f185e6e09.js" defer></script>
</body>
</html>
上面代码的问题是文件在文件名后有随机散列,并且由于我们要将文件放入 WordPress 主题中,因此它们将被放置在 /wp-content/themes/%主题名称%/dist/
.
我们需要删除 angular.json
中的哈希:
...
"outputHashing": "none",
...
并手动添加 Assets 的正确路径或将其添加到构建命令ng build --prod --deploy-url/wp-content/themes/%ThemeName%/dist/
。
所以我们的 index.html
看起来像:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/wp-content/themes/%ThemeName%/dist/styles.css" />
</head>
<body>
<app-root></app-root>
<script src="/wp-content/themes/%ThemeName%/dist/runtime.js" defer></script>
<script src="/wp-content/themes/%ThemeName%/dist/polyfills.js" defer></script>
<script src="/wp-content/themes/%ThemeName%/dist/scripts.js" defer></script>
<script src="/wp-content/themes/%ThemeName%/dist/main.js" defer></script>
</body>
</html>
完美!现在我们需要将其移至 WordPress 主题 index.php
:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title>Title</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/wp-content/themes/%ThemeName%/dist/styles.css" />
</head>
<body <?php body_class(); ?>>
<app-root></app-root>
<script src="/wp-content/themes/%ThemeName%/dist/runtime.js" defer></script>
<script src="/wp-content/themes/%ThemeName%/dist/polyfills.js" defer></script>
<script src="/wp-content/themes/%ThemeName%/dist/scripts.js" defer></script>
<script src="/wp-content/themes/%ThemeName%/dist/main.js" defer></script>
</body>
</html>
如您所见,我们用 WordPress 函数替换了一些部分,例如 language_attributes
、bloginfo('charset')
、body_class
。
好的。唯一的问题是 WordPress 并不总是加载 index.php
,有时它会加载 front-page.php
、404.php
等.所以我们需要强制WordPress始终加载index.php
。我们可以通过将其添加到 WordPress 主题的 function.php
文件来做到这一点:
add_filter('template_include', function ($template) {
$template = get_query_template('index');
return $template;
});
现在我们需要做的就是将 /dist
文件夹与 index.php
文件一起放入主题中。而且它有效!
如果你想在服务器上编译 Angular
让我们在主题中创建 Angular 文件夹并将所有 Angular 文件放入其中。如果我们运行 ng build --prod ,它将编译所有文件并将/dist
放入angular
文件夹中,但我们需要将其放入< strong>外部,因此可以通过路径 /wp-content/themes/%ThemeName%/dist/
访问它。为此,我们需要向 angular.json 添加一项设置:
...
"outputPath": "../dist",
...
太棒了!我们编译的 /dist
文件夹将放置在当前 (Angular
) 文件夹之外,并且可供我们的 index.php
文件访问!
我刚刚描述了我如何让整个事情发挥作用,希望对其他人有所帮助。
关于angular - 如何在同一域上使用 Angular 和 WordPress 作为 headless 服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62637322/