个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
更新的问题:
我知道我之前问过不同的问题，但实际上这就是问题所在。我只需要将 WordPress 和 Angular 放在一起，这样每当我进入/wp-admin/时，我都会进入 WordPress 管理，而每当我去其他任何地方时，它都会呈现 Angular 应用程序。这样做的问题是:
.php文件，但加载 Angular 应用程序？/dist 的位置文件夹？老问题:
我已经设置了 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 应用程序(无需额外插件 )，那也会很有帮助，因为这是我发现的唯一方法，但感觉还有更好的方法。
最佳答案
首先，您应该将文件放入 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 文件放入其中。如果我们运行 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/
24
4
0
这是我的本地域名 http://10.10.1.101/uxsurvey/profile/dashboard 在 Controller 中，我为用户列表设置了一个操作 redirect(control
要处理 Canonical URL，最佳做法是执行 301 重定向还是更好地为 www 和非 www 域使用相同的 IP 地址？ 例如: 想要的规范 URL/域是 http://example.com
1 内网基础 内网/局域网（Local Area Network，LAN），是指在某一区域内有多台计算机互联而成的计算机组，组网范围通常在数千米以内。在局域网中，可以实现文件管理、应用软件共享、打印机
1 内网基础 内网/局域网（Local Area Network，LAN），是指在某一区域内有多台计算机互联而成的计算机组，组网范围通常在数千米以内。在局域网中，可以实现文件管理、应用软件共享、打印机
我想创建一个 weblogic 集群，其中有两个托管服务器，每个服务器在物理上独立的远程计算机上运行 根据weblogic文档 All Managed Servers in a cluster mus
我正在运行 grails 3.1.4，但在创建允许我将多个域对象绑定(bind)到其他几个域对象的模式时遇到了问题。作为我正在尝试做的一个例子: 我有三个类(class)。书籍、作者和阅读列表。 作者
我试图使用@count函数来根据它获取数据，但是在没有崩溃报告的情况下它以某种方式崩溃了。 这是代码 class PSMedia: Object { @objc dynamic var id
有谁知道是否有办法只输入字母字符而不输入数字？我想过这样的事情 CREATE DOMAIN countryDomain AS VARCHAR(100) CHECK( VALUE ??? );
我的代码: const checkoutUrl = 'https://example.com/checkout/*' window.onload = startup() function st
一些不是我编写的应用程序，也不是用 PHP 编写的，它为域 www.example.com 创建了一个 cookie。 我正在尝试替换该 cookie。所以在 PHP 中我做到了: setcookie
什么是 oauth 域？是否有任何免费的 oauth 服务？我可以将它用于 StackApps registration 吗？ ？我在谷歌上搜索了很多，但找不到答案。 最佳答案 这是redirect_
自从 In October 2009, the Internet Corporation for Assigned Names and Numbers (ICANN) approved the cre
我使用 apache 作为我的应用程序 Web 服务器的代理，并希望即时更改与 sessionid cookie 关联的域名。 该cookie有一个与之关联的.company.com域，我想使用apa
我只想托管一个子域到cloudflare。我不想将主域名的域名服务器更改为他们的域名服务器。真的有可能吗？ 最佳答案 是的，这是可能的，但是需要通过CloudFlare合作伙伴进行设置，或者您需要采用
When using socket in the UNIX domain, it is advisable to use path name for the directory directory m
想象两个共享一个域类的 Grails 应用程序。也许是 Book 域类。 一个应用程序被标识为数据的所有者，一个应用程序必须访问域数据。类似于亚马逊和亚马逊网络服务。 我想拥有的应用程序将使用普通的域
我有一个包含字段“URL”的表单。第一部分需要用户在文本框中填写。第二部分是预定义的，显示在文本框的右侧。 例如，用户在文本框中输入“test”。第二部分预定义为“.example.com”。因此，总
如果我要关闭并取消分配 azure 中的域 Controller ，从而生成新的 vm Generationid，我需要采取哪些步骤来恢复它？ 最佳答案 what steps do I need to
我想尝试使用 Azure 作为托管提供商(我有一个域)。我读过那篇文章https://learn.microsoft.com/en-us/azure/app-service-web/web-sites
所以.... 我想知道是否有人可以在这方面协助我？ 基本上，我已经创建了一个自托管的Docker容器，用作构建代理(Azure DevOps) 现在，我已经开始测试代理，并且由于我们的放置文件夹位于W
我是一名优秀的程序员,十分优秀！