Question

我正在创建一个网站，并为我的所有页面都有一个模板，但是我的页面中有2/10是相同内容的不同版本。一个是图片库，当您点击并成像弹出窗口时会显示所有图像信息。第二个是具有完全相同信息的弹出窗口的完全相同的图像的列表视图。

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

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

这是Gallery 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页，你应该开始考虑某种框架来帮助解决这个问题以及你可能遇到的其他问题。

没有必要重新发明轮子！

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

1 个答案: