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

Question

我正在制作一个网站，并为我的所有页面设置一个模板，但我的页面中有 2/10 是同一内容的不同版本。一个是图片库，当您单击并成像时，会出现一个包含所有图像信息的弹出窗口。第二个是具有完全相同信息弹出窗口的完全相同图像的 ListView 。

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

有什么方法可以获取信息并将其放入单独的 html 文件中，然后让列表和画廊 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); 
}

Answer 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 个页面，您应该开始寻找某种框架来帮助解决这个问题以及您可能遇到的其他问题。

没有必要重新发明轮子!