如何剪切菜单代码,这样我就不必在每个页面上重复它

问题描述 投票:0回答:1

如何剪切菜单代码,这样我就不必在每个页面上重复它。我希望每个页面上都包含 header.html 和 footer.html 帽子,这样我就不必在每个页面上重复菜单代码。这只是因为如果我想更改菜单,我必须将其复制到每个页面......

我对 CSS 和 html 很陌生,所以我还没有尝试过任何东西。由于我的技能水平,这需要有点简单。

php html css include
1个回答
0
投票

当然,为每个页面中包含的页眉和页脚使用单独的文件是一种常见且有效的做法。您可以使用 HTML 以及一些 PHP 或 JavaScript 来实现此目的。这是一个使用 PHP 的 include 函数的简单示例:

1.创建 header.html: 该文件将包含您的标题代码,例如菜单和您希望显示在每个页面顶部的任何其他内容。

<!-- header.html -->
 <header>
  <nav>
   <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <!-- Add other menu items -->
   </ul>
  </nav>
</header>

2.创建footer.html: 该文件将包含您的页脚代码,例如版权信息、社交媒体链接等。

<!-- footer.html -->
 <footer>
  <p>&copy; 2023 Your Website. All rights reserved.</p>
 </footer>

3.创建您的个人页面: 现在,您将在您的个人 HTML 页面(例如 home.html、about.html)中包含这些文件。

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <!-- Include CSS or other meta tags -->
</head>
<body>
    <?php include 'header.html'; ?>

    <!-- Main content of the page -->
    <h1>Welcome to the Home Page</h1>
    <!-- Other content -->

    <?php include 'footer.html'; ?>
</body>
</html>

注意:如果您的服务器不支持 PHP,您可以使用 JavaScript 或其他服务器端技术实现类似的结果。

这样,对 header.html 或 footer.html 所做的任何更改都会自动反映在包含它们的所有页面上,从而避免在每个页面上重复菜单代码。请记住在根据您的目录结构包含这些文件时确保正确的文件路径。

如果您纯粹使用前端技术并且无法访问服务器端脚本,您可能会考虑研究静态站点生成器或基于 JavaScript 的模板引擎,例如 Handlebars.js 或 Mustache.js 以获得类似的模块化功能接近。

© www.soinside.com 2019 - 2024. All rights reserved.