将单页应用程序集成到WordPress

Question

我有很多基本的单页应用程序，这些应用程序具有html，css，js文件，我想将它们发布在wordpress上。

我可以像外部网站一样添加它们，但是当我使用它时，我必须将所有静态部分（页眉，菜单，页脚等）添加到app.html文件中。我必须为每个应用程序执行此操作。这不是可持续的，而且肯定是好的解决方案。这就是为什么我正在寻找某种方法来像其他页面一样在wp中的菜单之后添加此页面。

我想给您文件夹层次结构以具体说明问题。

  

  
• || -应用
  
• || -|| -app1
  
• || -|| -|| -app1.html
  
• || -|| -|| -app1.js
  
• || -|| -|| -app1.css
  
• || -|| -|| -img
  
• || -|| -|| -|| -img11.png
  
• || -|| -|| -|| -img12.png
  

---

  

  
• || -|| -app2
  
• || -|| -|| -app2.html
  
• || -|| -|| -app2.js
  
• || -|| -|| -app2.css
  
• || -|| -|| -img
  
• || -|| -|| -|| -img21.png
  
• || -|| -|| -|| -img22.png
  

如果可能的话，我想将apps文件夹添加到wp并使用管理面板创建页面。

我尝试了此操作（仅添加了一个应用程序），它调用html，但是js和css无法正常工作。 （js和css文件在html文件中链接）

<?php /* Template Name: App1 */ ?>
<?php get_header(); ?>

<?php include 'apps/app1/app1.html'?>

<?php get_footer(); ?>

---

编辑：当我将css和js代码直接内部集成到html文件时，系统正常运行。但是，当我尝试从外部添加它们时，系统无法正常工作。

<link rel="stylesheet" href="app1.css">
<script src="app1.js"></script>

当我检查代码（CTRL + Shift + I）时，我发现了问题，该如何解决此问题？

<link rel="stylesheet" href="/app1.css">

Answer 1

您需要使用..来指示父目录：

尝试一下

<?php /* Template Name: App1 */ ?>
<?php get_header(); ?>

<?php include '../apps/app1/app1.html'?>

<?php get_footer(); ?>

Answer 2

在 wp-content 文件夹内直接

安装 apps 文件夹

在.html文件中，我对此进行了更改；

if(!lists.All(list => list.Count == maxSize))
{
    //do some stuff
}

有了这个

<link rel="stylesheet" href="app1.css">
<script src="app1.js"></script>

和Php文件

<link rel="stylesheet" href="/wp-content/apps/app1/app1.css">
<script src="/wp-content/apps/app1/app1.js"></script>

这可以解决问题，但是从维护的角度来看，我仍然不确定这是否是合理的解决方案。