使用 PHP 或 JS 在我的所有页面中加载相同的模板，然后使用页面特定信息更新加载的模板

Question

我有一个包含一些基本 HTML 标记的模板文件。使用 Javascript，这个模板文件被加载到每个页面上。如何使模板删除“演示标题”并根据其所在页面将其替换为“联系我们”或“信息”？ ...我知道解决方案需要某种类型的变量，但不知道如何实现。

---

为简单起见，我有 3 个 HTML 页面。

• 联系我们.html
• 信息.html
• title-image-description.html

---

我创建了一个名为 title-image-description.html 的模板文件，其中包含标题区域、图像区域和描述区域的 HTML 标记。

title-image-description.html

<div class="title">Demo Title</div>
<div class="image">Demo Image</div>
<div class="description">Demo Description</div>

---

我创建了 contact-us.html 和 information.html，其中包含将在这些页面上加载 title-image-description.html 的 JavaScript AJAX。

contact-us.html & information.html

<div id="title-image-description.html"></div>

<script>
$(function(){$("#title-image-description").load("title-image-description.html");});
</script>

---

问题： 页面标题、图片和描述没有更新。

预期结果

• contact-us.html 显示标题“联系我们”，描述“欢迎联系我们”
• information.html 显示标题“信息”，描述“欢迎使用信息”

实际结果

• contact-us.html 显示标题“Demo Title”，描述“Demo Description”
• information.html 显示标题“Demo Title”，描述“Demo Description”

---

我知道我需要：

• 添加：contact-us.html 和 information.html 上的 3 个变量（但如何？）

  • Var page-title = "联系我们"
  • Var page-image = "/Contact-Us.png"
  • Var page-title = "欢迎联系我们"

• 更新：title-image-description.html

  • 将“Demo Title”替换为“”
  • 将“Demo Image”替换为“”
  • 将“Demo Description”替换为“”

问题

1. 我应该使用 PHP 还是 JS 来创建变量。
2. 我应该使用什么代码？

Answer 1

我能够使用 JavaScript 解决这个问题。我不确定 JavaScript 是否是解决这个问题的最佳方案，但下面的代码可以工作。

1. 更新模板文件

   title-image-description.html

   <div id="title"></div>
   <div id="image"></div>
   <div id="description"></div>
   

2. 使用此代码更新页面。 contact-us.html & information.html

   <div id="title-image-description.html"></div>
   
   <script>
   $(function(){
     $("##title-image-description").load("title-image-description.html", function() {
       $("#title").text('Contact Us');
       $("#image").text('/image.png');
       $("#description").text('Welcome to Contact Us');
     });
   });
   </script>