Express中的静态页眉和页脚JS

我正在使用express js 4.14.0和handlebars js 4.0.6。我的观点的文件夹结构是这样Express中的静态页眉和页脚JS

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页面时，页眉和页脚再次呈现。在页面之间导航时，它会导致页眉和页脚中闪烁的问题。我如何设计页眉和页脚，如使用手柄的快速js页面之间的共享布局？如何单独覆盖正文内容？

来源

2017-02-22 Dhya S

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

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

来源

2017-02-22 13:03:53 staaar

通过ajax替换主体内容是个不错的主意。主体内容{{{body}}}是部分视图。我可以用ajax成功中的另一个局部视图替换这个吗？ –

您的客户端只能查看“完整页面”，而不是部分页面 - 因此并不那么容易。什么是必要的：想象一个用户在页面“Index1.html”，并点击一个链接，将他重定向到“index2.html”，你必须加载“index2.html”使用Ajax（jQuery等），并将您当前的“index.html”的正文与您的“index2.html”的正文。我相信，集成turbolink可能更容易，它涵盖了您的用例并得到积极维护。 – staaar

@DhyaS这个答案对你有帮助吗？ – staaar

Express中的静态页眉和页脚JS

回答

相关问题