怎么实现HTML复用?

Question

问题：在主页上链接到不同的介绍网页，每个介绍网页都有图片和文字介绍，介绍网页的HTML结构是一模一样的，只是图片和介绍文字不一样，不想重复的复制粘贴应该怎么处理？（图片和介绍都是本地的，静态）有哪位前辈可以提供一下建议？非常感谢！！

Answer 1

建议你用前端模板引擎，常用的有：baiduTemplate(百度)、artTemplate（腾讯）、juicer（淘宝）、jquery template; 个人认为 juicer 比较轻、速度快，用起来也比较简单，下面介绍一下 juicer ：

HTML 代码:

<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
            <li>${it.name} (index: ${index})</li>
        {@/each}
        {@each blah as it}
            <li>
                num: ${it.num} <br />
                {@if it.num==3}
                    {@each it.inner as it2}
                        ${it2.time} <br />
                    {@/each}
                {@/if}
            </li>
        {@/each}
    </ul>
</script>

Javascript 代码:

var data = {
    list: [
        {name:' guokai', show: true},
        {name:' benben', show: false},
        {name:' dierbaby', show: true}
    ],
    blah: [
        {num: 1},
        {num: 2},
        {num: 3, inner:[
            {'time': '15:00'},
            {'time': '16:00'},
            {'time': '17:00'},
            {'time': '18:00'}
        ]},
        {num: 4}
    ]
};

var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);

Answer 2

这工作后端做简单，前端的话，后边内容相似的用一个页面就够了，可以用一个对象把数据全存里边，类似这样

[{"img_url":"第一个页面图片url","text":"第一个页面文字内容"},{"img_url":"第二个页面图片url","text":"第二个页面文字内容"},{"img_url":"第三个页面图片url","text":"第三个页面文字内容"}]

在首页根据点击的按钮存个index到localstorage里，在跳第二个页面再把index get出来,根据index去数组里取内容，再渲染到页面

Answer 3

网页代码保存成字符串形式，js动态写入，加载完成后插入数据

Answer 4

只提个思路，一个方法是可以用html模板，比如jade，给它传入参数； 另个一思路是组件化框架，比如react，vue等。 这几种技术/框架应该都能在一定程度上解决你的问题。具体怎么应用，还请题主google，baidu也有很多好资料。

Answer 5

请先搜索问题，找不到答案再提问。请参阅本文
HTML 代码复用实践
或者你用vue编写可复用组件

Answer 6

把静态页面的代码放入js里动态产生