使用PHP或JS加载通用模板并替换页面专属内容的实现问题咨询

1. 技术选型说明 #

两种技术都可以实现需求，可根据项目现状选择：

• 仅静态HTML站点、无后端服务的情况下优先用JS实现，基于你现有的jQuery加载逻辑改造，改造成本最低
• 已有PHP运行环境、想要避免前端内容替换闪烁的情况下，用PHP实现性能更优

2. 具体实现代码 #

方案一：JS实现（适配你当前的技术栈，推荐） #

首先修正你原有代码的问题：容器id和jQuery选择器不匹配，导致模板加载可能异常，我们统一把容器id改为template-container。

步骤1：修改业务页面代码

以contact-us.html为例，代码如下：

<!-- 模板挂载容器 -->
<div id="template-container"></div>

<script>
// 定义当前页面专属配置
const pageConfig = {
  title: "Contact Us",
  image: "/images/contact-banner.jpg", // 替换为实际图片路径
  description: "Welcome to Contact Us"
}

$(function(){
  // 加载模板，加载完成后执行内容替换
  $("#template-container").load("title-image-description.html", function() {
    const $template = $(this);
    $template.find('.title').text(pageConfig.title);
    $template.find('.image').html(`<img src="${pageConfig.image}" alt="${pageConfig.title}">`);
    $template.find('.description').text(pageConfig.description);
  });
});
</script>

information.html只需修改pageConfig内的对应值即可，其余代码不变。

步骤2：模板文件无需修改

你现有的title-image-description.html代码不用做任何调整，JS会自动替换默认占位内容。

方案二：PHP实现（服务端渲染场景用） #

步骤1：修改文件后缀

将title-image-description.html、contact-us.html、information.html的后缀统一改为.php。

步骤2：修改模板文件title-image-description.php代码

<div class="title"><?php echo htmlspecialchars($pageTitle); ?></div>
<div class="image"><img src="<?php echo htmlspecialchars($pageImage); ?>" alt="<?php echo htmlspecialchars($pageTitle); ?>"></div>
<div class="description"><?php echo htmlspecialchars($pageDescription); ?></div>

步骤3：修改业务页面代码

以contact-us.php为例，代码如下：

<?php
// 定义当前页面专属配置
$pageTitle = "Contact Us";
$pageImage = "/images/contact-banner.jpg"; // 替换为实际图片路径
$pageDescription = "Welcome to Contact Us";
// 直接引入模板，服务端自动渲染内容
include 'title-image-description.php';
?>

information.php只需修改顶部三个变量的取值即可。

内容的提问来源于stack exchange，提问作者JamesReed68