如何避免多个 html 文件中的重复信息？答案

【问题标题】：How can I avoid repetitive information in multiple html files?如何避免多个 html 文件中的重复信息？
【发布时间】：2014-01-07 08:46:52
【问题描述】：

我正在制作一个网站，并且我的所有页面都有一个模板，但我 2/10 的页面是同一事物的不同版本。一个是图片库，当您单击并成像时，会出现一个包含所有图像信息的弹出窗口。第二个是完全相同图像的列表视图，其中包含完全相同信息的弹出窗口。

在您单击链接之前，弹出的信息是“隐藏的”，并且是使用 div 完成的。这使得代码很长，当我对一页上的信息进行更改时，我必须在另一页上进行更改。不过，我不想将此信息添加到模板中，因为那样我会使所有页面都变得非常长。

有什么方法可以获取信息并将其放入单独的 html 文件中，然后让 List 和 Gallery html 文件都访问单独的 html 文件？或者有没有其他方法可以减少重复？

这是图库 html 文件的示例：

<ol id="selectable">
    <a href="#" data-reveal-id="1">
        <li class="ui-state-list"><b>CT8002</b>
            <img src="IMG">
        </li>
    </a>
</ol>

这是两个页面访问的信息：

<div id="1" class="reveal-modal">
    <h1>CT8002</h1>
    <p>Product information goes here.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

CSS：

#selectable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    width: 900px; 
}

.reveal-modal { 
    visibility: hidden;
    top: 100px; 
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background: #EEE url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4); 
}

【问题讨论】：

您是否使用任何服务器端技术？或者这只是静态 HTML？大多数 Web 应用程序框架都提供了包含来自不同文件的 HTML 位的功能，使用静态 HTML，我认为这是不可能的。看看this question
使用静态 html，可以使用 ajax，但使用服务器端语言要容易得多。
为您的服务器使用 php 包含或等效项。
Include another HTML file in a HTML file的可能重复

标签： javascript jquery html css

【解决方案1】：

您是否使用任何类型的框架？如果你不是，那么你可以探索切换到 PHP，然后使用include 来处理所有相似的部分。

所以你的代码可能看起来像这样：

<ol id="selectable">
    <a href="#" data-reveal-id="1">
        <li class="ui-state-list"><b>CT8002</b>
            <img src="IMG">
            </li>
        </a>
</ol>
<? include 'gallery.php' ?>

会产生（假设 gallery.php 有您发布的第二部分代码）：

<ol id="selectable">
    <a href="#" data-reveal-id="1">
        <li class="ui-state-list"><b>CT8002</b>
        <img src="IMG">
        </li>
    </a>
</ol>

<div id="1" class="reveal-modal">
    <h1>CT8002</h1>
    <p>Product information goes here.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

这是一种快速而肮脏的方式，但对于小型网站来说，这将是最佳解决方案。

如果您的网站超过 10 或 15 个页面，您应该开始寻找某种框架来帮助解决这个问题以及您可能遇到的其他问题。

没有必要重新发明轮子！

【讨论】：