Question

我正在建立一个小型的个人学术网站，它有多个页面，具有共同的结构。

问题：有没有办法不重复每个html文件中的标题和菜单（或导航栏）的代码？如果我可以将标题和菜单的代码放在另一个文件中，例如， header.html并撰写\input{header.html}之类的语句（使用TeX语法）将文件包含到index.html和publications.html中。

以下是网站的示例。

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>
                &nbsp&nbsp
                <a href="publications.html">Publications</a>
                &nbsp&nbsp
                <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的内容：

<!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>
                &nbsp&nbsp
                <a href="publications.html">Publications</a>
                &nbsp&nbsp
                <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;
    }

Answer 1

仅使用HTML和/或CSS，不，你不能这样做，因为这个要求超出了他们的规范（读作'目的'）。

仍然有两种方法：

如果您使用的是服务器端语言（例如PHP），您可以利用库语法将the case of PHP内的其他文件（include()）中的内容包含在内，或{{3 }}
您可以使用javascript或类似jQuery的库来获取其他页面的输出（内容），并将它们注入到指定位置的页面中。这可以像使用jQuery的load()方法Server Side Includes

Answer 2

我面对同样的事情。然后，我创建了一个用于存储导航栏html的新文件。

我创建了一个navbar.html文件，其中包含我的所有导航条形码。然后，在您想要导航栏的主html文件中，只需使用jquery包含此文件。

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

然后在您想要导航栏的位置，只需添加以下行：

<div id="navigation"></div>

Answer 3

@Abhinav提供的解决方案只是部分正确。它不会成功加载chrome，因为navbar.html的类型为file：//而不是http：//，因为jQuery加载函数需要。请尝试以下方法：

$(document).ready(function() {
    $('.navigation').load('navbar.html');
});

并使用与之前显示的类似div方法在您的基本html文件中引用：

<div class="navigation"></div>

具有通用标题和导航栏的多个网页

3 个答案: