如何使用 HTML 将菜单文件包含并链接到每个网页中？

Question

我研究了一些关于 php、javascript、iframe 等的答案，但我尝试了几个，但没有一个有效。我是 HTML 编码的新手……和一般的编码！

<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?) 

<iframe src="page.html"></iframe> 

或对象...都将菜单放在一个愚蠢的小滚动框中。

我想在我的页面上运行我的菜单，就好像它是 C 中的一个函数一样。我可以在其中包含它，它就在那里，或者只是链接它。

感谢您的帮助！ 瑞恩

网页文件：biology.html 菜单文件：menu.html

<div class="container">
 			<a href="index.html"><img src="homeicon.jpg" width="50" alt="Home"></a>
 	<div class="redhover">
				<div class="dropdown">
  					<button class="dropbtn">GCSEs</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Chemistry</a>
    					<a href="biology.html">Biology</a>
  					</div>
  				</div>
				<div class="dropdown">
  					<button class="dropbtn">A-Levels</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Chemistry</a>
    					<a href="biology.html">Biology</a>
  					</div>
				</div>
				<div class="dropdown">
  					<button class="dropbtn">University</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Telecommunications</a>
    					<a href="biology.html">Electronic Engineering</a>
  					</div>
  				</div>
				<div class="dropdown">
  					<button class="dropbtn">More</button>
  					<div class="dropdown-content">
      					<a href="biology.html">About me</a>
    					<a href="https://www.youtube.com/channel/">Youtube</a>
  					</div>
				</div>
	</div>
</div>

Answer 1

您可以使用 php 在其他页面上包含文件。以下是一些帮助您入门的示例代码：

<?php
    require_once('menu.php');
?>

您可以将其适当地放入您的 HTML 页面中，但是您必须确保 php 可以在您的服务器上处理，并且包含 php 代码的文件必须以 .php 扩展名结尾。

还有其他通过 php 包含文件的方法，请参见此处： http://php.net/manual/en/function.include.php 和 http://php.net/manual/en/function.require.php

Answer 2

编辑 - 我不是这种方法的忠实拥护者，但它适用于 Github 页面。

创建一个名为 nav.js 的文件，将您的菜单定义为 js 变量，然后使用 javascript 将其插入到每个页面上创建的空 div 中。这种方式来更新你的导航，你只需要编辑 nav.js 不漂亮，但它可以工作

nav.js

var navigation = "<nav>";
navigation +=   "<ul>";
navigation +=   "<li>Home</li>";
navigation +=   "<li>About</li>";
navigation +=   "</ul>";
navigation +=   "</nav>";

document.getElementById("navigation").innerHTML = navigation;

其他页面

<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>

小提琴：https://jsfiddle.net/ze3hLxx8/1/

Answer 3

根据您希望/想要/需要使用的后端技术，有多种方法可以将文件包含到另一个文件中。

PHP

在 php 中最常用的方法是在 php 文件中使用 include 或 require 语句。

在您的特定情况下，您的 biology.html 文件必须转换为 biology.php 文件，然后您可以添加相关代码以包含该文件：

<?php include('menu.php');?>

这个简单的语句会将menu.php 文件中的内容添加到当前页面。如果服务器上不存在 php，这将不会工作，并且显然 不会在没有本地开发的情况下在本地工作环境

require和include的区别可以看官方文档：

• 包括：http://php.net/manual/en/function.include.php
• 要求：http://php.net/manual/en/function.require.php

SSI

另一种方法是使用服务器端包含。要使用 SSI，必须在网络服务器上支持并启用它。要使用 SSI，您需要将扩展​​名从 biology.html 更改为 biology.shtml，然后添加以下语句：

<!--#include file="menu.html" -->

有关服务器端包含的更多信息可以在维基百科上找到：https://en.wikipedia.org/wiki/Server_Side_Includes