首页 > 解决方案 > 如何在不复制/粘贴的情况下在多页网站上的 head 标签内生成相同的 HTML?

问题描述

我已经用谷歌搜索了这个问题,但到目前为止还没有找到答案,所以我想我会在这里问。我想知道是否有任何选项可以在 HTML 中为多页网站的头部标签中重新创建元数据,而无需为每个新页面复制/粘贴它。我在这里看到了使用 jQuery 或 PHP 加载预定义的导航和跨网页重复的标题菜单的示例,但是头部的信息呢?我希望使用像 nodejs 这样的东西来做到这一点,但我还没有看到一个关于如何做到这一点的例子。

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <!-- saved from url=(0014)about:internet -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
    <script src="_js/jquery-3.3.1.min.js"></script>
    <script src="_js/includes.js"></script>
    <!--[if lt IE 9]>
    <script src="HMTL5Shiv\html5shiv.js"></script>
    <![endif]-->
    <title>Home</title>
</head>
<body>
    <header class="topHeader">
        <!-- Header loaded from separate file -->
    </header>
    <div class="navigation">
        <!-- Navigation menu loaded from separate file-->
    </div>
</body>
</html>

标签: phphtml

解决方案


即使使用 head 标签中的信息,PHP 也可用于执行此操作。请务必将文件命名为 .php 例如,您将有一个 head.php 文件,该文件将仅包含 head 标签以及它们之间的任何内容,并且在文件开头的 index.php 文件中您<?php include_once "head.php" ?>只需编写请记住,您需要提供所包含文件的准确路径(此示例适用于文件位于同一文件夹中的情况),而不是粘贴整个代码块。


推荐阅读