Статический верхний и нижний колонтитулы в Express JS

Я работаю с express js 4.14.0 и ручками 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». Я считаю, что было бы проще интегрировать турбовинты, которые охватывают ваш прецедент и активно поддерживаются. – staaar

@ DhyaS этот ответ помог вам? – staaar

Статический верхний и нижний колонтитулы в Express JS

ответ

Смежные вопросы