Express JS 中的静态页眉和页脚答案

【问题标题】：Static header and footer in Express JSExpress JS 中的静态页眉和页脚
【发布时间】：2017-02-22 21:03:53
【问题描述】：

我正在使用 express js 4.14.0 和车把 js 4.0.6。我的视图文件夹结构是这样的

view
   Layout.hbs
   Layout Folder
    - Main.hbs
  Partials Folder
    -Header.hbs
    -Footer.hbs
    -Page.hbs
 Index1.hbs
 Index2.hbs

app.engine( 'hbs', express_hbs( { 
  extname: 'hbs', 
  defaultLayout: 'main', 
  layoutsDir: __dirname + '/views/layouts/',
  partialsDir: __dirname + '/views/partials/'
} ) );

页面最初开始渲染的Main.hbs是

<div class="bodyContent">
        <header>{{> header }}</header>
        <div class="container-fluid body-content">
            {{{body}}}
        </div>
        <footer>{{> footer }}</footer>  
    </div>

最初页眉、页脚和页面将通过 Index1.hbs 页面显示。当我进入 Index2.hbs 页面时，页眉和页脚再次呈现。在页面之间导航时，它会导致页眉和页脚闪烁问题。我如何使用把手在 express js 中的页面之间设计页眉和页脚，如共享布局？如何单独覆盖正文内容？

【问题讨论】：

标签： node.js express npm handlebars.js

【解决方案1】：

一个解决方案可能是turbolinks（npm 上提供的前端解决方案）。它将用下一页的<body> 替换您当前站点的正文，并合并<header>。或者您可以尝试编写自己的（可能是 ajax）解决方案，将当前文档的 body 替换为下一页的 body。

闪烁可能是因为您正在导航到一个新站点。每个模板都会创建一个新的“真实”html 页面，其中包括引用的部分。

【讨论】：

通过ajax替换正文内容是个好主意。正文内容 {{{body}}} 已经是部分视图。我如何在 ajax 成功中将其替换为另一个部分视图？
您的客户端只能查看不是部分的“整页”——所以这并不容易。必要的是：假设用户在“Index1.html”页面上并单击将他重定向到“index2.html”的链接，您必须使用 ajax（jquery 等）加载“index2.html”并替换当前“index.html”的正文与“index2.html”的正文。我相信，集成 turbolink 会更容易，它涵盖了您的用例并得到积极维护。
@DhyaS 这个答案对你有帮助吗？
@staar 不知道如何在车把上使用这个 turbolink。有没有可用的示例链接？