后端用的是Java，以前是后端velocity模板渲染页面。
最近尝试前后端分离，初步的做法是前端写html文档，使用handlebars模板来渲染，但是每个html文件里面都包含相同的<head>...</head>以及header、footer公用部分，怎么让这部分内容复用？
可能现在的方式有点低级或者不正确，第一次使用前端模板，所以请各位高手指点提携一下，谢谢！
已经看过这个问题：一个网站的公共头部head.html和尾部foot.html如何优雅的在整站实现多处复用同步修改?但没有找到解决方式。
实现你所说的有很多方法，比如传统的ajax载入公用的header和footer都可以。但是有点原始了，如果你的项目是以node为中间件的，推荐使用webpack构建打包项目，然后自己安装个html-loader这个插件就能实现你想要的公用。
关于webpack的html-loader插件的用法可自行百度
极客观点
项目管理
HarmonyOS
//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);
});
});
你如果前后端分离用nodejs做中间层很方便，具体你可以看淘宝那篇前后端分离的文章，然后我给你推荐的模块是express-handlebars能解决你所有的问题。可以去npm上面去看一下。