Question

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

Answer 1

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

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

Express JS中的静态页眉和页脚

1 个答案: