具有通用标题和导航栏的多个网页 [英] Multiple webpages with common title and navigation bars
问题描述
我正在制作一个小型的个人学术网站，该网站包含具有相同结构的多个页面.
I'm making a small personal academic website, which has multiple pages with a common structure.
问题:是否可以在每个html文件中不重复标题和菜单(或导航栏)的代码?如果可以将标题和菜单的代码放在另一个文件中，例如 header.html 并编写一个语句，例如 \ input {header.html} (使用TeX语法)，将文件包含在 index.html 中和 publications.html .
Question: Is there a way to not repeat the code for the header and the menu (or navigation bar) in each of the html files? It would be great if I could put the code for the header and menu in another file, e.g. header.html and write a statement such as \input{header.html} (using TeX syntax) to include the file into index.html and publications.html.
下面是网站外观的一个示例.
Below is an example of what the website looks like.
index.html 的内容:
Contents of index.html:
<!DOCTYPE html>
<html>
<head>
<title>The Title</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="header">
<h1>My Name</h1>
</div>
<div id="menu">
<p>
<a href="index.html">Home</a>
  
<a href="publications.html">Publications</a>
  
<a href="contact.html">Contact</a>
</p>
</div>
<div id="content">
<p>
This is my academic webpage.
</p>
<p>
I am a 15th year PhD student in Filmmaking at Mickey's Institute of Technology (MIT).
</p>
</div>
</body>
</html>
publications.html 的内容:
Contents of publications.html:
<!DOCTYPE html>
<html>
<head>
<title>The Title</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="header">
<h1>My Name</h1>
</div>
<div id="menu">
<p>
<a href="index.html">Home</a>
  
<a href="publications.html">Publications</a>
  
<a href="contact.html">Contact</a>
</p>
</div>
<div id="content">
<ol>
<li>Snow White and the Seven Dwarfs, 1937</li>
<li>Pinocchio, 1940</li>
<li>The Reluctant Dragon, 1941</li>
</ol>
</div>
</body>
</html>
stylesheet.css 的内容:
body {font-size: 16px; line-height: 20px; font-weight: light; color: #250517; /*gray*/}
a:link {text-decoration: none; color: #003399; /*blue*/}
a:visited {text-decoration: none; color: #003399; /*blue*/}
a:active {text-decoration: none; color: #003399; /*blue*/}
a:hover {text-decoration: none; color: #003399; /*blue*/}
#header {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:50px;
}
#content {
width:730px;
margin-left:auto;
margin-right:auto;
height:410px;
}
#menu {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-bottom:50px;
clear:both;
}
推荐答案
仅使用HTML和/或CSS，不能，您不能这样做，因为此要求超出了其规范(请阅读用途").
Using just HTML and/or CSS, no, you cannot do this, as this requirement is outside their specifications (read 'purpose').
剩下两种方法:
-
如果您使用服务器端语言(例如PHP)，则可以利用库语法在您可以使用javascript或jQuery之类的库来获取其他页面的输出(内容)，并将它们注入到指定位置的页面中.就像使用jQuery的
load()方法见此处You can use javascript, or a library like jQuery to fetch the output (content) of other pages, and inject them into your page at a specified place. This can be done as easily as using jQuery's
load()method as seen here这篇关于具有通用标题和导航栏的多个网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
