php - 替换重复的 html php 仅图像和文本更改

Question

我的投资组合网站多年来一直运行良好，但我希望优化大量重复的 HTML。它正在成为一个巨大的列表(lazyload 上最多 150 张图像)。我假设我应该使用 PHP，但我的知识很少，不知道从哪里开始(搜索了很多)。我正在使用 Atom。

这是现在的链接:http://www.daynacasey.com/

我有很多部分，其中我有文本 + 缩略图，它们通过 CSS 悬停。我想优化的事情:– 有没有办法生成“imagetotal”div？唯一改变的是图像标题。如果是这样，如何调用每个图像？– 我重复缩略图和悬停图像一样，有没有办法调用“相同图像”？我宁愿预加载悬停也不愿使用较小的缩略图。– 有生成替代文本的方法吗？在部分中有相似的文本。

    <section id="#one" class="project sections">
    <div class="text">
    Lorum ipsum
    </div>

    <div class="leftimages">

       <div class="imagetotal">
          <img src="placholder.jpg" data-original="/imgs/ONE/image.jpg" class="hover lazy" alt="alttext"/>
          <div class="enlarge enlargehover">
          <img data-original="/imgs/ONE/image.jpg" alt="alttext" >
          </div>
       </div>

       <div class="imagetotal">
          <img src="placholder.jpg" data-original="/imgs/ONE/image2.jpg" class="hover lazy" alt="alttext"/>
          <div class="enlarge enlargehover">
          <img data-original="/imgs/ONE/image2.jpg" alt="alttext" >
          </div>
       </div>

    </div>  
    </section>

CSS

    .leftimage img {max-height: 100%; width: auto; max-width: 100%; height: auto;}

    .enlargehover{
    position: fixed;
    top: 0px;
    left: 300px;
    display: none;
    margin:  1vw 3%;
    height: 98%;
    z-index: 8;
    } 

    .imagetotal a {display: block!important;}
    .imagetotal:hover .enlarge {display: block!important;}

非常感谢。

Answer 1

HTML5 带有 <template>元素。一个小例子应该在原生 javascript 的帮助下解释用法。

<section id="one">

</section>
<template id="imagetotal">
    <div class="imagetotal">
        <img src="" data-original="" class="hover lazy" alt="">
        <div class="enlarge enlargehover">
            <img data-original="" alt="">
        </div>
    </div>
</template>
<script>
    // array with your image data
    var data = [
        {
            src : 'placeholder.jpg',
            data : '/imgs/ONE/image.jpg',
            alt : 'bla',
        }
    ];
    if ('content' in document.createElement('template')) {

        // get all needed dom elements
        var section = document.getElementById('one'),
            template = document.getElementById('imagetotal'),
            img = template.querySelector('div.imagetotal > img'),
            enlargeimg = template.querySelector('div.enlarge > img');

        data.forEach(function(element) {
            // set template data
            img.src = element.src;
            img.dataset.original = element.data;
            img.alt = element.alt;

            enlargeimg.dataset.original = element.data;
            enlargeimg.alt = element.alt;

            // clone the template content and append it to the dom
            let clone = document.importNode(template.content, true);
            section.appendChild(clone);
        });
    }
</script>

有关 HTML5 元素的详细信息，请查看 https://developer.mozilla.org/de/docs/Web/HTML/Element/template . all modern browsers 广泛支持模板元素.对于 Internet Explorer 11，有很好的 polyfill，因此模板标签可以用于这个旧浏览器。