Вам нужно создать новый маршрут, к которому вы можете сделать вызов API, который возвращает только частичный HTML.Итак, что-то вроде этого:
$.ajax('/loadmore?data=jsonFileName&template=pugTemplateName&startIndex=10&load=20');
Тогда в узле вы будете иметь логику для прослушивания этого маршрута, и когда он войдет, у вас будет узел построить свой HTML, используя вашмопс шаблон.
Таким образом, параметры вашего запроса в этом примере будут такими:
data = .json file to pull data from
template = .pug file to use as template, should not `extend layout`
startingIndex = starting index for getting data from .json file
load = number items to render html for
Наконец, вам нужно использовать шаблон мопса, который не extend layout, поэтому вы получаете только <div> назад, а не весь <html> документ.В шаблоне pug извлеките файл json, переберите нужное количество элементов (заданное параметром startIndex и загрузите), а затем отправьте результат файла pug обратно в браузер.
Результатом вызова AJAX будет частичный html, такой как <div> или <ul>, но не весь документ <html>.Затем вы можете просто добавить его на свою веб-страницу, где он должен отображаться.
Очевидно, что это всего лишь приблизительное руководство по тому, как это сделать, но если вы настроите логику, подобную этой, вы можете использовать этот вызов для любой load-more функциональности, которая может вам понадобиться на вашем сайте.Если вы разместите свой исходный код на github, я мог бы дать больше подробностей.