怎么实现HTML复用?

smallsun0122
  • 63

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

回复
阅读 4.5k
6 个回答
✓ 已被采纳

建议你用前端模板引擎,常用的有: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);
止醉
  • 770

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

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

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

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

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

月影
  • 2.7k

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

宣传栏