Question

我是网络开发的新手，我有一个问题..和一个（坏）解决方案：我想在我的页面中导航。页面具有相同的布局。唯一的区别是div容器。示例代码： home.html的

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
    <div id="outer" >
        <div id="inner">
            <div id="left" >
            <div id="menu3">
        <ul>

            <li><a href="home.html" title="Link 1">Home</a></li>
            <li><a href="about.html" title="Link 2">About</a></li>
        </ul>
</div>

        </div>
        <div id="content" ><h2>Startseite</h2>
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        </div><!-- end content -->
        </div><!-- end inner -->
    </div><!-- end outer -->
</div><!-- end container -->
</body>
</html>

about.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
    <div id="outer" >
        <div id="inner">
            <div id="left" >
            <div id="menu3">
        <ul>

            <li><a href="home.html" title="Link 1">Home</a></li>
            <li><a href="about.html" title="Link 2">About</a></li>
        </ul>
</div>

        </div>
        <div id="content" ><h2>Startseite</h2>
        <p>
              **OTHER CONTENT**
        </p>
        </div><!-- end content -->
        </div><!-- end inner -->
    </div><!-- end outer -->
</div><!-- end container -->
</body>
</html>

这很好用。但是有很多代码重复，当我有15页时会让我遇到麻烦：D 那么......通常的做法是什么？也许是一些Ajax voodo？！

请帮助

Answer 1

使用服务器端包含（SSI）

如果您不需要其所有功能，则无需在服务器上安装其他软件。 PHP不是任何Web服务器的标准。

就个人而言，使用PHP来减少HTML重复相当于使用M198榴弹炮击落蚊子。

另一方面，SSI在两个使用最广泛的Web服务器软件（Apache，IIS）中得到支持，其使用相当简单。

只需将扩展程序.shtml或.shtm用于您的文件即可。将评论内容放在单独的文件中，然后在页面文件中使用以下内容包含不同的部分：

<!--#include virtual="common/header.part.shtm" -->
<h2>Startseite</h2>
<p>
   **OTHER CONTENT**
</p>
<!--#include virtual="common/footer.part.shtm" -->

同样，所有可用的主要网络服务器软件都支持此功能，并且不需要安装额外的CGI模块，这与PHP不同。

注意： Apache要求在Web服务器上启用mod_include。它的二进制文件包含在每个二进制Apache发行版中。

由于以下原因，您绝对不希望在这种情况下使用AJAX：

对于使用没有JavaScript支持的浏览器（嵌入式设备，高安全性工作场所中的台式计算机等），您的页面将无法读取。
搜索引擎无法（至今）正确解释JavaScript DOM更改，并且无法正确抓取您的网页。

SSI是执行此服务器端的最简单方法。

Answer 2

使用PHP

您可能会尝试使用支持包含的语言，例如php。如果你做了大量的数据，那么即使你认为php很慢，对初学者也很有用。

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

这会将nav.php文件插入当前页面。

nav.php文件不需要<html>或body只需使用include就像直接插入代码一样。通过在文件中插入包含，您可以编辑包含文件的单个位置的数据。

要让php工作，请尝试本教程http://inteldesigner.com/2009/getting-started/setting-up-a-testing-server

如何有效地模拟重复的HTML片段？

2 个答案: