AJAX
AJAX = Asynchronous JavaScript and XML, is a technique used to create fast and dynamic web pages. By exchanging small amounts of data with the server in the background, AJAX allows web pages to be updated asynchronously. This means that parts of the webpage can be updated without reloading the entire page. Traditional web pages (without AJAX) must reload the entire page to update content. There are many applications of AJAX, with one of the most common being when the browser automatically loads the next page of content when you scroll to the bottom.
PJAX
PJAX = PushState + AJAX. When a user clicks a link to make a request, PJAX intercepts the request and then triggers an Ajax request and PushState. Here, Ajax enables partial page refresh, and pushState is used to modify the URL without redirecting the page, thus achieving the function of partial page refresh without redirecting. This can improve user experience while significantly reducing server and bandwidth consumption.
Butterfly + PJAX
Enable PJAX
PJAX is already integrated into the Butterfly theme. In the theme configuration file _config.butterfly.yml, find Pjax and set enable to true.
Reload JS
Since pages switched via PJAX are not fully refreshed, the browser will not execute the webpage from the beginning, so some JS will not take effect. To ensure that the functionality remains intact, it needs to be executed again, i.e., reloaded.
The Butterfly theme has already integrated a solution in pjax.pug. Each time you use it, add the data-pjax attribute to the tags that introduce these files.
1inject:
2 bottom:
3 - <script data-pjax src="/js/ripples.js"></script>