前端使用handlebars模板，head部分及公用的header/footer部分怎么复用？

发布于 2022-09-02 01:53:24 字数 384 浏览 14 评论 0

后端用的是Java，以前是后端velocity模板渲染页面。
最近尝试前后端分离，初步的做法是前端写html文档，使用handlebars模板来渲染，但是每个html文件里面都包含相同的<head>...</head>以及header、footer公用部分，怎么让这部分内容复用？
可能现在的方式有点低级或者不正确，第一次使用前端模板，所以请各位高手指点提携一下，谢谢！

已经看过这个问题：一个网站的公共头部head.html和尾部foot.html如何优雅的在整站实现多处复用同步修改?但没有找到解决方式。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过度放纵 2022-09-09 01:53:24

你如果前后端分离用nodejs做中间层很方便，具体你可以看淘宝那篇前后端分离的文章，然后我给你推荐的模块是express-handlebars能解决你所有的问题。可以去npm上面去看一下。

回复收藏 0

夜唯美灬不弃 2022-09-09 01:53:24

https://github.com/ericf/express-handlebars
https://github.com/donpark/hbs

回复收藏 0

梦在深巷 2022-09-09 01:53:24

实现你所说的有很多方法，比如传统的ajax载入公用的header和footer都可以。但是有点原始了，如果你的项目是以node为中间件的，推荐使用webpack构建打包项目，然后自己安装个html-loader这个插件就能实现你想要的公用。
关于webpack的html-loader插件的用法可自行百度

//header.html部分
<div class="header">
    <h2>Featured Entries</h2>
    <ul>
        <li class="active">
            <i class="icon-tick"></i>
            SHOW ALL
        </li>
        <li>
            <i class="icon-media-play"></i>
            VIDEOS
        </li>
        <li>
            <i class="icon-volume-down"></i>
            MUSIC
        </li>
        <li>
            <i class="icon-pencil"></i>
            BLOG POSTS
        </li>
    </ul>
    <h1 class="logo">Zhou</h1>
    <!--<h1 class="logo">Rubber Ducky</h1>-->
</div>

//footer.html部分
<div class="footer">
    <div class="logo">21 <span class="circle">°</span></div>
    <p class="copyright">2016 Twenty First Degrees, LLC Califorina, USA based company . All rights reserved</p>
</div>

//index.html部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pdeng</title>
    <script src="dist/index.js"></script>
</head>
<body>
<div class="container">
    <div class="fresh-num"><i class="icon-arrow-sync"></i>1,452 likes</div>
    <div class="flip-over">
        <i class="icon-arrow-left"></i>
        <i class="icon-arrow-right"></i>
    </div>
    <ul class="section-col">
        <li>
            <div class="col-box">
                <i class="icon-heart"></i>
                kid cudy - ranger
            </div>
        </li>
        <li>
            <div class="col-box">
                my favourite thing about this summer .
                <i class="icon-heart-outline"></i>
            </div>
        </li>
        <li>
            <div class="col-box">
                <i class="icon-heart"></i>
                i remember watching my grandfather working in the shed ...
            </div>
        </li>
    </ul>
</div>
</body>
</html>

//index.js首页实现顶部的底部的公用
define(['../common/jquery-2.1.4.min.js', 'html!../../html/common/header.html', 'html!../../html/common/footer.html'], function ($, header, footer) {
    $(function () {
        $('body').prepend(header).append(footer);   
    });
});

回复收藏 0

~没有更多了~